Jump to content
Search Community

Loading scripts at the bottom

Jenos test

By Jenos
in GSAP

Moderator Tag
 Share

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

Jenos test

Jenos

Posted
Posted

I have some animation setup for certain elements to move into place (tweenmax.from) when the content appears in the viewport using jquery appear plugin. something like this:

 

$('.fade-from-left').each(function() {
        $(this).appear(function() {
            TweenLite.from($(this), 0.5, {
                x: -50,opacity:0, delay:0.5,
                ease: "Power1.easeInOut"
            });
        });
    });
 
I am loading my scripts at the bottom (jquery, tweenmax) but what I notice is that the content stays there visible for the user for a moment before it shift place and start the animation fading from left.
Is there anyway I can make the content invisible? I tried applying a class with opacity set to 0, but thats hiding the content forever even after the animation.
 
When I move the scripts to the top it behaves as expected.
 
Appreciate any help.
Link to comment
Share on other sites
Rodrigo test

Rodrigo

Posted
Posted

Hi and welcome to the GreenSock forums.

 

As you point the issue could be adding all the scripts before the </body> closing tag.

 

What happens is that your page loads, first it gets the title and the styles, therefore your page is next rendered but only with the styles as the code in the <body> tag is interpreted, at this point the scripts haven't been loaded yet. Then the scripts are loaded, then executed and the corresponding changes are made to the DOM. Since you have a from instance the browser has already rendered your element, then after it has loaded jQuery and GSAP, reads your script and says: "ok, I have to move every element with this class to the position GSAP is indicating", but this happens after everything is already on the screen.

 

This has nothing to do with GSAP, just the way things work in HTML. Your document is loaded and executed as the browser goes down through the code, that's it.

 

Rodrigo.

Link to comment
Share on other sites
Carl test

Carl

Posted
Posted

Also, if your element initially has an opacity of 0 (set in your css) tweening from opacity:0 isn't going to work. Essentially you are creating a tween that tweens from opacity:0 to opacity:0.

 

 

What you could do is 

 

leave opacity:0 in your css for .fade-from-left class.

 

add a set() prior to your tween

 

$('.fade-from-left').each(function() {
        $(this).appear(function() {
            TweenLite.set($(this), {opacity:1})
            TweenLite.from($(this), 0.5, {
                x: -50,opacity:0, delay:0.5,
                ease: "Power1.easeInOut"
            });
        });
    });

Normally I would suggest just using css to set visibility:hidden and then if you tween from autoAlpha:0 the tween will change both the visibility and opacity so that your element fades in nicely from being invisible. 

 

See here: http://codepen.io/GreenSock/pen/Ijnvb

Notice all my scripts load after the html (in the html panel)

In the css panel you will see the li tags have opacity set to 0.

The li elements do not show up until the animation starts (no momentary flicker or anything before the js kicks in)

 

Click the "run" button to see the animation again

 

I am assuming though that if the element has visibility:hidden set the appear() plugin won't know that it should tween. I've never used it, so I'm not sure.

 

If you want to create a small, bare-bones demo, feel free. We recommend using CodePen:

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

  • 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
 Share
Go to topic listing

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...