Phl3bas

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.