Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
gChambers

visibility: hidden not respected

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
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.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.

×