Jump to content


Syncing motion path animation with draw SVG issue.

Go to solution Solved by OSUblake,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts



I'm having a hard time syncing animation with my svg stroke path and a div object that's using the same path data to animate on.


It appears the motionPath xy values are tweening much faster than what values are interpolating with drawSVG. I added a codepen to show what's going on. Any ideas? Thanks



*NOTE: Don't mind the first second, the animation doesn't work if I set the tween time to 0 for the box so I set the time to 0.1; 



See the Pen jqapdJ by ecsancho (@ecsancho) on CodePen

  • Like 1
Link to comment
Share on other sites

  • Solution

Is this a racing game? If so, you might want to check out the latest racing thread.



There's a big difference between null and a linear ease...

See the Pen 3424d864a1a954fc7bcade3597d1bc0f by osublake (@osublake) on CodePen


See... Much better!

See the Pen NNwLNm?editors=0010 by osublake (@osublake) on CodePen

  • Like 4
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.