[Drag div to set time, then animate back to start via timer]

That did it! Thanks a lot! Everything works great now, except for audio. It won't play on iOS. Is this because I'm dragging and not clicking?

[Drag div to set time, then animate back to start via timer]

This is really helpful, thank you.

 

I applied the map function you recommended, but in my case I'm dragging to the left, so I set the maxX to -565, which seems to throw off the maxDuration time. When I set maxDuration to 10 I get less than 1 second of animation; setting it to 100 gets me about 2 seconds. I could hack it, but would prefer not to...do you see what I'm doing wrong?

 

Here's my Codepen again: 

See the Pen dRbKMM?editors=0010 by iamryandnelson (@iamryandnelson) on CodePen

 

[Drag div to set time, then animate back to start via timer]

3 hours ago, Carl said:

Hi and welcome to the GreenSock forums,

 

Thanks for providing the demo. To get the element to animate back to it's start value try this for your onDragEnd callback:

 

onDragEnd: function() {
      TweenLite.to(this.target, 1, {x:0}) //or whatever value the start value is
    }

 

Thank for the quick reply Carl . This solution gets the animation working (I was writing TweenMax not TweenLite ), but it doesn't sync with the timescale. If I update the time in your solution from 1 to 10, no matter how far I drag the image it will take 10 seconds to finish animating (setting it to 10 actually gets me 14 seconds). How can I set it up so that the whole draggable area is set to 25 minutes and dragging to a corresponding time on the timescale will produce an accurate timer for that time (e.g. dragging to the 5 minute mark will result in a 5 minute animation)?

[Drag div to set time, then animate back to start via timer]

I'm building a Pomodoro Timer and want to create a draggable div (assigned with a background-image of a 25 minute timescale) to set a timer and on release the div/image will animate back to the starting position. Can I do this with GSAP? Here's my Codepen: 

 

See the Pen dRbKMM by iamryandnelson (@iamryandnelson) on CodePen