iamryandnelson

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?

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:

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)?

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: https://codepen.io/iamryandnelson/pen/dRbKMM