Jump to content
GreenSock

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

Toggle Animation

Recommended Posts

Hello!

 

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.

RC

 

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() {
  animateOpenNav();
  var navBtn = document.getElementById("nav");
  navBtn.onclick = function (e) {
    // Toggle reversed to it's opposite value
    tl.reversed(!tl.reversed());
    // Use the toggle method in the classList API
    navBtn.classList.toggle("active");
  };
}

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
openNav();

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.

×