Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
ericnguyen23

Creating GSAP Timeline with React Project

Recommended Posts

Question (for those familiar w/ React and GSAP) regarding setting Timeline with functional components.

 

I'm aware that to access DOM, I would have to reference and set animation like so, which works just fine:

// creating state objects
const [animation, setAnimation] = useState();

// Set variable using useRef for functional component
let headingRef = useRef(null);

// add reference to the DOM element
<h1 ref={element => {headingRef = element;}}>Hello</h1>  

/ // animate using useEffect hook and setAnimation 
useEffect(() => {
    setAnimation(
      TweenMax.to(headingRef, 1, {
        css: {
          height: 120,
        },
      })
    );
}, []);

 

Now, what if I wanted to create a timeline. Do I just set it like so:

let tl = new TimelineMax();

Or do I need to store it in a state object?

Link to comment
Share on other sites

Hi,

 

As mentioned before I haven't had time to dig deeply into the Hooks API and all I can offer right now is a simple example but no real explanation on how it actually works, sorry about that.

 

Here is a live sample using a Timeline instance with React hooks:

 

https://stackblitz.com/edit/gsap-react-hooks-timeline-instance-toggle

 

As you can see it uses a useEffect at first run in order to create the timeline and then you can add all the child instances you want to the timeline.

 

Unfortunately this doesn't works:

 

let tweenTarget = null;
const tl = new TimelineLite({paused: true});

useEffect(() => {
  tl
    .to(tweenTarget, 0.5, {x: 100})
    .to(tweenTarget, 0.5, {y: 100})
    .to(tweenTarget, 1, {rotation: 360})
    .reverse();
}, []);

useEffect(() => {
  tl.reversed(!toggle);
}, [toggle]);

Even though in the useEffect callback triggered by the toggle update, tl is defined and it's reversed state is updated, nothing happens. This is the part I can't give you a proper explanation about.

 

For the foreseeable future just work with the timeline in the initial useState and then in the useEffect add the instances, like in the live sample. As soon as I have an official explanation about this, I'll post it here and in the other threads dealing with hooks.

 

Happy Tweening!!!

  • Like 4
Link to comment
Share on other sites

Thanks @Rodrigo This helps. 

 

I'll set my timeline up like this now:

const [tl] = useState(new TimelineMax());

 

  • Like 1
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.
×