Jump to content
Search Community

brief flash of original state when loading a page

ericshew test
Moderator Tag

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

Hi there,

 

I'm just getting started with Greensock and my first impressions are very positive indeed! 

 

I'm running into a problem that is probably really easily addressed but I haven't seen in it mentioned in the forum or the documents I've read so far. Apologies if I have missed it.

 

Basically, I'm having a bunch of screen elements emerge after a web page has loaded. The problem is that you see the interfaces in their final form for a flash as the page loads. Is there an easy way of addressing this? 

 

Thanks in advance,

Link to comment
Share on other sites

Hi ericshew :)

 

Welcome to the forums and thank you for being a Club GreenSock member.

 

The easiest way to fix that little flash is to set the visibility of your element(s) to hidden in your CSS (or set the opacity to 0 is fine too) and then before you start animating anything you can use GSAP to make them visible again. Like this:

TweenMax.set(yourElement, {autoAlpha:1}); 

autoAlpha is a combo of opacity and visibility so you're basically making everything visible right before your animation tweens and/or timelines start. That should fix the flash for you.

 

Hopefully that helps.

 

Happy tweening and welcome aboard.

:)

  • Like 4
Link to comment
Share on other sites

Happy to help. That's how we roll in the GreenSock neighborhood.  ;)

 

Please don't hesitate to ask if you have any additional problems or questions. If it's something beyond a basic question, a simplified CodePen demo is great so we can edit your live code and get you the best assistance.

 

If you haven't seen Carl's blog post about CodePen yet, please take a look at your convenience.

 

http://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/

 

Thanks again for joining Club GreenSock - we're happy to have you with us.

 

Have fun with your new tweening powers.

:)

  • Like 3
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...