Animate frames with Draggable

[scavaliere 7 Likes (Newbie)]

Hello, 
I'm trying to animate an image with the help of Draggable. 
I have adapted this example 

See the Pen mdVEpKK by GreenSock (@GreenSock) on CodePen

 with my dragger, I don't understand why it's not working. 

Anyone can help me to understand?

Thank you!

See the Pen 3b7a798b2108f45ccfbc5bb4cac4aacf by scavaliere (@scavaliere) on CodePen

[mvaneijgen 2,516 Likes (Superhero)]

You've disabled the forking of your pens. Makes it really hard to copy your work and apply fixes for it, I had to manually copy over all the code to a new pen. Just FYI.

 

You have the variable control, but as far as I see you never update its value, it is always zero.

 

Personally when in doubt I use a timeline, so I've converted your tween to a timeline. This gets you more options and is overall more flexible. 

 

My thought process was, I want to map the x axis movement to a value between 0 and 1 (because a timeline has a progress from 0 to 1), so I've used the amazing GSAP util function    gsap.utils.mapRange() (I love these util functions! https://greensock.com/docs/v3/GSAP/UtilityMethods/mapRange()) for that and just feed the current x location to that function, then I update the .progress() of the timeline with that. 

 

See the Pen rNKmVoB by mvaneijgen (@mvaneijgen) on CodePen

 

Hope it helps and happy tweening! 

[scavaliere 7 Likes (Newbie)]

Hello @mvaneijgen!
Thank you for your solution, it works like a charme. I wasn't aware of that utility, I will take a deeper look
Sorry for the Codepen, it was on private mode, I will make it public