Set draggable start position after page load

[ryanf]

Hello, 

 

I have a range slider made of an SVG that uses Draggable and TimelineMax.  

 

 

I want the handle of the slider to move in the center position when the page first loads, so I made a tween that advances the timeline to progress=0.5.  

 

However, when I click on the handle the position jumps to the start position (x:0).  It only happens once after the page first loads.

 

How can I make the position of the range slider to the center mark without the marker jumping to 0 when you click on it?  

 

Thanks.  

 

 

 

See the Pen YqozPL by rfenik (@rfenik) on CodePen

[GreenSock]

It looks like the problem is that you're targeting an entirely different (invisible) element with your Draggable, but using ".handle" as the trigger. That's fine, but then you set up your code so that you're animating just ".handle" initially, thus its "x" might be 165 but the actual target of the Draggable is still at 0. Your code is using "this.x" to calculate things, and "this.x" refers to your invisible div. Perhaps you were under the impression that the trigger's x would always be identical to the target's x, but that's not the case. 

 

I'm curious why you didn't choose to just target ".handle" with your Draggable. It's fine if you don't - I just wasn't sure why. 

 

There are quite a few ways to solve this. One would be like this: 

http://codepen.io/anon/pen/JXQooe?editors=0010

 

Does that work the way you want?