Jump to content

Ron Itelman

DrawSVG - CodePen help

Go to solution Solved by Cassie,

Recommended Posts

Hello, I forked GreenSock's working DrawSVG example, and then swapped my SVG and my code and I can't get it to work. I'm sure it is something obvious and embarrassing ;) Any help is appreciated!




See the Pen xxqpxQO by ron-itelman (@ron-itelman) on CodePen

Link to comment
Share on other sites

  • Solution

Looks like you're trying to animate 'to' the same values as your SVG path already has. So you're not seeing anything.

If you change it to 'from' and draw SVG to '0%' you'll see them animating 'from' 0% to your initial values (which are the same as '0% 100%')


Also - GSAP uses querySelector under the hood so you can do this!

gsap.from('svg line', { duration: 1.5, delay: 0.3, drawSVG: "0%" });


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