Nuxt3 / GSAP Page Transitions - Seamless Page Transition

[Windpixel]

Hi Crew,

I have slightly modified the existing stackblitz for Nuxt3/GSAP but simplifying the animation to one tween in and out for simplicity.

 

Im trying to achieve a seamless side to side transition where effectively both the out animation and the in animation occur at the same time.

I can achieve this effect with css only, but really want GSAP for the flexibility.

I have tried playing around with the hooks, but cant get it to work. I think they hooks are right.

 

https://stackblitz.com/edit/nuxt-starter-d3iqbd?file=helpers%2FtransitionConfig.js

Thanks in advance.

[mvaneijgen]

Your code seems to work perfectly. They could be more seamless, but both your tweens use the default ease (power1.out), so you could set it to ease: none or give the one .out and the other .in, but I don't see anything wrong with this set up, seems pretty seamless to me! Am I missing something?

 

 

[Rodrigo]

Hi,

 

That is due to the transition mode set in the transition config:

https://vuejs.org/guide/built-ins/transition.html#transition-modes

 

Right now the demo you forked uses out-in, which means the current component/page is animated out first and when that is completed the in animation of the next route happens. If you want to have both transitions happen at the same time you have to remove the mode attribute from the transition config, but beware that this will require a lot of extra work, since both pages will be rendered in the DOM at the same time. This will mean changing a lot of styles and you'll also have to become quite creative about when exactly you have to create the ScrollTrigger instances, because the document height probably won't reflect the natural height given the elements it will have in it after the animations are completed, which most likely will throw off every calculation ScrollTrigger makes, so I'd suggest you to remove the scrolling from the body tag while the animations happen, add it back again when the transitions are done and once you have a body tag that is scrollable, then make the ScrollTrigger calculations.

 

You can see what I mean in this demo in the Vue playground.

 

Hopefully this helps.

Happy Tweening!

[Windpixel]

6 hours ago, Rodrigo said:

Hi,

 

That is due to the transition mode set in the transition config:

https://vuejs.org/guide/built-ins/transition.html#transition-modes

 

Right now the demo you forked uses out-in, which means the current component/page is animated out first and when that is completed the in animation of the next route happens. If you want to have both transitions happen at the same time you have to remove the mode attribute from the transition config, but beware that this will require a lot of extra work, since both pages will be rendered in the DOM at the same time. This will mean changing a lot of styles and you'll also have to become quite creative about when exactly you have to create the ScrollTrigger instances, because the document height probably won't reflect the natural height given the elements it will have in it after the animations are completed, which most likely will throw off every calculation ScrollTrigger makes, so I'd suggest you to remove the scrolling from the body tag while the animations happen, add it back again when the transitions are done and once you have a body tag that is scrollable, then make the ScrollTrigger calculations.

 

You can see what I mean in this demo in the Vue playground.

 

Hopefully this helps.

Happy Tweening!

Hi Rodrigo,

 

I have removed the mode attribute from the transition config, and set the three pages to purple, red, blue. I also removed the alpha tween for further simplicity. set the default timeline animation to ease "none", to overide the default gsap power1.inout ease.

 

https://stackblitz.com/edit/nuxt-starter-d3iqbd?file=helpers%2FtransitionConfig.js

In between animations, you can see the black background colour, "in between" the horizontal page transitions. So while its close to seamless im still missing something.

I understand some complex page transitions w/ gsap animations will require further foundational setup and planning, which isn't a problem, My goal is to get the absolute bleeding edge page transitions. So whatever it takes. 

[Windpixel]

Ok. Solved. Thanks all

The animation and timing is perfect, but when new page gets added to the DOM, it is stacked (display:block),

 

tapping into the native css classes vue/nuxt offers, I just set the following styles.

Min Dem updated, now truly seamless, each page is butted up against the last: 
https://stackblitz.com/edit/nuxt-starter-d3iqbd?file=assets%2Fstyles.css

As mentioned, the leaving page "jumps" top the top on page transition start, but ill come up with a work around for that
 

.page-transiton-enter-active,
page-transiton-leave-active {

position:fixed;

top:0;

left:0;

right:0;

bottom:0;

}