Fade Views In and Out

#1

I like the effect in this showcase where the views are faded in. Is this done with just the Wappler animations? If so, what are the settings?

https://showcase.wappler.io/spa_travel/

#2

Ok, I discovered how to do it. You have to use the Enter Animation not the Inview Animation and you need to apply it on the view pages. At least that is how I got it working.

I would have love to use the Inview Animations so I could apply it to individual elements on the page. But it seems that if you use Inview Animations they will not show up on the page unless you have to scroll a significant amount.

Here is my work in progress: http://kopar.workbcpg.ca/

Seems to be very hit and miss if the animations work or not. Can’t pin point a cause.

#3

As patrick has written in the other SPA animation post, the current implementation of routes does not allow for animations to work properly.
Your enter animation too works only once, i.e. the first time a route is visited.
Once its cached, the animation will stop working.

This is why I had to use JS for my animation.