Animate Single Page Apps (SPA) Page Change

Wappler General How To
#1

Hi.
I have an implementation of SPA where the user signs up in a wizard like UX where all pages are loaded in the main page using SPA.
I would like to animate the page switching, when user moves between the pages.
I tried using Animate region on the main page and putting all the routes inside it, but could not get it to work. Any idea how a transition animation can be applied when SPA content pages are changed?

#2

A quick thought without testing, could you set the animation on the top level of each of the Content Pages rather than the parent page?

#3

Inview animations set on the content page wrapper should do the job, have you tried it?

#4

Thanks for the suggestions. :slight_smile: Had a busy day could not test. Will do first thing tomorrow and post my findings here.

#5

Both suggestions were to place animation at the content page.

@Teodor - Inview/Outview animation does not get invoked when coming from another page. It renders blank page. Dev tools show visibility:hidden style is applied on the main wrapper. If I load the content page directly, the inview animation works.

@UKRiggers - I tried enter/leave animation on the content page’s main node. Only enter animation worked and only once. If I go back and forth between the content pages, it doesn’t animate again.

2 Likes
#6

I’ll check that.
Maybe @patrick can advice here more :slight_smile:

1 Like
#7

Animations won’t work well on the current Route implementation. Use the animate.css classes directly on the content page’s main node. Leave animations will not work since the content is directly replaced when new page is loaded.

Make sure animate.css is linked, then add for example fadeIn animated for a fadeIn animation. The extra animated class is important, without it will not animate. Check https://daneden.github.io/animate.css/ for all available animations.

2 Likes
Prevent SPA View from caching
Prevent SPA View from caching
#8

Thanks for the details. :slight_smile:
Will look into it.

Prevent SPA View from caching
#9

Has this been improved for SPA views in Wappler?

#10

No update on this yet.
For my project I have implemented a JS based solution. I capture the history.push/pop events to determine which animation to apply. And keep a list of all route’s ID in JS to determine which route to animate based on the URL.
If you wan’t I can share the JS.

2 Likes
#11
#12

Please, share with us!

1 Like