Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

Toggle Animation

Recommended Posts



I'm trying to get the gsap animation to reverse on toggle.

When I click Menu Button, the menu slides down and the nav items stagger out. 

How do I have the animation reverse when i click on the Menu Button again?


Any help would be much appreciated.



See the Pen qBNGOLm by tkruca (@tkruca) on CodePen

Link to post
Share on other sites

Hi and welcome to the GreenSock forums.


The easiest way to toggle a GSAP instance is to toggle it's reversed state. Normally what I do is create the Tween or Timeline paused, then after adding all the config or child instances I reverse it. Since the instance is at 0 seconds there is no change. Then you toggle the reversed() state. This code seems to work in your sample:

// Timeline created and paused
var tl = gsap.timeline({ paused: true });

function openNav() {
  var navBtn = document.getElementById("nav");
  navBtn.onclick = function (e) {
    // Toggle reversed to it's opposite value
    // Use the toggle method in the classList API

function animateOpenNav() {
  var mobileNav = document.getElementById("mb_nav");
  tl.to(mobileNav, {
    duration: 1.5,
    ease: "power3.out",
    y: 0
  }).to(".nav__link", {
    opacity: 1,
    y: 0,
    duration: 3,
    stagger: {
      // wrap advanced options in an object
      each: 0.2,
      ease: "power1.in"
  .reverse(); // Finally reverse the timeline. reversed() is true

// init

Happy Tweening!!!

  • Like 3
  • Haha 1
Link to post
Share on other sites

Many thanks Rodrigo! 😀

Thanks for the info ZachSaucier will read up!

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.