Hi all, new to the GSAP library and loving it!
I'm trying to implement ScrollTrigger with Next.js but for some reason when I define a timeline with ScrollTrigger it shows me the following error.
TypeError: Cannot read property '_gsap' of undefined
I'm not sure though if the error it's Next.js related.
Imports:
import { gsap } from 'gsap';
import { ScrollTrigger } from 'gsap/dist/ScrollTrigger';
import { useEffect, useRef } from 'react';
Function:
const triggerRef = useRef(null);
const titleRef = useRef(null);
const textRef = useRef(null);
const tl = gsap.timeline({
// yes, we can add it to an entire timeline!
scrollTrigger: {
trigger: triggerRef.current,
start: 'top center',
toggleActions: 'play none none reverse',
markers: true,
},
});
useEffect(() => {
tl.from(titleRef.current, {
duration: 0.5,
autoAlpha: 0,
ease: 'power1.out',
delay: 0.1,
y: 10,
}).from(textRef.current, {
duration: 0.5,
autoAlpha: 0,
ease: 'power1.out',
delay: 1,
y: 10,
});
}, []);
Any ideas? Thank you.
