Using Animations

With Wappler you can apply different animation effects to any of the elements on the page. There are two types of anymations included - inview (or onscroll) animations, and enter/leave animations.

The inview animation is applied to your elements so that when you scroll, they get animated when they enter the viewport. The enter/leave animations can be applied to your repeat regions, so that the repeat elements get animated when rendered on the page or when the data is filtered.

Inview/Outview Onscroll Animations

First we will show you how to use the inview animations. Open your page and select the element, which you want to animate:

You can also select it in the App Structure:

Then add new dynamic attribute:

Open the Animation menu:

And add inview animation:

Open the Name dropdown in order to select the animation type:

There are many different animation options available. Just select the one you need:

Then select when to start the animation. 100% visible means, that the animation will start when the element is fully visible in the viewport, while 10% visible means that the animation starts when 10% of the element is in the viewport:

Just select the right amount for your needs:

The same way as you added an inview animation you can add an outview animation. It runs when the element leaves the viewport. Add new dynamic attribute:

Open Animation:

Select outview animation:

And select the type of the outview animation:

We select Zoom Out:

And you are done. Your element will fade in on scroll, when it enters the veiwport and then it will zoom out when leaving the viewport:

---

Enter/Leave and Move Animations

The other type of animations available in Wappler are the ones applied to your repeat regions. First, create a repeat children region which repeats some elements on the page: