Smithy Posted June 29, 2020 Share Posted June 29, 2020 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. 1 Link to comment Share on other sites More sharing options...
ZachSaucier Posted June 29, 2020 Share Posted June 29, 2020 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 1 Link to comment Share on other sites More sharing options...
Phl3bas Posted June 30, 2020 Share Posted June 30, 2020 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. 6 Link to comment Share on other sites More sharing options...
Mehmet Arda Çelik Posted February 26, 2021 Share Posted February 26, 2021 There is no article or video set about this without Akram. If I understand little bit I'll write. I cant push no way. Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now