problem with scrolltrigger

[NirvanaWorld]

hi guys !

 

I encountered a strange issue when using scrolltrigger to implement a spacer-footer in Nuxt 3. My code is written in the layout component because both the footer and content need to be reused. However, I found that when switching between two pages that use the same layout, an additional scrolltrigger markers will appear, and this extra marker will also trigger the animation, causing the animation to be triggered at an inappropriate position

 

Currently, I have tried using methods like tween.kill(), gsap.killTweensOf(), or setting tweens to null to reset the animation when entering the page, but I found that these methods did not solve the problem.

 

can anyone tell me what i did wrong ?

[NirvanaWorld]

Additional Information : The issue occurs when switching between the /company and /careers pages, and it only happens when you scroll down on the /careers page before returning to the /company page. If you enter the /careers page but don't scroll down before going back to the /company page, the issue doesn't occur.

[Rodrigo]

Hi @NirvanaWorld and welcome to the GreenSock forums!

 

Thanks for being a Club GreenSock member and supporting GreenSock! 💚

 

This could be related to the fact that you're not properly cleaning up when each page is unmounted. Check this example we have in Nuxt3:

https://stackblitz.com/edit/nuxt-starter-khrgsj

 

We strongly recommend using GSAP Context for these types of setups:

https://greensock.com/docs/v3/GSAP/gsap.context()

 

Hopefully this helps.

Happy Tweening!

[NirvanaWorld]

14 hours ago, Rodrigo said:

Hi @NirvanaWorld and welcome to the GreenSock forums!

 

Thanks for being a Club GreenSock member and supporting GreenSock! 💚

 

This could be related to the fact that you're not properly cleaning up when each page is unmounted. Check this example we have in Nuxt3:

https://stackblitz.com/edit/nuxt-starter-khrgsj

 

We strongly recommend using GSAP Context for these types of setups:

https://greensock.com/docs/v3/GSAP/gsap.context()

 

Hopefully this helps.

Happy Tweening!

Hi ! @Rodrigo , Thank you for providing the solution, everything is running smoothly now. 👏