Jump to content
Search Community

hector.suarez

Members
  • Posts

    2
  • Joined

  • Last visited

hector.suarez's Achievements

1

Reputation

  1. 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!
  2. Hi, 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-maskThe 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! H
×
×
  • Create New...