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!