Share Posted June 7 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 ? Link to comment Share on other sites More sharing options...
Author Share Posted June 7 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. Link to comment Share on other sites More sharing options...
Share Posted June 7 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! Link to comment Share on other sites More sharing options...
Author Share Posted June 8 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. 👏 1 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now