Jump to content
Search Community

FOUC (flash of items visible before they animate on)

Heffalump 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

Brand new to this, but I'm not seeing the answer out there (maybe I'm looking up the wrong terms).

 

Anyway, I'm doing a few tests, and I'm seeing a flash of the unanimated objects before they come on.  For instance, if they animate from 0% scale to 100, they appear for an instant at full size before they disappear and the animation begins.  It's only local at the moment, but I see it in both chrome and firefox.

 

I'm using jquery for selectors, and both jquery, TweenMax, and the function to animate are all being loaded in the head before any of the elements are defined in the body html.

 

Is there a typical way to resolve this or most likely cause to look at?

Link to comment
Share on other sites

Hi and welcome to the GreenSock forums,

 

The problem is that your page is rendered how it should using the normal CSS properties before your JavaScript runs. Most likely your page renders, and then TweenMax loads and then your from() tweens alter the starting properties of the objects being animated.

 

The easiest way to solve this is to set the visibility of the items being animated to hidden using the page's css like

.someItem {
  visibility:hidden;
}

and then when your JS executes, set it to visible

TweenLite.set(".someItem", {visibility:"hidden"});

Typically I will just manage the visibility of the element that contains multiple objects that have from() tweens on them

 

http://codepen.io/GreenSock/pen/NPgyvx

  • Like 5
Link to comment
Share on other sites

OK, well if that's the best solution, then that's what I'll do, but out of sheer ignorance:

 

If the js isn't executed until after the page loads, then is it really necessary to have the library and function in the head?  I just followed directions to put them there.  Could that part be handled better for page loads, etc?

 

AMAZINGLY simple to use, btw.  Never would have guessed that animation would have been the SIMPLEST part of creating my site.  I'll dig in a bit to see what kind of speed hit I'm taking for using the full libraries, but it definitely is quite impressive for minimal programming effort.

Link to comment
Share on other sites

Glad to hear you are enjoying your time with GSAP, excellent.

 

Actually we recommend that you do NOT load TweenMax and your custom scripts in the <head> of your document. If you found info on our site that says otherwise, please let us know and we will change it around.

 

The reason we do not recommend putting scripts in the <head> is because 

 

1: loading the scripts will interfere with the loading of the rest of the page

2: you need the DOM loaded and rendered first (before the JS) because chances are your TweenMax scripts are going to be referencing DOM elements and it is no good to run scripts on DOM elements before the DOM is ready.

 

From our experience it is best to load TweenMax and your custom scripts right before the closing body tag </body> like this

 

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>GreenSock: Repeat</title>
</head>


<body>
<div id="demo">
    <div id="logo"></div>
</div>




<script src="js/greensock/TweenMax.min.js"></script>


<script src="myCustomAnimationCode.js"></script>


</body>
</html>
  • Like 1
Link to comment
Share on other sites

  • 4 years later...
  • 7 months later...

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