Jump to content


SMIL staggering animation to GSAP

Moderator Tag

Recommended Posts


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.



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



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



See the Pen by urx (@urx) on CodePen

Link to comment
Share on other sites

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.

  • Like 3
  • Thanks 1
Link to comment
Share on other sites

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/

  • Like 2
  • Thanks 1
Link to comment
Share on other sites

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!

  • Like 2
  • Thanks 1
Link to comment
Share on other sites

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!

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.