Droxic Posted June 30, 2021 Share Posted June 30, 2021 Hello! We have a React project and we use Storybook to document our react components. We use ScrollTrigger to animate some parts of one of our components. However we faced a strange issue with it in the context of Storybook. Let me try to describe the issue step by step: - I select the ScrollTrigger component in Storybook - it works fine. I scroll a bit; - I select another component that doesn't use ScrollTrigger; - I go back to the same ScrollTrigger component - it scrolls automatically to the position where I left it before. What is also interesting is that if I scroll to another position then it doesn't 'remember' the new position. Every time I visit the ScrollTrigger component it always plays to the position where I left it for the first time. I am sorry but it will be very difficult for me to create a pen. So here is some parts of my code that are related to the issue: This is the initialisation: const tl = gsap.timeline({ scrollTrigger: { id: 'newsHeroScrollTrigger', trigger: mainContainer.current as Element, pin: mainContainer.current as Element, start: "top top", end: "+=1700", scrub: 1.25, invalidateOnRefresh: true } }); I also use matchMedia: ScrollTrigger.matchMedia({ 'min-width: 600': () => initialiseScrollTrigger(false), 'max-width: 600': () => initialiseScrollTrigger(true) }); And here is the useLayoutEffect where I initialise the animations and the clean on unmount: useLayoutEffect(() => { defineAnimations(animationRefs, themeContext, animationUpdateFunction); return () => { ScrollTrigger.getAll().forEach(trigger => trigger.kill()); ScrollTrigger.clearMatchMedia(); } }, []); defineAnimations function calls ScrollTrigger.matchMedia. The actual initialisation is inside initialiseScrollTrigger function. Thank you in advance! Link to comment Share on other sites More sharing options...
Droxic Posted June 30, 2021 Author Share Posted June 30, 2021 I found what was the issue - I need to also kill the Timeline instance. I expected that ScrollTrigger.kill() will also kill the timeline but it seems it doesn't work like this. It means I need to be very careful because I guess this can be a possible memory leak problem. Link to comment Share on other sites More sharing options...
OSUblake Posted June 30, 2021 Share Posted June 30, 2021 Hi Droxic! This sounds like an issue that was just resolved. Would you mind testing this package out? You can npm install it. https://assets.codepen.io/16327/gsap-beta.tgz 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