Jump to content
Search Community

Next.js with GSAP - ScrollTrigger

trunks test
Moderator Tag

Go to solution Solved by BrianCross,

Recommended Posts

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.

 

err.PNG

Link to comment
Share on other sites

  • Solution

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.

  • Like 2
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

1 hour ago, trunks said:

Because the react examples that I've found the gsap.timeline is out of useEffect.

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!!!

  • Like 3
Link to comment
Share on other sites

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!

  • Like 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...