draggable Why does the position jump when initiating a new drag?

[joe.cardella]

To get the code to work there is a white SVG named centerwill need to be clicked on. This will be replaced with a play icon, and be swapped out with a pause icon to pause once the dragging works properly.

To activate the SVG animation, click the white center SVG. To pause the video, click the native pause button in the html video (sorry still under dev).

 

I have an SVG circle that is a progress bar for the progress of a video's duration named progressCircle. There is another SVG circle that is named vidControllerand it is draggable. vidController is used to update the currentTime of the video.

 

Video of what I'm talking about: https://tog-video-shopify.s3.amazonaws.com/svg-anim.mov

 

I have a Timeline named tl_1  and this is responsible for updating the position of the vidController and the progress of progressCircle.

 

When I pause the video (in the video's native pause button), the progressCircle and vidController stop at the correct position. When I start another drag on the vidController, I expect it to smoothly drag from where it was stopped. However, it is jumping several degrees forward. If I drag it back, it jumps forward erroneously as well.

 

How can I get the animation to not jump and smoothly start where it left off? 

See the Pen LYYepar by jcardella (@jcardella) on CodePen.

[ZachSaucier]

Hey Joe. Thanks for being a Shockingly Green member! 

 

I think the main issue is that the easing on your timeline tweens are not linear (but the playback of your video is). Changing that seems to fix the issue.

 

See the Pen poopgRw?editors=1000 by GreenSock (@GreenSock) on CodePen.

 

Cool effect though!

 

Side note: I recommend using a position of 0 instead of "-=1" for the second tween just incase the duration of the first tween changes.

[joe.cardella]

Zach - THANK YOU SO MUCH! THAT WORKED! I appreciate the added recommendation of position 0 on the second timeline. Have a great day and take good care.