Jump to content


Need help with loader animation...

Moderator Tag
Go to solution Solved by Shaun Gorneau,

Recommended Posts

Playing around with gsap to get more experience with it. And stuck on the first simple animation, or not...

I'm trying to make same as on attached video. But no luck. I know we need to use stagger here.  But how to 

use it together with fromTo, or timeline for this specific case, I don't know. We need to change opacity to 1,

back to 0 and only after stagger it.


Thank you!

See the Pen MWJjmYg by royalhunt (@royalhunt) on CodePen

Link to comment
Share on other sites

  • Solution

@AlexN welcome to GSAP!


The trick here is to yoyo each individual stagger tween but repeat the overall "to" tween (not the stagger). The other little tidbit is that yoyo only works if there is a repeat value greater than 0. So repeat -1, 0, or no value will not produce the yoyo. Putting repeat: 1 within the stagger will take care of that. Have a look here,


See the Pen abpmqjw by sgorneau (@sgorneau) on CodePen

  • Like 3
Link to comment
Share on other sites

It's Amazing, Shaun! 

I knew it could be done somehow! But my knowledge didn't left me a chance. Thank you so much!

I hope in near future I will help other developers with their questions... 

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