Jump to content
Search Community

Greensock and .from tweens not loading properly

sorciereus test
Moderator Tag

Go to solution Solved by Carl,

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 again forum. So we've been noticing this for several months, and it's in both Flash and GSAP. When we use from tweens, whether it be TweenLite, TweenMax, or TweenNano, the elements initially load in their starting position, before the .from positions are initiated, giving a poor load experience. An example would be:

 

 

Notice all the elements pop onto stage, then go to their starting positions. It seems to be mostly an issue in Chrome. It's strange, because I've built many a unit previously that this never would happen in, and then one day it just started happening. I must prefer using from tweens vs to tweens so this error does cause extra work. Any ideas? 

See the Pen yyBGYg by GreenSock (@GreenSock) on CodePen

Link to comment
Share on other sites

What you would need to do sorciereus, is since you are using a from()  tween.. from()  tweens render immediately.. so you would need to add to your from() tween.. immediateRender:false

:

// so for example if your from tween is this:
TweenLite.from("#thermoball", .25, {scaleY:0, delay:3.3});

// you would need to add immediateRender:false
TweenLite.from("#thermoball", .25, {scaleY:0, delay:3.3, immediateRender:false});

:

Check out the TweenLite Docs:
 

immediateRender : Boolean - Normally when you create a tween, it begins rendering on the very next frame (update cycle) unless you specify a delay. However, if you prefer to force the tween to render immediately when it is created, set immediateRender to true. Or to prevent a from() from rendering immediately, set immediateRender to false. By default, from() tweens set immediateRender to true.

 

Keep in mind this applies to all from() tweens.. even fromTo(), staggerFrom(), and staggerFromTo() tweens.

 

Does that help? :)

Link to comment
Share on other sites

  • Solution

hmm, i think what you are seeing is how your elements are positioned BEFORE the from tweens even get to immediately render.

 

This is the process of how things load and render

 

Html loads

DOM gets constructed

CSS is applied

 

--- you see the elements how the CSS dictates they should be displayed

 

external JavaScript loads

JavaScript runs

from tweens set the initial from values

 

So that odd positioning you see is basically what your add looks like before TweenLite even runs.

 

There are a few ways to get around this, the most common is just to tell the div that contains your animation to have css like

#banner {
 visibility:hidden;
}

then, when your javascript and tweens start getting created add this script

TweenLite.set("#banner", {visibility:"visible"});

This has the effect of saying, "everything will be hidden as soon as the DOM is loaded and rendered and when the JavaScript first runs, we will reveal everything where it should be".

 

 

 

Here is an example that takes a slightly different approach but the core concept is the same.

http://codepen.io/anon/pen/nkzHf?editors=011

 

It uses a delayedCall to force a 2 second delay before the TimelineLite is even created. This is put in simply to simulate a lot of latency while loading the js. You will there is no flicker of assets or anything strange at all.

All the images have their visibility set to hidden in the css, and autoAlpha from() tweens toggle the visibility to inherit.

 

--

 

Also, its great that you provide a demo, but please use images or colored divs so we can actually see what we are supposed to see. Thanks

 

 

 

When looking at the demo, click the banner to hide it, the refresh the page. You will never see any flickering.

img {
 visibility:hidden;
}

And the tweens use from() tweens with autoAlpha to toggle visibility to inherit.

  • Like 2
Link to comment
Share on other sites

  • 2 years later...

 

Hi, I have a similar problem but your solution is problematic.

 

On 11.11.2014 at 9:00 PM, Carl said:

There are a few ways to get around this, the most common is just to tell the div that contains your animation to have css like


#banner {
 visibility:hidden;
}

then, when your javascript and tweens start getting created add this script


TweenLite.set("#banner", {visibility:"visible"});

This has the effect of saying, "everything will be hidden as soon as the DOM is loaded and rendered and when the JavaScript first runs, we will reveal everything where it should be".

 

If I use such an approach and the user has JS deactivated he will never see the content because visibility stays hidden.

 

When JS is enabled I want to fade in elements (e.g. opacity 0 to 1), without showing them before. If JS is disabled it should just show the content without animation.

 

Is there any solution for that?

 

And what are the other "few ways to get around this"?

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