drawSVG complex SVG with multiple paths

[Web Bae]

Hi All!

 

I have a complex SVG with multiple paths I'm trying to animate. I was able to follow the tutorial on motiontricks but have issues where the path crosses itself. Of course motiontricks has a more advanced tutorial for that too, but I'm getting stuck (and overwhelmed) thinking about the final desired result, which involves an even more complex SVG than the one in the codepen - I'll attach a screenshot.

 

Anyways, just wondering if you all had any advice on how I should best proceed. Maybe this would be easier in After Effects (not a lot of experience here) and export to Lottie?

 

Thanks!

Keegan

 

See the Pen ZEMqaox by webisbae (@webisbae) on CodePen

[GreenSock]

I don't have much time to dig into this right now but...

• Maybe you could split it apart into TWO drawSVG animations - one that's just for the thin line (so that the mask can be equally thin and not accidentally expose intersecting lines) and one that's for the chunkier shapes. Think of it like they're on separate layers, masked individually.
• -OR- maybe you'd have to chop the artwork apart into a few sections based on where the intersections occur (so that each individual section can have its own mask that doesn't affect other sections), and then just sequence them in a timeline. 

I defer to @PointC's geniusness on this type of stuff. 

 

I can't imagine it'll be a lot easier in After Effects, honestly, and I'm pretty sure Lottie is gonna be bigger and less performant. Just a guess though.

[Web Bae]

Thanks Jack - I'm going to ask my client to revisit the designs to see if we can simplify the final result a bit, which I'll probably end up chopping up like you mentioned. Just curious what everyone's ideas are, I think I've only used drawSVG once before on a project.

[Cassie]

Yeah, two is the way I reckon. A thick one covering the shapes and a thin one doing the line.

Like this? Might need to go back into an editor and do a little tweaking of the 'mask' shape, it's a little off at the beginning.

See the Pen YzOJerL by GreenSock (@GreenSock) on CodePen

[Cassie]

In my opinion - steer clear of Lottie as much as possible tbh, especially for nice simple things like this.

Lottie doesn't 'tween' properties, it stores all the information about each frame in a JSON file and then bangs an entirely new SVG 'frame' into the DOM, 60 times per second (or however many frames you render out) 

It's ok for some things, but it can be very performance intensive, and if you hook lottie's up to scroll, unless they have a lot of frames you can see it flick from frame to frame. Not ideal. The canvas renderer is better if anyone does go that route, but more limited in terms of animation.

*edited for context

[Cassie]

Congrats on getting into the codepen newsletter too mate! Nice one 🥳

[PointC]

I'm kinda late to the party, but - yep I'd go with @Cassie's approach of a thin and thick "mask" element. Otherwise you'd need to break it into pieces like my calligraphy tutorial you mentioned in the original post.

 

See the Pen c80d6e828e061b0615a441228616fcbb by PointC (@PointC) on CodePen

 

Happy tweening.

[Cassie]

Fashionably late 💅🏻

[PointC]

[Web Bae]

Thanks everyone! I appreciate the help big time.