[NextJS/ReactJS: ScrollTrigger + Context with Timelines?]

Legend, thanks @mvaneijgen, everything's working smoothly. I'll be sure to read that post before I move on. 👍

[NextJS/ReactJS: ScrollTrigger + Context with Timelines?]

Hi there,

 

I'm relatively new to NextJS and React, and am trying to nail GSAP integration in NextJS. 

I've come across an issue I can't seem to get around.

In my codepen example how can I use timelines? I get unusual behaviour when I change to this type of format:

 

 useIsomorphicLayoutEffect(() => {
// PROBLEM 1: I tried to use `const tl = gsap.timeline()` here.
// then change `gsap.context()` to `tl.context()` but I get errors. 
    let ctx = gsap.context(() => {
      return () => ctx.revert() // cleanup
    }, [])
    
// PROBLEM 2: works okay with `gsap` but not this. 
    const tl = gsap.timeline();

    // 1. SCROLLTRIGGER ANIMATIONS
    tl.to('.spin_text', {
      scrollTrigger: '.gsap_orange',
      duration: 2,
      rotation: 360,
    })
    // ... etc

    // 2. OTHER GSAP ANIMATIONS
 
  }, [scrollPage.current]);

Thanks,

Jim

See the Pen rNqjMxQ by JSDigital (@JSDigital) on CodePen