[Next.js with GSAP - ScrollTrigger]

2 minutes ago, Rodrigo said:

Brian is right, it has to be inside the useEffect or in the componentDidMount hook (if you're using class components).

 

Perhaps what you've seen before is that a reference is being created for a GSAP instance outside a useEffect hook in order to keep it through re-renders and perhaps update it in case of a specific state or prop update:

const myTween = useRef(gsap.timeline({ paused: true }));
const myRef = useRef();

useEffect(() => {
  myTween.current.to(myRef.current, { duration: 1, x: 100, y:100 });
  
  return (() => {
    myTween.current.kill();
  });
}, []);

Happy Tweening!!!

Thanks for the explanation!

[Next.js with GSAP - ScrollTrigger]

19 minutes ago, BrianCross said:

Not sure if this is causing your exact error but you need to put this:

 

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,
    },
  });

in your useEffect callback. Otherwise the timeline instance will get re-created every time the component re-renders.

 

It works but is this the correct way to do it? Because the react examples that I've found the gsap.timeline is out of useEffect. Thanks for the reply.

[Next.js with GSAP - ScrollTrigger]

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.