Jump to content
GreenSock

gChambers

visibility: hidden not respected

Go to solution Solved by Jonathan,

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

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.

 

matrixExample.png

 

 

Thanks.

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

Link to comment
Share on other sites

  • Solution

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.

 

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

 

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.

 

:)

  • Like 4
Link to comment
Share on other sites

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!  :-P Baby steps.

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