.reverse() Timeline in Function

[alexlederman]

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!

 

[Rodrigo]

Hi @alexlederman and welcome to the GreenSock forums!

 

First thank you for being a Club GreenSock member and supporting GSAP! 🥳

 

Honestly I have zero experience with Barba so I can't help you with that. Lucky for us @Ihatetomatoes created a full series of videos for working with BarbaJS and GSAP:

Take a look at it and hopefully you'll be able to find a way to implement it.

 

If you keep having issues, let us know and remember to create a minimal demo that clearly demonstrates the problem you are having.

 

Happy Tweening!

[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?

[Rodrigo]

Hi,

 

Well based on this:

function menuAnimation() {
  var tl = gsap.timeline();

  //Animations here

  return tl;
}

I can think of two approaches. One is to store the returned timeline in a variable or constant and after it's created toggle it:

function menuAnimation() {
  var tl = gsap.timeline();

  //Animations here

  return tl;
}

const myTween = menuAnimation();
// Then on a click handler
button.addEventListener("click", function() {
  myTween.reversed(!myTween.reversed());
});

Another is to create a variable for the timeline that lives outside the scope of the function:

let myTween = menuAnimation();

function menuAnimation() {
  myTween = gsap.timeline();

  //Animations here
  // No need to return the timeline
}


// Then on a click handler
button.addEventListener("click", function() {
  myTween.reversed(!myTween.reversed());
});

That should work as you expect. Let us know if you have more questions.

 

Happy Tweening.