GSAP and Nuxt 3 Page transition

[federico.pian]

Hi I'm working on page transition in Nuxt 3 with gsap, following this Stackblitz:
https://stackblitz.com/edit/nuxt-starter-bthjlg?file=README.md
 

Is it possible to wait the page leaves and then revert the context? Otherwise you see weird behavior, for example when you are on the Layer section page, you scroll to a pinned section and then you navigate to another page it should stay to that section and not jumping to the top.

 

Thanks in advance for your help!

[Rodrigo]

Hi @federico.pian and welcome to the GreenSock forums!

 

The examples and recommendation for using GSAP Context in Vue and Nuxt is to use the onUnmounted hook which is the last hook that Vue offers when it comes to a component's lifecycle.

https://vuejs.org/guide/essentials/lifecycle.html#lifecycle-diagram

https://vuejs.org/api/composition-api-lifecycle.html

 

The problem here is that the animation is happening after the hook is called or apparently because of the type of animation (we're scaling down the entire page) there is some scrolling involved. You could try a different animation, like fade in/out in order to see if the issue is still there.

 

Unfortunately right now I don't have a lot of time to dig into this. I'll circle back to this thread and see what I can find out. In the mean time play and experiment with the example and see if a different animation has the same effect. Also you can try ScrollTrigger's clearScrollMemory method:

https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.clearScrollMemory()

 

Hopefully this helps.

Happy Tweening!

[federico.pian]

Hi @Rodrigo,

 

thanks for your answer. I came up with this solution: I removed the revert function on the unMounted hook and I kill all the scrollTriggers in the transitionConfig.js file when the page is leaving.

 

Is it a good solution?

 

Thanks again for your help!
 

const tlLeave = gsap.timeline({

     paused: true,

     onComplete: () => {

          ScrollTrigger.killAll()

          done()

     }

})

[Rodrigo]

Hi,

 

It would work only for ScrollTrigger instances and not other GSAP instances. In those cases it would be better to have a context reactive property in the transition composable or create a different composable for the context and when the GSAP Context is created in the page, set the one in the composable to be that and use the same composable to revert it.

 

Unfortunately I don't have time now to dig into this and provide a working example. Hopefully what I wrote makes sense and you can try this on your own.

 

Happy Tweening!

[Evan S]

hi @federico.pian

I was working on a Nuxt3 project and I had similar questions of how to create seamless page transitions following at the same time good practices for both Nuxt and the GSAP library itself. I had to experiment a lot  to find the best approach. I'm not sure if this answers your question but something you can try is this.

Take advantage of the "gsap.context" and create a local scope of either your pages or even individual Vue components. This will make it easier to reference it later and do an easy clean up. Example:
 

<script setup>
import { gsap } from 'gsap';
const main = ref();
let ctx;

ctx = gsap.context((self) => {
  gsap.to('.my-element', {
      alpha: 1,
  });
  
  // ... rest of GSAP magic here
}, main.value); // <- Scope!

onUnmounted(() => {
  ctx.revert(); // <- Easy Cleanup!
});
</script>

I'm using the Vue unmounted hook to revert everything, like @Rodrigo mentioned this is the hook that comes last in Vue for a component lifecycle. This will clean up your animations and eventually optimize performance as well. You can play around this idea and find the best fit for your case.

I hope this small input helps you and others with similar question.

Best