Hi there,
New here (also new with gsap/react); I have made a side bar that slides out from the right side,
I got the slide in animation to work but can't use .reverse() to reverse that animation.
It immediately resets back to xPercent: 100 , instead of animating.
Anyone here able to give me any pointers on how I should proceed?
Small code snippet:
const [menuOpen, setMenuOpen] = useState<boolean>(false);
const [toggle, setToggle] = useState<boolean>(false);
const handleToggle = () => {
setToggle(!toggle);
setMenuOpen(prev => !prev);
};
const tl = gsap.timeline({ paused: true });
useEffect(() => {
tl.fromTo('.hamburger__overlay',
{
xPercent: 100,
duration: 1,
}, {
xPercent: 0,
duration: 1,
}
).reverse()
tl.reversed(!toggle);
});
(Dont mind the styling it's just a quick demo )
CodeSandbox link: https://codesandbox.io/s/sidebar-y45kf1