Transition between pages with curtain effect with gsap in SPA

[Packo]

Here's an example: https://www.azzerad.com/
 

For a month I've been trying to learn how to do nice page transitions which look seamless like on the page above. I am using the SPA framework Nuxt.js which has a lot of stuff for this kind of transition.
 

However, I was never successful in utilizing it perfectly. Either my content loads way too fast and the curtain effect is not there or the routing doesn't work the way I want. I tried vue's navigation guards, nuxt loader component but without a good result. Of course, for animations, I use GSAP which should help the transitioning between pages easier. 

Let's say I click on the link, transition in the curtain, load the content behind and then transition out. This should be doable with the timeline I believe.
 

Does anybody know how to nail this kind of page transition? I took a look at barba.js but that is basically the same as vue's transition hooks but still, I can't use it properly for the curtain.

[OSUblake]

Hi Packo,

 

I'm sure it's possible, but it's not something we can easily show you how to do. You will probably have to do some communication between the 2 pages. Once the next page is ready, then you trigger the outgoing animation and once that's done, then you trigger the incoming animation.

[Packo]

Yeah, what I'm interested in is the technical aspect. Like how do you prevent page changing route when you click on link, but first play the animation and then as the page is ready, finish the animation. 

 

I wonder where I could find some guidenance about it because I can't find a proper way to do it

[OSUblake]

Well, there's the <transition> component which has a bunch of callbacks you use with GSAP.

https://vuejs.org/v2/guide/transitions.html#JavaScript-Hooks

 

You can also have your animation trigger the route change, like an the onComplete callback.

 

Also, here's an article on transitions. I you check it out the repo in there, it's using GSAP.

 

https://css-tricks.com/native-like-animations-for-page-transitions-on-the-web/

 

[Packo]

25 minutes ago, OSUblake said:

Well, there's the <transition> component which has a bunch of callbacks you use with GSAP.

https://vuejs.org/v2/guide/transitions.html#JavaScript-Hooks

 

You can also have your animation trigger the route change, like an the onComplete callback.

 

Also, here's an article on transitions. I you check it out the repo in there, it's using GSAP.

 

https://css-tricks.com/native-like-animations-for-page-transitions-on-the-web/

 

Thanks blake! I believe the css-tricks article will come handy!