Jump to content
GreenSock

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

FOUC (flash of items visible before they animate on)

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 post
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 4
Link to post
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 post
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 post
Share on other sites

That makes more sense.  I think it was a video elsewhere that gave me those instructions.

 

Thx

Link to post
Share on other sites

By the way, we have a Quick Tip video on this by Carl! 

 

  • Like 1
Link to post
Share on other sites
On 1/16/2020 at 2:54 PM, ZachSaucier said:

By the way, we have a Quick Tip video on this by Carl! 

 

@ZachSaucier What if JavaScript is disabled? Then the visibility: hidden will show nothing at all. Is there a way to address this problem, too?

 

Link to post
Share on other sites
2 hours ago, MD81 said:

What if JavaScript is disabled? Then the visibility: hidden will show nothing at all. Is there a way to address this problem, too?

Sure. Just put code to undo the visibility: hidden inside of <noscript> tags.

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

×