Jump to content
Search Community

Why does the position jump when initiating a new drag?

joe.cardella test
Moderator Tag

Recommended Posts

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

Link to comment
Share on other sites

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.

  • Like 3
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.
  • Create New...