Hello,
I was not able to recreate this issue in codesandbox or stackblitz, but hope you can give some insight based on what I can provide here.
I have a Next.js website using the pages router, and I have an issue with a component that has elements rendered dynamically from a script after the component mounts. (It's a social media feed from Curator.io)
The posts in the feed have a scrolltrigger applied to them after the feed has loaded.
const curatorContainer = useRef()
useGSAP(() => {
if ( feedLoaded ) {
ScrollTrigger.create({
trigger: curatorContainer.current,
start: "top bottom-=200px",
onEnter: () => {
gsap.fromTo('.crt-post-c',
{
opacity: 0
},
{
opacity: 1,
duration: 0.75,
delay: 0.2,
stagger: 0.1,
overwrite: 'auto'
})
},
onLeaveBack: () => {
gsap.to('.crt-post-c', {
opacity: 0,
duration: 0.5,
overwrite: 'auto'
})
},
})
}
}, { scope: curatorContainer, dependencies: [feedLoaded] })
return (
<div ref={curatorContainer}>
...
</div>
)
On the first load everything works fine, but if I navigate to another page and back to the page with this component, I get several "Invalid scope" errors in the console (some on a gsap timeline unrelated to the component that seems to cause the errors). I also get the error "GSAP target .crt-post-c not found." even tho this code spicifically checks for any existing .crt-post-c before running.
However the animations work without issues, so I just want to know what's causing the errors and if I can get rid of them.
There is no errors when using this same gsap implementation on things that aren't dynamically rendered.
