solved SMIL staggering animation to GSAP

[plinplon 1 Likes (Newbie)]

hello!

i'm new to GSAP, and honestly i have limited JS knowledge. i coded an SVG animation that works perfectly on most browsers, but we need it to work on MS Edge as well, so i'm trying to achieve it using GSAP: i manage to get the first iteration right, but then it goes out of sync.

 

SMIL:

See the Pen XWJNgLB by urx (@urx) on CodePen

 

GSAP:

See the Pen QWwGMbq by urx (@urx) on CodePen

 

help?

See the Pen by urx (@urx) on CodePen

[elegantseagulls 1,443 Likes (Superhero)]

Hi @plinplon,

 

Just took a quick glance, but with your current setup, I think you might need a repeatDelay on your grow2 timeline.

 

That said, if it were me, I'd make this one timeline instead of two. This would make it easier to control, and you'd likely have less of a chance of the tweens competing.

[ZachSaucier 7,151 Likes (Superhero)]

Hey plinplon and welcome to the GreenSock forums! GSAP is a much better choice than SMIL in terms of support, (arguably) ease, and power.

 

I would actually make use of sub-timelines for an animation like this, one timeline for each "pin". That way you don't have conflict between different tweens (similar to what elegantseagulls said - you could do the same thing using one single timeline if you want to, but I think it's cleaner with nested timelines). 

 

I added some comments to my JS so hopefully it helps you understand what I'm doing.

See the Pen XWJNeWW?editors=0010 by GreenSock (@GreenSock) on CodePen

 

I also highly recommend reading this article on the position parameter

and this article about writing smarter animation code: https://css-tricks.com/writing-smarter-animation-code/

[GreenSock 18,564 Likes (Superhero)]

Here's my crack at it, using a master timeline and a function that spits back an animation for each pin: 

See the Pen 1e02e090fb64d9baa574a0e7500783b1?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Once you learn the syntax, @plinplon, I think you're gonna LOVE how much more flexibility GSAP gives you (and compatibility of course). It's a different mindset, but your animations will be far easier to experiment with in terms of timing and they'll require less code. 

 

Happy tweening!

[plinplon 1 Likes (Newbie)]

thank you all so much!

 

i did attempt to make it a single timeline, but i couldn't figure it out (again, this is because i'm a newbie — it's even my first SMIL animation, and i enjoyed it!).

with this, i'll be able to understand and explore more. thanks again!