Jump to content
Search Community

SMIL staggering animation to GSAP

plinplon test
Moderator Tag

Recommended Posts

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

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.
×
×
  • Create New...