Jump to content
Search Community

gsap `stagger` work only for two elements

azadsarxanli test
Moderator Tag

Go to solution Solved by Cassie,

Recommended Posts

I'm trying to create `pixel art`.  I change `display` from `block` to `none`, because I don't need smooth transition. 

I used `stagger` to animate that, but when I do that, I observ, the first element's display doesn't change. But When I add,  `opacity: 0` (*), it works as I want.

* code, I talked about

tl.from([svg1, svg2, svg3], {
        duration: 0.8,
        stagger: 0.4,
        display: "none",
  		opacity: 0,
        repeat: -1,


No idea, what's the problem, and why this occurs...

See the Pen OJvyBeo by azadsarxanli (@azadsarxanli) on CodePen

Link to comment
Share on other sites

  • Solution

Hey there!


Not quite sure what you mean here - the first element's display does change. It quickly flashes from invisible to visible at the beginning. There's no transition as it's not animating between display values (as you intended)

If you change it to opacity, it is animating between opacity 0 and 1 over 0.5 seconds, which is why you can see it changing.

Maybe you're after something like this?

See the Pen YzayRgd by GreenSock (@GreenSock) on CodePen


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