Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

Loop certain area

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hi :)

Im relativ new to gsap and im also not that big of a JS geek, so I'm trying to fiddle my stuff with the forums and the documentaries.


But now i got kind of stuck...

Im trying to draw those rings (see demo)  and afterwards let them do this wave thingy. After that, it should repeat at 



I tried the seek(); staggerFromTo(); and other stuff (e.g. http://jsfiddle.net/geekambassador/eMGsc/), but it might be also a small syntaxerror?


Maybe someone can help me :)



See the Pen RMQbLY by Philastan (@Philastan) on CodePen

Link to comment
Share on other sites

Hi @ajando :)


Welcome to the forum and thanks for being a member of Club GreenSock.


I'm not sure I completely understand the desired outcome. Should the rings draw and then the wavy/bulge part repeats? Like this?

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

Or did you mean the waves would yoyo once and then the whole timeline repeats? I wasn't quite sure.


Hopefully that helps. Happy tweening and welcome aboard.



  • Like 3
Link to comment
Share on other sites

Thanks a lot :D This was exactly what I was looking for!!!

Only one part is missing: I was trying to animate those waves simultaneously. I forked your pen:

See the Pen aYqMpG by Philastan (@Philastan) on CodePen


Why the animation doesn't start at the same time, since both referring to the label 

  .add("back", 3.5)


Thanks for the welcome btw!

Link to comment
Share on other sites

Sorry - that's my fault. I dropped those yoyos on the tweens and restarted from the 'back' label. I think you wanted to replay from the start label. How's this?


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


  • Like 5
Link to comment
Share on other sites

Awesome! Thank you so much <3 :)

  • Like 2
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.