Jump to content
Search Community

Using GSAP with React Hooks

Smithy test
Moderator Tag

Recommended Posts

So I'm curious if there is any good tutorials out there on how to use React Hooks with GSAP

 

What I'm looking to do is most likely use some useEffect hooks to have an animated transition in and then a transition out. 

 

If there are no existing resources on this for me to read up on then I'll look to post my code in here once I'm to that point. :)  

  • Like 1
Link to comment
Share on other sites

Hey Smithy. I'm not aware of any really solid articles on using hooks with GSAP. There are a lot of forum threads about using hooks + GSAP though. We'd really welcome a solid article on the subject! Depending on the quality we could even put it in the official GreenSock blog.

 

In general we've found it easier to use classes with GSAP :) 

  • Like 1
Link to comment
Share on other sites

Hi Smithy,

 

saw this post as a long time lurker and made an account just to respond to this.

 

in regards to tutorials as zach said, they're a little thin on the ground. Only one i've found of decent content is 'Wrong Akram' on youtube has a bunch of videos using gsap and react.

 

if it helps, below is a snippet of a custom hook i wrote to make VERY basic toggle animation using gsap and react but found going through it a good learning experience in how to best integrate the two libraries, it is by no means perfect code, but hopefully it should give you an idea how to write something better suited to your needs

 

 


// Custom Hook

export const useGsapToggle = options => {

  
  const [open, set] = React.useState(false);
  
  // create ref using useState and then we use pass our setRef function to the ref of object
  // we want to animate
  const [ref, setRef] = React.useState({});
  
  // memoise the inital timeline in a ref so it doesnt get recreated each render.
  const { current: tl } = React.useRef(gsap.timeline({ paused: true }));

  // maybe useLayoutEffect maybe better here?
  React.useEffect(() => {
    
    tl.to(ref, options);
    
  }, [ref, options, tl]);

  const animate = React.useCallback(() => {
    
    open ? tl.reverse() : tl.play();
    
    set(!open);
    
  }, [open, tl]);

  return [setRef, animate];
};


// use case 

// I use useRef or useMemo to memoise the options object so they dont get recreated each render

const { current: props } = React.useRef({
    width: 200,
    height: 200,
    ease: "elastic.inOut(1, 1)"
  });

const [ref, animate] = useGsapToggle(props);

return (
   <div className="container">
      <div ref={ref} onClick={animate} className="toggle" />
   </div>
)

 

a live example below:

 

https://codesandbox.io/s/gsap-react-custom-hook-8xjg5?fontsize=14&hidenavigation=1&theme=dark

 

if anyone who's a bit more adept at react with gsap want to comment on how to make this snippet better please let me know, this is just an example ive found that works.

 

  • Like 6
Link to comment
Share on other sites

  • 7 months later...

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