Jump to content
GreenSock

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

Question regarding "from" animation.

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've used the flash versions of the libraries before but now I just recently moved to the js-version - exciting!!  8-)

Since I'm more of a designer than developer I like to place graphics, images etc. where they are supposed to be in a layout after they have been animated. This means that I really like to use "from" animation.
But I've come to notice that this sometimes gives me some flicker of the elements where they are placed at the final "place" & not the "from" state.
I have this (the timeline will have more animations) & this gives my some flicker of the bells element before it becomes "invisible":

window.onload = function()
{
var bells = document.getElementById("firtreeBells");
//create a TimelineLite instance
var tl = new TimelineLite();
tl.from(bells, 0.6, {top:"35%", autoAlpha:"0"});
tl.pause();
};

Setting the intitial css to an opacity:0; will solve this but then I have to use "to-animation" instead.

Or maybe a visible:hidden and change this at onStart..?
Since in this case the initial opacity:0; is set for an image it won't necessary matter that much but I'm thinking that it certainly will matter if you are making an animation of text on a website.

Setting the opacity to zero or visible to hidden in the css for text is definitely not a good thing

from a SEO perspective...google for example will not like this...

Any tips on this?

 

Best, Niklas

 

Link to comment
Share on other sites

Yup, that flicker you are seeing is because as soon as the DOM is loaded it gets rendered PRIOR to your javascript (which hides / re-positions elements for the animation from states) being executed.

 

What we have found to work well is 

 

1: place all your animated items in a container element, let's call it #animationWrapper for now

 

2: in css set

#animationWrapper {
  visibility:hidden;
}

3: As soon as your JavaScript starts executing use a TweenLite.set(), from() or to() tween to give #animationWrapper an autoAlpha:1 

TweenLite.set("#animationWrapper", {autoAlpha:1});

OR if you want the wrapper to fade in

TweenLite.from("#animationWrapper", 0.5, {autoAlpha:0})
//or
TweenLite.to("#animationWrapper", 0.5, {autoAlpha:1})

If google has said that all children of element's with visibility:hidden will not be indexed you may need to find another approach to hiding your elements prior to the JavaScript executing.

Perhaps scale:0.

  • Like 2
Link to comment
Share on other sites

You're using the window.onload event to trigger your from() tweens. From Mozilla:

The load event fires at the end of the document loading process. At this point, all of the objects in the document are in the DOM, and all the images and sub-frames have finished loading.

 

Depending on the weight of the page, this could actually be seconds after things become visible in the window. You will see better results creating the from() tweens as soon as the DOM is ready to be manipulated.

 

Quick way: You can move your script tags to the very end of the <body> tag.

 

If you use jQuery for instance though, it has a super super easy method for adding a cross-browser event to handle this. It's not required, but it certainly makes things simpler

jQuery(document).ready(function() {
  // DOM is ready - find, edit, add or remove any element in the page here
});
  • Like 2
Link to comment
Share on other sites

Thanks a lot Carl!
This was what I suspected.
Now it seems as though I exaggerated the SEO part.
I've done some searching on this & it seems to be a lot of different opinions regarding this with the css as hidden or a set opacity to 0...
No one seems to be 100% sure but it seems like you're ok as long as you don't stuff your hidden text with tons of keywords hence do some obvious cloaking.
Nothing to do with GSAP really but thought I would share this here is someone finds this question interesting.

 

Yup, that flicker you are seeing is because as soon as the DOM is loaded it gets rendered PRIOR to your javascript (which hides / re-positions elements for the animation from states) being executed.

 

What we have found to work well is 

 

1: place all your animated items in a container element, let's call it #animationWrapper for now

 

2: in css set

#animationWrapper {
  visibility:hidden;
}

3: As soon as your JavaScript starts executing use a TweenLite.set(), from() or to() tween to give #animationWrapper an autoAlpha:1 

TweenLite.set("#animationWrapper", {autoAlpha:1});

OR if you want the wrapper to fade in

TweenLite.from("#animationWrapper", 0.5, {autoAlpha:0})
//or
TweenLite.to("#animationWrapper", 0.5, {autoAlpha:1})

If google has said that all children of element's with visibility:hidden will not be indexed you may need to find another approach to hiding your elements prior to the JavaScript executing.

Perhaps scale:0.

Link to comment
Share on other sites

Thanks alot Jamie!

Sorry for a late answer.
But the thing with this solution is that an element can be animated before the content, let say an image is loaded hence visible... That's not what I want. It doesn't make sense to me to animate something that we aren't sure is visible or present just yet...

Best, Niklas
 

You're using the window.onload event to trigger your from() tweens. From Mozilla:
 
Depending on the weight of the page, this could actually be seconds after things become visible in the window. You will see better results creating the from() tweens as soon as the DOM is ready to be manipulated.
 
Quick way: You can move your script tags to the very end of the <body> tag.

If you use jQuery for instance though, it has a super super easy method for adding a cross-browser event to handle this. It's not required, but it certainly makes things simpler

jQuery(document).ready(function() {
  // DOM is ready - find, edit, add or remove any element in the page here
});
Link to comment
Share on other sites

Sorry if I wasn't clear before, but I meant that you should use the ready event to create your tweens (they can be paused at creation, and then played once the window has loaded) - you don't have to start all of your animating at DOM ready, but you could use it to set the first visible state of stuff.

  • Like 1
Link to comment
Share on other sites

Hi Jamie.
I'm using your solution for the above & it works really well.

I'm also using the SplitText utitility like so:

//split greetings txt into words
var split = new SplitText("#greetingsTxt", {type:"words", wordsClass:"words, chars"});
//create a TimelineLite instance - animation
var tl = new TimelineLite({paused:true, delay:1});
tl.from("#firtreeBells", 0.6, {top:"35%", autoAlpha:"0"});
tl.staggerFrom(split.words, 0.4, {y:-20, autoAlpha:0}, 0.1);
tl.from("#logo", 0.6, {bottom:"15%", autoAlpha:"0"}, "-=0.2");


window.onload = function()
{ 
    tl.play(); 
};

Question:
Is there a risk here that the text won't be split up if the text isn't ready yet?
I mean "DOM ready" doesn't really mean that the text is rendered or in place - does it?

Niklas

Link to comment
Share on other sites

No that's ok, DOM ready is a fine place to put the split text stuff. It's hard to describe without just saying 'the DOM is ready', but it occurs when all of the HTML (and in most cases the styles and scripts) have loaded, and the 'DOM' representation has been generated. At that point all the text is there and ready to be manipulated; it should have font size, color, position, etc. Pretty much everything is loaded except for images.
 
Note: you should make sure that stylesheets are placed before the scripts in the HTML file. External CSS files are usually blocking, and will delay javascript execution until they have loaded. If they come after the javascript files its possible the ready event could fire before the styles finish loading.
 
Essentially, something like this should work fine:

<link href='style1.css' type='text/css' rel='stylesheet' media='screen' />
<link href='style2.css' type='text/css' rel='stylesheet' media='screen' />
<script src='jquery.min.js' type='text/javascript'></script>
<script src='TweenMax.min.js' type='text/javascript'></script>
<script src='scripts.js' type='text/javascript'></script>
  • Like 1
Link to comment
Share on other sites

No, there isn't any risk. ready() will only fire after the DOM hierarchy (which contains your #greetingsText) has been constructed.

 

From the jQuery docs:

While JavaScript provides the load event for executing code when a page is rendered, this event does not get triggered until all assets such as images have been completely received. In most cases, the script can be run as soon as the DOM hierarchy has been fully constructed. The handler passed to .ready() is guaranteed to be executed after the DOM is ready, so this is usually the best place to attach all other event handlers and run other jQuery code.

 

 

 

The only time ready() would fire before your text is ready is if you are loading the text from an external file or its dynamically generated via some other javascript which hasn't yet been loaded or run.

  • Like 1
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.
×