Devotee007's post in Animation runs every time I click buttons that starts animations was marked as the answer
I got it to work now! Thanks @Cassie and @Rodrigo for the input and help!
Working code:
const mobileMenu = useRef<HTMLDivElement>(null);
const menuTl = useRef<GSAPTimeline>(gsap.timeline());
const toggleMobileMenu = () => {
if (menuTl.current !== null) {
menuTl.current.reversed(!menuTl.current.reversed());
setTopMenuVisible(!activeMobileTopMenu);
setActiveSubLevel(-1);
setActiveSubSubLevel(-1);
}
};
useLayoutEffect(() => {
const ctx = gsap.context(self => {
menuTl.current = gsap.timeline({ paused: true });
menuTl.current.to(
".js-mobile-overlay",
{
// yPercent: 170,
y: "85vh",
ease: "expo.inOut",
duration: 1.1
},
0
);
menuTl.current.to(
".js-mobile-menu",
{
y: 0,
ease: "expo.inOut",
duration: 0.9
},
0.1
);
menuTl.current.to(
".js-pie-top",
{
strokeDasharray: "0,100",
autoRound: false,
ease: "expo.in",
duration: 0.5
},
0.1
);
menuTl.current.to(
".js-pie-bottom",
{
strokeDasharray: "0,100",
strokeDashoffset: "-25",
autoRound: false,
ease: "expo.in",
duration: 0.5
},
0.1
);
menuTl.current.to(
".menu-toggle-titles",
{
y: -14,
ease: "power4.inOut",
duration: 0.4
},
0.5
);
menuTl.current
.to(
".js-pie-middle",
{
rotation: 90,
y: 8,
x: -4,
transformOrigin: "center",
ease: "back.out(1.4)",
duration: 0.5
},
0.6
)
.reverse();
}, mobileMenu);
return () => ctx.revert();
}, []);
