[Invalid scope on dynamically rendered elements with scrolltriggers when switching routes in Next js]

Yeah that definitely makes it more clear to me

 

Thanks a lot for your help and explanations!

[Invalid scope on dynamically rendered elements with scrolltriggers when switching routes in Next js]

Thank you, the revertOnUpdate seems to fix the issue.

Can't say I understand why this works tho, as the useGSAP is reverted when the component is unmounted?

 

The Refresh is because I have ScrollTriggers on elements below the feed that don't work without it. And removing the Refresh doesn't fix the issue in my full project.

 

Another thing I tested is adding tweens without ScrollTriggers to the feed, and that doesn't cause any errors.

[Invalid scope on dynamically rendered elements with scrolltriggers when switching routes in Next js]

Thank you for the fast reply, and for the stackblitz templates!

I managed to recreate the issue here: https://stackblitz.com/edit/nextjs-szpzhc?file=components%2FCurator.js

[Invalid scope on dynamically rendered elements with scrolltriggers when switching routes in Next js]

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.

[Problem with ScrollTrigger timeline onComplete]

That worked perfectly!

 

Thank you so much for the quick response!

[Problem with ScrollTrigger timeline onComplete]

Hello!

 

I am having a problem with running a function inside a timeline with onComplete.

Instead of running when the tween is complete, the function runs when page loads.

Am I missing something obvious here?

Created a codepen with a simplified example.

 

Thanks!

See the Pen QWpENqO by joel-udd (@joel-udd) on CodePen