Jump to content
Search Community

drawSVG : unwanted offset

Johan ⚡️ Nerdmanship test
Moderator Tag

Go to solution Solved by Dipscom,

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

Hey community!


Can't figure this one out. I need your help!  <3


I want to tween a path from "0% 0%" to "0% 100%" with the drawSVG plugin, but it behaves like the 0-position is offset from the actual beginning of the path. When I flip it around to "100% 100%" to "0% 100%" it works fine.


Clueless 0.o

// It seems like 0% is offset from the beginning of the path
TweenMax.fromTo("#backPathP", 0.5, {drawSVG: "0% 0%"}, {drawSVG: "0% 100%", repeat: -1, yoyo: true })

// If I flip it over it behaves like I want to
// TweenMax.fromTo("#backPathP", 0.5, {drawSVG: "100% 100%"}, {drawSVG: "0% 100%", repeat: -1, yoyo: true })

See the Pen bb5fcc465dc92f128727ac0a5e27352c by nerdmanship (@nerdmanship) on CodePen

Link to comment
Share on other sites

  • Solution

Hey ,


That's a chunky chunk of code, could you simplify that a tad next time? I couldn't even find the element you are tweening without doing a search for the element.


From what I can see, that seem to be coming from the thickness of your stroke, reduce the stroke thickness and you will see the so-called offset disappear. 

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