JDansercoer

That appears to do the trick! Didn't know the ScrollTrigger had it's own life and is not killed when killing a Tween. Below, for anyone interested, is the solution with a cleanup. useEffect(() => { animation.current = gsap.fromTo( wrapper.current, { opacity: 0 }, { opacity: 1, scrollTrigger: { trigger: wrapper.current, scrub: true, end: "+=100%" } } ); return () => { animation.current.scrollTrigger.kill(); animation.current.kill(); }; }, [location.pathname]);

Hi @Rodrigo and @ZachSaucier, Sorry for coming back to this topic so late, but I just tried implementing the solution I proposed above, but it turns out that this does NOT solve my original issue. Open the first CodeSandbox with a solution made by @ZachSaucier, and follow the next few steps: Start on the homepage. Scroll down, you correctly see the element fading into view. Navigate to another page. Scroll down, again you have expected behavior. Now go back to the homepage, but highlight the animating element in your inspector. When you're at 33% or 66% of the page (depending on what page you navigated to in step 3), you'll notice that the element (that is currently not in view), will start animating. So this goes to show that the .kill() function is not being executed for some reason, or that the Tween is not being garbage collected. Any idea?

Hey @Rodrigo, Thanks a bunch for pointing me in the right direction. In my original post, I already stated that I had tried working with using .kill() in the cleanup effect, but that that seemed to do nothing. useEffect(() => { animation.current = gsap.from(wrapper.current, { opacity: 0, scrollTrigger: { trigger: wrapper.current, scrub: true, end: "+=100%" } }); return () => { animation.current.kill(); }; }, [location.pathname]); However, upon further inspection and thanks to your remarks, I found out that indeed the animation was being killed of, as it should be. But the key issue was that my original attempt did not have a fromTo(), but only a from(). What I think was happening was that, upon switching page, gsap would start a new animation and check it's current state. But because that probably had opacity: 0 (since it was not in the viewport), it would animate from opacity to opacity 0 (which was the state it probably last knew. So combining this with my previous remark about cleanup effects, gave me the code below, which appears to work 100%. useEffect(() => { animation.current = gsap.fromTo( wrapper.current, { opacity: 0 }, { opacity: 1, scrollTrigger: { trigger: wrapper.current, scrub: true, end: "+=100%" } } ); return () => { animation.current.kill(); }; }, [location.pathname]); Thanks!

Hi Zach, can you maybe explain why your solution would work and mine wouldn't? To me, it seems that you're not using the real "React-way", seeing as you're not really cleaning up the effect that was first introduced, but rather solve it in a very "hacky" way.

Hey guys, I'm currently developing a Next.js project that heavily uses gsap. However, I'm facing an issue with a component that is used across multiple pages, but its animation does not get fixed on page switches. When you are at the homepage, and scroll all the way down, you'll see that the footer animates in as as it should. However, when you switch pages, the footer will never be visible, because of course it never reaches that point. I tried playing around with `.kill()` function (see the commented out code), but that does not seem to solve the issue. You can find my sandbox at https://codesandbox.io/s/naughty-ride-vh1e6?file=/src/Footer.js How can this be fixed?

Oh, of course it is just as simple as that! I'm coming from a ScrollMagic-history, where I also had to mess with the height of the element. Thanks for the swift response!

Hi guys, I was wondering if it was possible to keep a previously pinned element pinned even after it has finished animation. In the provided Codepen (which is taken from the docs), if you closely inspect the HTML, you can see that the previous section, once it's completely covered, will move out of the screen. Is there any way to keep it pinned, as e.g. I will be animating out all the existing elements of this pinned section, while a new section will have been animated in? In other ways, I would like to have the animations of two scrubbed sections visible at the same time.