Jump to content


Issue when with onReverseCommplete

Go to solution Solved by Carl,

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 was prototyping a website where that with a look similar to a paper advertise that has these tearable stripes with some contact info: (eg: http://www.printwand.com/blog/media/2012/01/tear-off-sheets-300x296.jpg). I was working on the effect of tearing these stripes, using GSAP and the Draggable plugin.


The approach I´m following is to:

  • Have two elements: stripe and stripe-mask
    • The stripe-mask object will be an invisible overlay container, absolute positioned over the stripe object. This will be target of the Draggable object (so you drag and drop the stripe-mask object)
    • stripe will be visible and animated based on the properties of the stripe-mask object (drag progress over an axis)
  • When you drag and move the stripe-mask object, the onDrag callback updates the animation that moves the stripe object, by setting its progress (calculated based on 'the lenght' of the drag movement done so)
  • When you release the stripe-mask object, the onDragEnd callback disables the Dragable object, reset the position of the stripe-mask by using TweenLite.set() and then reverses the animation of the stripe object by calling TimelineLite.reverse()
  • The onReverseComplete callback then is called, and it just enables back the Draggable object so the user can drag it again


The problem I'm facing, is that the onReverseComplete callback is being called when it shouldn't after you drag and drop for the the first time. I can´t see why is this happening. My thoughts go with the Timeline object having some sort of flag that tells the engine the object has been reversed, and is not updated by calling progress().


Here is a pen that illustrates the issue. Look at the logs of 'enableStripe' being printed many times when you drag and drop a second time.


Thanks for your help, and keep up the good work!


See the Pen jrbdpW?editors=0011 by peto85 (@peto85) on CodePen

Link to comment
Share on other sites

  • Solution

Hi and welcome to the GreenSock forums,


Thanks so much for the demo. Really appreciate how you simplified it and made it so clear to follow.


It appears that once you reverse the timeline it stays in that reversed state (which is correct). When you drag the progress() forward, you aren't technically play()-ing the timeline, nor are you changing the reversed() state. So basically every time you set the progress() > 0 with your dragging, the timeline says, "oh, I'm reversed, I should be going the other way". Basically there is a conflict.


The solution that seems to work is to just pause() the timeline once it is done reversing.

enableStripe: function() {
    console.log(' (' + this.eventCounter++ + ') >> enableStripe')
    //fixed by pausing the timeline



Does that work for you?

  • Like 3
Link to comment
Share on other sites

Hi Carl,


Thanks for your kind words and your solution, it works well. I imagined it had something to do with the timeline thinking it was in 'reversed' state while dragging it's progress, but didn't think of trying to pause it, it now makes a lot of sense.


By the way, I had used GSAP in the past (like 4 years ago) mainly for Flash/Actionscript 2 y 3 and I´m very glad to see how well the framework has been extended and maintained. Congrats on that!

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