Reverse TimelineLite

[sutterlity 0 Likes (Newbie)]

Hello,
I have a little problem understanding the function of reverse TimelineLite.

If someone has 5 minutes to help me understand, would be nice.

$('#plop').on('click', function() {
  $(this).toggleClass('is-open');
  // Animation
  var animNav = new TimelineLite({
    paused: true
  });
  animNav.to('#nav', 0.2, {
      x: 100,
      opacity: 1,
      ease: Sine.easeInOut
    })
    .staggerTo('.nav-link', 0.1, {
      opacity: 1,
      ease: Sine.easeInOut
    }, '0.1', '-=0.15');
  if ($(this).hasClass('is-open')) {
    animNav.play();
  } else {
    animNav.reverse();
  }
  return false;
});

 

See the Pen OVaGjB by sutterlity (@sutterlity) on CodePen

[Shaun Gorneau 1,503 Likes (Superhero)]

The problem lies in creating a new timeline on every click ... essentially, it is issuing the reverse() method on a timeline that hasn't yet played. Create the timeline outside of your click event and then control it with the click event.

 

See the Pen gpQyzB by sgorneau (@sgorneau) on CodePen

[Carl 9,066 Likes (Superhero)]

Great job, Shaun!

Thanks for helping out.

[sutterlity 0 Likes (Newbie)]

Thanks Shaun, your my hero