Animate SVG groups

[codedbyjordan]

I'm fairy new to GSAP and I'm trying to use DrawSVGPlugin to animate an SVG but I can't seem to figure out how to animate groups. I want the middle line to start animating then when the height of the middle line reaches the starting point of the other lines, I want the other two lines to start animating. How do I achieve this?

See the Pen yLqYqye by codedbyjordan (@codedbyjordan) on CodePen

[Cassie]

Hiya!

 

There's a couple of ways here - firstly, it's good to have your SVG order in the DOM reflect the visual order, I shuffled the lines around to they're the same 🙂

Here's a little demo with a tween using stagger (commented out) and a timeline which will give you more control over durations and sequenced positioning.

See the Pen 258e3e340951a8b8875247508eb8ca80?editors=1010 by cassie-codes (@cassie-codes) on CodePen