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

AND BECOME THE NEXT OUTSYSTEMS CERTIFIED DEVELOPER
(
Instructor
)

Latest Articles

‍What’s new in OutSystems Developer Cloud

‍What’s new in OutSystems Developer Cloud

Have you heard about the OutSystems Developer Cloud and want to know more about what's new and what the big benefits are? Then this article is for you!

DevZone
Tech Bites - Should we validate form data on server-side?

Should we validate form data on server-side

When including forms in applications, developers often wonder if they need to re-validate data on the server side after having checked it on the client. Why go to the trouble of checking the data twice?

Tech Bites
The Top 5 Mistakes Handling Asynchronous Data In Outsystems Reactive Apps And How To Avoid Them

The Top 5 Mistakes Handling Asynchronous Data In Outsystems Reactive Apps

When developing an OutSystems reactive web app, you would expect to display data quickly, but it doesn't always happen. Do you know why? We'll explore the reasons and how to tackle them.

DevZone