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
