Jump to content
GreenSock

Tonycre8

GSAP ReactJS and ScrollTrigger

Recommended Posts

Hey guys, I'm trying to use GSAP along with ReactJS, and trying to get scroll trigger to work. I have some code here:
 

import React, {useRef, useEffect} from 'react';
import gsap from 'gsap'
import ScrollTrigger from 'gsap/ScrollTrigger'

export default function App() {
//...
  let panels = useRef(null)
  
  var anim = gsap.to(panels, {
    y: 300,
    duration: 2
  })

  ScrollTrigger.create({
    trigger: panels,
    animation: anim,
    start: "top center",
    end: "top 100px"
  })
}

But I seem to constantly get errors. In fact, any time I don't put an animation in my useEffect() statement, it breaks my code completely.
The error I'm getting is as follows:

image.thumb.png.40b8f40e81752f890f91ee0b81974c86.png

Does anyone know what I can do to fix this? And is there any way to get animations to work outside of the useEffect component?

Link to comment
Share on other sites

Hey Tonycre8. Have you tried using panels.current as your target? 

Link to comment
Share on other sites

17 minutes ago, ZachSaucier said:

Hey Tonycre8. Have you tried using panels.current as your target? 

Hey there,

I haven't no, but panels isn't actually an array here.
I managed to get it working funnily enough, but not in the way I was trying to. I had to simplify by adding the scrollTrigger property onto a gsap animation, i.e.
 

gsap.to([panel1, panel2, panel3], {
      duration: 1,
      opacity: 1,
      stagger: {
        each: .6
      },
      scrollTrigger: {
        trigger: panels,
      }
    })

And also, it seems as if in React, gsap animations don't work too well outside of the useEffect or triggers like an onClick. You can't just put it as a part of the function code it seems.

Link to comment
Share on other sites

Hm, it sounds like maybe you forgot to gsap.registerPlugin(ScrollTrigger) or you did so when the window was undefined(?)

 

Did you check to see if there were any warnings in the console? And what version of ScrollTrigger/GSAP were you using? 

 

 

  • Like 1
Link to comment
Share on other sites

5 hours ago, Tonycre8 said:

And also, it seems as if in React, gsap animations don't work too well outside of the useEffect or triggers like an onClick. You can't just put it as a part of the function code it seems.

 

Everytime React renders/updates, it creates a new function, so you lose references to everything.

 

Example usage.

 

const [someFlag, setSomeFlag] = useState(false);
const anim = useRef(null);

useEffect(() => {
  
  anim.current = gsap.to(panels, {
    y: 300,
    duration: 2
  });
  
  return () => {
    anim.current.kill();
  }
}, []); // empty array to only run once

useEffect(() => {
  
  // toggle animation when someFlag changes
  if (someFlag) {
    anim.current.reverse();
  } else {
    anim.current.play();
  }

}, [someFlag]);

 

And what Jack said here. You need to register the plugin or you're going to have build problems for production.

 

1 hour ago, GreenSock said:

Hm, it sounds like maybe you forgot to gsap.registerPlugin(ScrollTrigger) or you did so when the window was undefined(?)

 

 

  • Like 2
Link to comment
Share on other sites

Ah okay. Yeah I've added registry for the plugins now in my useEffect statement, just to make sure that's all installed for later.
 

useEffect(() => {
    if (typeof window !== "undefined") {
      gsap.registerPlugin(ScrollTrigger); 
    }
  // ...


So if I was to just make a full page, would it be a good idea to store everything in the useEffect statement?
I'm not entirely sure on using flags, as I just want to animate a single page, there's no way I'd trigger them unless I added an intersection observer or something like that.
It seems like I'm overloading the useEffect, but at the same token I'm not sure what the point is adding flags and how I would trigger them.

Link to comment
Share on other sites

2 hours ago, Tonycre8 said:

I'm not entirely sure on using flags, as I just want to animate a single page, there's no way I'd trigger them unless I added an intersection observer or something like that.

 

Sorry for the confusion. I was just using that as an example of how you might do other animations that you need to control based on state. I didn't mean that you would need to do that for your use case.

 

 

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.
×