HackGibson

First I should say the only reason timeline is in the 2nd argument array for useEffect is because codesandbox's linter suggests it, but it's not required. I've actually changed it to an empty array like the React docs suggest. If there is no array for that 2nd argument, the useEffect method runs on every re-render. If there is an empty array, it runs on the first render only, the same behavior as componentDidMount. If there is a prop in that array, it will only run on a re-render if the prop's value changed, which is the same behavior as componentDidUpdate. And lastly, if you return a function it acts as componentWillUnMount. Check the console.log lines below. // componentDidMount React.useEffect(() => { console.log("useEffect 1: this executes only once.") TweenLite.set([top.current, bot.current], { transformOrigin: "50% 50%" }) setTimeline( timeline .to(top.current, 0.1, { y: 6 }, 0) .to(bot.current, 0.1, { y: -6 }, 0) .to(top.current, 0.1, { rotation: 45 }, 0.2) .to(bot.current, 0.1, { rotation: -45 }, 0.2) .reverse() ) return () => { // componentWillUnmount } }, []) // componentDidUpdate React.useEffect(() => { console.log( "useEffect 2: this executes on every click because isMenuOpen changes on every click" ) timeline.reversed(!isMenuOpen) }, [isMenuOpen]) Thanks for your help! ❤️

Guys I really appreciate the replies. Prior to discovering GSAP I was learning to animate with React-Spring which is a lot different than GSAP. The project I'm working on requires me to use React Hooks. In this specific case the animation needs to be controlled via a prop passed to it. I was able to get it working as shown below. @OSUblake is this efficient? https://codesandbox.io/embed/runtime-waterfall-efhpl?fontsize=14

Is there an example using react hooks?

https://codesandbox.io/s/sad-maxwell-2b7vv?fontsize=14 Edit: For clarification, this needs to use React hooks. I have it transforming from = to x and vice versa, however, I had to hard code the reverse animation because I couldn't seem to get it to work by using the reverse or reveresed methods like shown below. if (isMenuOpen) timeline.play() else (timeline.reversed(true).play()