FREE OutSystems Workshops - Build an OutSystems App in 1 hour | ENROLL NOW

Tech Bites - How to animate your widgets

< Back to Blog

Do your screens look static and boring?

Let's explore how to animate these icon widgets, so they can jump or spin.

First, find the animate pattern on the left and drag once for every icon we want to animate. Then, place the icon widget inside.

Click on the Animate properties and select an animation type from the drop-down.

After publishing the app, we can configure the animations to run more than once.

Let's configure them to repeat indefinitely: open the screen's CSS and type the pattern name class "animate", use the CSS property "animation iteration count", and attribute the value "infinite".

Now, let's publish the app again, and all animated widgets will loop their animation!

Turn Up Academy

Apply to our Turn Up Boot Camp


Latest Articles

Tech Bites - How to use Screen templates

How to use Screen templates

Did you know that the OutSystems Platform has tens of screen templates to help you quickly put together your apps? Let me show you how you can use them.

Tech Bites
Tech Bites - Set timers to delete records

Set timers to delete records

In this tech bite, we will demonstrate how to set timers to delete records and use an online store as an example.

Tech Bites
Tech Bites - How to import data from an excel file

How to import data from an excel file

In this video, we’ll show you how to upload and store data from an excel file.

Tech Bites