alexlederman

Thank you for sharing @Rodrigo! While this is super helpful, I think the main question can actually be said without mentioning Barba, that was just some additional context. Do you have any idea how to reverse a timeline that's called through a function?

Hey everyone, sorry if this question has an obvious answer as I'm playing around with GSAP for the first time. At the moment I have my code set up for a menu animation like this: const menuBtn = document.querySelector("#menu-btn"); var tl = gsap.timeline({ paused: true }); tl.set("#menu", { autoAlpha: 1, }); tl.from( "#menu", { height: 0, duration: 0.5, ease: "in", }, "<" ); tl.set( "#menu-btn", { text: "Close", }, "<" ); tl.from("#menu", { duration: 1, ease: "in", }); tl.from( "#menu-index, #menu-right", { opacity: 0, y: -50, duration: 0.75, // stagger: 0.25, }, "<-0.5" ); tl.reverse(); menuBtn.addEventListener("click", () => { tl.reversed(!tl.reversed()); }); What I'm trying to do is figure out a way to convert this to a function that can be called to play or reverse the animation (for transitioning between pages using Barba.js) as well as work with .addEventListener for toggling manually. I know the basic format for doing this is something as follows, but I can't seem to get it to reverse playback: function menuAnimation() { var tl = gsap.timeline(); //Animations here return tl; } Thanks in advance for your help!