visibility: hidden not respected

[gChambers]

Hello,

I'm attempting to display a matrix of four square shapes in a sequential, clock-wise manner. These should animate using autoAlpha in a smooth "pinwheel" fashion.

My issue is that - after the first run-through of the timeline - all four squares disregard the CSS "visibility: hidden" declaration. They all display briefly in an unwanted  "flash" that disrupts the smooth continual flow.

This is merely a learning exercise for me... a gentle nudge in the right direction would be appreciated.

 

 

 

Thanks.

See the Pen Vvyyrq by jonathan (@jonathan) on CodePen

[Jonathan]

Hello gChambers, and Welcome to the GreenSock Forum!

 

What's happening is that you are only setting the initial visibility of the elements in your CSS. In order for it to reassign the visibility hidden CSS property you can use the GSAP set() method in your timeline.

 

 

GSAP set() method: http://greensock.com/docs/#/HTML5/GSAP/TimelineMax/set/

 

Also by using the GSAP set() method you allow GSAP to record the value being set as reference for later.

 

[gChambers]

Johnathon,

Thanks for your reply. The exciting thing about learning GSAP are all the little nuances that make up a successful animation.

Yesterday, I had been able to create a (somewhat) similar animation using a background sprite sheet and:

ease: SteppedEase.config(3);

However, I much prefer the effect that autoAlpha produces.

Thanks again for the explanation.

So much to absorb!   Baby steps.