Jump to content


Animate frames with Draggable

Moderator Tag
Go to solution Solved by mvaneijgen,

Recommended Posts

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

Link to comment
Share on other sites

  • Solution

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! 

  • Like 3
Link to comment
Share on other sites

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

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.