Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
joe.cardella

Why does the position jump when initiating a new drag?

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

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

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.

  • Like 1

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.

×