DrawSVG - CodePen help

[Ron Itelman]

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!

 

Thanks!

Ron

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

[Cassie]

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%" });