Jump to content
GreenSock

gabriel.ortiz

Can't trigger Timeline to run inside useEffect React

Recommended Posts

I've been trying to master using React and Greensock. But I'm having major issues with actually getting the animation to run. To be fair I'm new to React. To practice, I've been trying to recreate @Rodrigo's modal toggle example ( Rodrio's State Controlled Modal ) with React Hooks. 

 

I'm successful in passing all the props to the stateless component - but no matter what I try, changing the boolean value in the `props.visible` does not actually play the timeline. I'm not sure if my issue is React, or Greensock. I've logged a series of messages to the console, and I can see that all my functions are working correctly, I can also see that my `useEffect` is firing when `props.visible` changes.

 

https://codesandbox.io/s/quirky-bush-gjn3v?file=/src/modal-component.js

import React, { useRef, useEffect } from "react";
import { TimelineLite, CSSPlugin } from "gsap/all";

const ModalComponent = props => {
  const modalTween = new TimelineLite({ paused: true });
  let modalWrap = useRef(null);
  let modalDialog = useRef(null);

  console.log("props", props);

  //useEffect for creating the animation and assigning it to the refs
  useEffect(() => {
    modalTween
      .to(modalWrap, 0.01, { autoAlpha: 1 })
      .to(modalDialog, 0.25, { y: 50, autoAlpha: 1 }, 0)
      .reverse();
  }, []);

  //on props.visible change, we are playing the animation
  //this only fires when props.visivle changes
  useEffect(() => {
    console.log("inside useEffect", props.visible);

    modalTween.reversed(!props.visible);
  }, [props.visible]);

  return (
    <>
      <div
        className="modal"
        ref={div => (modalWrap = div)}
        onClick={props.handleClose}
      >
        <div className="modal-dialog" ref={div => (modalDialog = div)}>
          <div className="modal-content">
            <div className="modal-header">
              <h4>A Simple Modal Tween</h4>
            </div>
            <div className="modal-body">
              <p>
                Lorem ipsum, dolor sit amet consectetur adipisicing elit. Totam
                velit provident sunt iusto ratione dolore veritatis deserunt
                ullam vel doloribus.
              </p>
            </div>
            <div className="modal-footer">
              <button className="btn btn-secondary" onClick={props.handleClose}>
                Close
              </button>
            </div>
          </div>
        </div>
      </div>
    </>
  );
};

export default ModalComponent;

 

Does anyone had any advice on how I can get this thing working? It's driving me crazy! Is there a better approach to this all together? 

See the Pen modal-component.js by s (@s) on CodePen

Edited by gabriel.ortiz
added complete component
Link to comment
Share on other sites

Hi Gabriel,

 

Can you post a live editable sample of your code in codesandbox or stackblitz, in order to take a better look?

 

The one thing that pops out in your code is that you're not using useRef() to create the timeline, which means that the timeline is created again on every re-render. As a recommendation, when using hooks, create your GSAP instances with useRef().

 

Happy Tweening!!!

  • Like 2
Link to comment
Share on other sites

Hi @Rodrigo Thank you for responding! here's a link of Codesandbox.. i hope it's editable: https://codesandbox.io/live/LEpRg

 

I am using `useRef` to grab the element, but I might not be using it the right away. I've edited the code above to show the complete component. Sorry for the confusion.

Link to comment
Share on other sites

@Rodrigo You were 100% right! Yaahooooooo!!! I never would have figured that out. Storing the tween in `useRef` was the key.

 

I didn't realize that all variables would be overwritten when the component re-renders. I suppose that in the future if we need to save variables in between renders then we should store it in `state` or `useRef`

 

Thank you so much for your help. I believe this example with give me a solid structure for using React and GSAP. 

 

Thanks again!

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