Jump to content


Issue with Timeline only plays once on click - won't repeat

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 3 doors that swing open to reveal content, then they all close.


After that you can click a "door" to reveal what's underneath.

It works fine except that after one click, it doesn't work again.


I have one function to open all the doors then onComplete of that function I reverse the timeline;


I also have a onReverseComplete function called "loadClickHandlers" that loads all the items individually so they can be clicked.

A door is clicked to open it, then the content revealed is clicked to close the door again.


There is one timeline for all three doors at first, to open and close them. then each door has its own timeline so it can be controlled via click


Thanks for any suggestions.

See the Pen KwNpRE by mangonyc (@mangonyc) on CodePen

Link to comment
Share on other sites

Hi and welcome to the GreenSock forums.


First thanks for providing the codepen, it was very useful and helped to identify the issue right away 8-)


The issue here is that in every click event you're adding a new instance to the timeline. The first time you click on a door the timeline is empty and you add a new instance to it. Then you close the door. Finally you click on the door again and you add a new instance at the end of the timeline. The problem is that the timeline is paused after is reversed, so you add a new instance but don't play the timeline, so nothing happens.


Also in this cases, when re-usable code is the best choice (basically is the same animation going forward and backwards) is better to create the timeline/tween and play/reverse it based on specifics event handlers. In this case I would create each timeline and pause them, then depending on the click event you can play and reverse the timeline again and change the timeScale as you wish:

function loadClickHandlers(){
  var tl = new TimelineMax({paused:true}),
      tl2 = new TimelineMax({paused:true}),
      tl3 = new TimelineMax({paused:true});
  tl.to($item1cvr, 3.00, {rotationY:-170,  transformOrigin:"left", ease:Power1.easeOut});
  tl2.to($item2cvr, 2.00, {rotationX:110, transformOrigin:"50% top", ease:Power1.easeOut});
  tl3.to($item3cvr, 2.30, {rotationY:140, transformOrigin:"right", ease:Power1.easeOut});
  $item1.click(function() {



Also keep in mind that GSAP methods return the instance they're applied to, so you can chain them. Like is done with timeScale() and play().


EDIT: I forgot to mention that is not necessary to indicate a repeat number if that number is zero, just remove it from the config object and you're done ;)


I forked your codepen:


See the Pen RNoEGm by rhernando (@rhernando) on CodePen



  • Like 4
Link to comment
Share on other sites

Wow. Thanks Rodrigo, that is perfect.


You explained it very well, I knew there was a more logical way to achieve what I was looking for.


Thanks for remindning me about chaining methods, I had known that previously but sometimes when I'm troubleshooting I tend to write it out so I can see the flow better.


Thanks again for the solution and quick turnaround.



  • Like 1
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.