Discuss

Animation Delay Options

You can create sequential animations using the delay option of the Animate component in Wappler.

We added 3 images in a row on our page and we want to animate them sequentially when they enter the viewport.
Note - you can do this for any element on the page, it doesn’t apply only to images.

Select the first image:

Add new dynamic attribute:

Add Inview Animation:

Select an animation effect. For this tutorial we use the Zoom In effect:

Then select when to apply the selected effect, we select when the image is 100% in the viewport:

You can override the default animation duration, which is 1000 milliseconds (1 second), if you wish. Set a value in milliseconds:

We don’t need a delay set for the first image, so we leave this field empty:

Select the second image and add the same animation here:

The only difference here is the delay. In order to add the sequential effect, we add a delay of 100 milliseconds here. So the animation of this image will be applied 100 milliseconds after it enters 100% in the viewport:

We do the same for the third image, this time adding a delay of 200 milliseconds:

When the 3 images enter the viewport the animation applied to the first one will begin immediately, then after a delay of 100 milliseconds the animation applied to the second image will run, and after 100 more milliseconds the third image will get animated.

Here’s the result: