Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
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?

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
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.

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
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.

Share this post


Link to post
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.

 

 

Share this post


Link to post
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.

×