Jump to content
Search Community

Double click needed to play timeline

chrisk2020 test
Moderator Tag

Go to solution Solved by PointC,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

I have a simple dropdown running on a timeline play/ reverse on click. On initial page load it takes two clicks to fully trigger the timeline to play/ reverse.

 

Can anyone help me decipher why that is the case?

var menuTL = new TimelineMax({paused:true});
menuTL
  .to($('header.banner'), 0, {display:'block', height: 0})
  .to($('#nav-primary'), 0, {autoAlpha: 0})
  .to($('header.banner'), 0.5, {height:'100%', className: '+=nav-show'})
  .to($('#nav-primary'), 1, {autoAlpha: 1});

$('.menu-toggle').on('click', function(e) {
  e.preventDefault();
  menuTL.reversed() ? menuTL.play() : menuTL.reverse();
});

See the Pen RavByR by chrisk2020 (@chrisk2020) on CodePen

Link to comment
Share on other sites

  • Solution

Hi chrisk2020  :)

 

The reason that happens is that the timeline isn't initially reversed so it won't play on the first click. On the first click the timeline actually reverses even though you don't see anything happen. Now that it's reversed, everything will work as you expected from click two onward. Don't worry though, it's an easy fix. Simply add reversed:true to your timeline and that will solve the problem for you:

var menuTL = new TimelineMax({paused:true, reversed:true});

Happy tweening.

:)

  • Like 6
Link to comment
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.
×
×
  • Create New...