GSAP reverse with React
I have the following code and am trying to create a menu icon that closes and open. I am having issues getting the animation to run in reverse using React.
Here is my code snapshot,
const [reverse, setReverse] = useState(true);
function moveBurger() {
const tl = new gsap.timeline({ paused: true, reversed: reverse });
tl.to('.burger_rect1', 0.2, {
rotation: 45,
transformOrigin: '50% 50%',
})
Basically in a functional component anything defined outside the return statement is created again on each re-render, therefore a reference or instance is not created and kept. In some cases if a component doesn't have a state and no props are passed to them you can keep the GSAP instances outside the state since that component will be rendered once in it's lifecycle. But if the component's state or props are updated, it will be re-rendered and you can get an error. Check the following example u
