Prevent SPA View from caching

[brad]

My first SPA site ever is nearing completion. I am now a believer in routes and SPA methods. My boss likes the idea of animated elements on the pages as well, but as we know the views are cached an the animations only work once.

I am guessing the answer is no, but is there a way to prevent the view caching so that animations will work on every view change?

[s.alpaslan]

maybe SPA pages needs to onloaded event for external call js . you can trigger all js when spa page loaded .

if you are using js in SPA project . and if you have server connect on your SPA page(view) you can use onloaded events for call js .

[ben]

If you use the Inview Animation, there should be no problem

See my own site as an example (home page only, no time to do more)

[brad]

I had in views set up. They only worked sometime and some pages didn’t even load until I started scrolling.

[nshkrsh]

The animation seems to be set only on a single paragraph. What Brad needs to do is animate the page transition. Which does not work with current routing implementation as posted here.

@brad not caching page would defeat the purpose of having an SPA in my understanding. The better solution would be to expose the loadaed event. That would also help us handle multiple other issues we are facing with SPAs too.

[brad]

@nshkrsh is correct. I am doing more of a page transition, @ben.

See for example, here is a page I added transitions for that I know doesn’t work. Nothing loads until you scroll.

http://kopar.workbcpg.ca/press

[Teodor]

Hey Brad,
Please follow Patrick's advise to add animations to your SPA:

Animate Single Page Apps (SPA) Page Change

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.

[brad]

Thanks Teodor, I have done that. But it only animates once the first time the page is visited.

http://kopar.workbcpg.ca/success

[Teodor]

Brad, you have applied inview animations through the UI.
Please double check Patrick's explanation, remove any animation options applied and manually add the classes he mentioned.

@patrick

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.

[brad]

Is there a way to slow down the animation?

[Teodor]

You can edit the animate CSS file and change the default duration, which if I properly remember is 400ms (not 100% sure about the default duration, on my phone currently)

[brad]

Thanks for your help, @teodor. I was hoping to be able to animated individual elements but I will settle for full page transitions. Thanks again, much appreciated.

[Teodor]

Maybe @patrick can improve this in some of the future updates