gsap `stagger` work only for two elements

[azadsarxanli]

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.

[Cassie]

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.

 

[azadsarxanli]

Thanks, master! ^^