Animating mildly complex logo with staggerFromTo

[dblaise]

Hi there, I have a relatively complex path in my SVG and I'm trying to use DrawSVG to have it look like the text is being scripted. It's usually filled in black. When I try using a basic staggerFromTo it renders a number of dots first then renders the whole asset. I'm not sure what I'm doing wrong here. I've managed to get the plug-in to work on less complex SVGs.

 

Thanks in advance!

See the Pen jOqWqgO by davedbase (@davedbase) on CodePen

[PointC]

You just need to target the paths instead of the whole SVG. 

gsap.from(".st1 path", {duration: 1, drawSVG:0, stagger:0.1})

You're also using a really old version of GSAP. I forked your pen and updated to GSAP 3. 

 

See the Pen 9a99758841ea8df024618f6ae75b1a4f by PointC (@PointC) on CodePen

 

Happy tweening.

 

[Shaun Gorneau]

A few problems here ... but I don't think the dots are an issue with DrawSVG or GSAP. I think it's just an issue with  some of the SVG rendering out before the Javascript takes over. It's an SVG with a lot of data points.

 

The second issue is you're trying to use DrawSVG on the SVG element itself, but DrawSVG work on paths, line, polyline, polygon, rect, and ellipse.

 

See the Pen qBZbNEp by sgorneau (@sgorneau) on CodePen

 

Shaun

 

EDIT: Whoops ... didn't see you in there Craig!

[PointC]

4 minutes ago, Shaun Gorneau said:

EDIT: Whoops ... didn't see you in there Craig!

Haha. You never know when I'll appear.