Jump to content
GreenSock

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

not working with $(document).ready()

Recommended Posts

I'm new at this. I'm working with the following and trying to use $(document).ready() but it won't work.

 

Here's what I am adapting and I can get it to work fine:

window.onload = function() {
    var headline = document.getElementById("headline"),
        subhead = document.getElementById("subhead");

    TweenMax.staggerFrom([headline, subhead], 1,  {delay:1, scale:0, opacity:0.3}, 2);            
}

Here's what I'm trying to do and can't get it to work:

$(document).ready(function() {
    var headline = document.getElementById("headline"),
        subhead = document.getElementById("subhead");
 
    TweenMax.staggerFrom([headline, subhead], 1,  {delay:1, scale:0, opacity:0.3}, 2);            
});

What am I doing wrong?

Share this post


Link to post
Share on other sites

Hello benjino,

 

Have you tried this:

// wait until DOM is loaded
$(document).ready(function(){

    console.log("DOM is ready");
    
    // wait until window is loaded (images, links etc...)
    window.onload = function() {
        
        console.log("window is loaded");

        var headline = document.getElementById("headline"),
            subhead = document.getElementById("subhead");
 
        TweenMax.staggerFrom([headline, subhead], 1,  {delay:1, scale:0, opacity:0.3}, 2);
    };

});

basically.. your waiting for the DOM to be ready and then run the code when the window has loaded (images, links, etc.. ) 

 

the reason I put the window.load inside the DOM ready() is because sometimes the window.load event can fire before the DOM is ready.. 

 

also you could also use jQuery on() load event.. the shorthand load event load() has been depricated

// wait until DOM is loaded
$(document).ready(function(){

    console.log("DOM is ready");
    
    // wait until window is loaded (images, stylesheets, links etc...)
    $(window).on("load", function() {

        console.log("window is loaded");

        var headline = document.getElementById("headline"),
            subhead = document.getElementById("subhead");
 
        TweenMax.staggerFrom([headline, subhead], 1,  {delay:1, scale:0, opacity:0.3}, 2);
     });

});

If you can provide a codepen or jsfiddle example we can better help you!

 

See the Pen by pen (@pen) on CodePen

http://jsfiddle.net/

 

hope this helps!

Share this post


Link to post
Share on other sites

Neither of those work. I see what you are sharing here but for some reason they don't work.

 

Here's my code:

<body>
  <div class="headsub">
    <h1 id="headline">Increase your bottom line<br>  …in <em>today's</em> world</h1>
    <h3 id="subhead">Bring customers to your business via the Internet</h3>
  </div>
 

<script type="text/javascript" src="greensock/minified/plugins/CSSPlugin.min.js"></script>
<script type="text/javascript" src="greensock/minified/TweenMax.min.js"></script>

<script>
// wait until DOM is loaded
$(document).ready(function(){
    
    // wait until window is loaded (images, links etc...)
    window.onload = function() {
        var headline = document.getElementById("headline"),
            subhead = document.getElementById("subhead");
 
        TweenMax.staggerFrom([headline, subhead], 1,  {delay:1, scale:0, opacity:0.3}, 2);
};

});
</script>



</body>

Share this post


Link to post
Share on other sites

Try adding immediateRender:false to your staggerFrom() tween

 

EXAMPLE:

See the Pen iGHlw by jonathan (@jonathan) on CodePen

 

By default, immediateRender is true in from() tweens, meaning that they immediately render their starting state regardless of any delay that is specified. You can override this behavior by passing immediateRender:false in the vars parameter so that it will wait to render until the tween actually begins.

 

You wont need to include the CSSPLUGIN if you include TweenMax. TweenMax includes it, and alot of other goodies:

 

http://api.greensock.com/js/com/greensock/TweenMax.html

 

is that what you wanted? :)

Share this post


Link to post
Share on other sites

I wanted the headline and subhead to appear from nothing, first the headline, then the subhead. 

 

When I added immediateRender:false it still didn't make anything work with the code you shared that you now have doing something on 

See the Pen iGHlw by jonathan (@jonathan) on CodePen

; it works on yours but not in mine.

 

I'm using a flat html page and I removed the CSSplugin as well. Still nothing works. The only thing that works is the original code here:

window.onload = function() {
    var headline = document.getElementById("headline"),
        subhead = document.getElementById("subhead");
     
    //The last parameter with value of .25 is the stagger amount. Try changing it to 1 see how it impacts the animation.
    TweenMax.staggerFrom([headline, subhead], 1,  {delay:1, scale:0, opacity:0.3}, 2);            
}

I'm now boggled as to why your code doesn't work.

Share this post


Link to post
Share on other sites

what about this.. try this.. on codepen hit the Run button to trigger the animation:

 

See the Pen oyAEt by jonathan (@jonathan) on CodePen

 

this uses autoAlpha instead of opacity:

 

See the Pen ptbfu by jonathan (@jonathan) on CodePen

 

autoAlpha:

 

http://api.greensock.com/js/com/greensock/plugins/CSSPlugin.html

 

autoAlpha - the same thing as "opacity" except that when the value hits "0", the "visibility" property will be set to "hidden" in order to improve browser rendering performance and prevent clicks/interactivity on the target. When the value is anything other than 0, "visibility" will be set to "inherit". We don't set it to "visible" in order to honor inheritance (imagine the parent element is hidden - setting the child to visible explicitly would cause it to appear when that's probably not what was intended). And for convenience, if the element's visibility is initially set to "hidden" and opacity is 1, it will assume opacity should also start at 0. This makes it simple to start things out on your page as invisible (set your css visibility:hidden) and then fade them in whenever you want.

Share this post


Link to post
Share on other sites

When I use your code it doesn't work. Anything you've shown me other than what has worked isn't working. I got what is working from Greensock's jumpstart slideshow and adapted it to what I wanted. It works. Now with yours it doesn't work. I don't understand why it would not be working.

 

Thanks for the autoAlpha explanation and all  your help so far.

Share this post


Link to post
Share on other sites

what browser are you using?

 

what operating system are you on?

 

are you using the latest version of GSAP? :)

Share this post


Link to post
Share on other sites

OS X 10.9

latest Chrome

latest Safari

latest GSAP v12

 

Your code should be working in my html file. It's just an html file with everything in the right place, <script> above closing body tag, src="" above the script. It's all there, all correct, copied and pasted and doesn't work.

 

Here it is below:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<style>
.headsub {
	margin: 0 auto;
	position: relative;
	top: 100px;
	width: 100%;
	text-align: center;
}

h1, h3 {
	font-size: 50px;
	font-size: 5rem;
}
</style>
</head>

<body>
  <div class="headsub">
    <h1 id="headline">Increase your bottom line<br>  …in <em>today's</em> world</h1>
    <h3 id="subhead">Bring customers to your business via the Internet</h3>
  </div>
 

<script type="text/javascript" src="greensock/minified/TweenMax.min.js"></script>

<script>

// wait until DOM is loaded
$(document).ready(function(){
// wait until window is loaded (images, links etc...)
window.onload = function() {
var headline = document.getElementById("headline"),
subhead = document.getElementById("subhead");
  TweenMax.staggerFrom([headline, subhead], 1, {delay:1, scale:0, opacity:0.3}, 2);
};
 
});

</script>



</body>
</html>

Share this post


Link to post
Share on other sites

is the TweenMax.min.js version 11 or 11.2 ?

Share this post


Link to post
Share on other sites

1.11.2, downloaded it from the get GSAP in the upper left hand corner of the website and downloaded JS, Javascript, not AS3 or AS2.

Share this post


Link to post
Share on other sites

thats weird because I see it working on:

Windows 7 on latest Chrome, Firefox, IE10, and IE11

Mobile Android 4.1.2 Galaxy S3 on mobile Chrome, mobile Firefox, Opera mini, and Android stock browser

very strange :(

even if you use the CDN instead of your local TweenMax: http://cdnjs.cloudflare.com/ajax/libs/gsap/1.11.2/TweenMax.min.js

 

Share this post


Link to post
Share on other sites

When it works it works on my iPhone.

 

When I take out …

$(document).ready(function(){


});

…from the code you shared, it works.

 

I even created a new html file and reuploaded it thinking there was some hidden character in there corrupting something, and that didn't fix it.

 

I'd buy the Commercial license but I can't even get it to work with these basic, fundamental installations. Shoot, I even added the absolute URL to the minified folder and that didn't help.

Share this post


Link to post
Share on other sites

Hi,

 

You need to load jQuery in order to use $(document).ready(). I'm not seeing that in your code you provided.

 

Try adding the following to your code:

<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script> 

Also, when you have any type of problems with JavaScript you should look and see if there are any errors. I'd recommend testing in Chrome as it is available for both Mac and PC and has amazing dev tools.

 

When something isn't working in Chrome, use View > Developer Tools > JavaScript Console.

 

You might see something like $ not defined if jQuery isn't loaded.

 

Another good tip, is if you want to run a CodePen demo locally, you can go to Share > Export Zip. Once you extract the file you will see everything that the demo needs to run.

 

If you still have trouble, please zip up your files and post them here. We'd love to help you get it sorted (as evidenced by Jonathan's excellent assistance).

  • Like 2

Share this post


Link to post
Share on other sites

With the new file I've created I've restructured it to pull in a separate .js file for:

// wait until DOM is loaded
$(document).ready(function(){
// wait until window is loaded (images, links etc...)
window.onload = function() {
var headline = document.getElementById("headline"),
subhead = document.getElementById("subhead");
  TweenMax.staggerFrom([headline, subhead], 1, {delay:1, scale:0, opacity:0.3}, 2);
};
 
});

This doesn't work.

 

But, when I remove the following code it works!

$(document).ready(function() {


});

I've even just now tried pulling in TweenMax from cloudflare and it it works with the $(document).ready(function() removed.

<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.11.2/TweenMax.min.js"></script>

Share this post


Link to post
Share on other sites

Hi,

 

You need to load jQuery in order to use $(document).ready(). I'm not seeing that in your code you provided.

 

Try adding the following to your code:

<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script> 

Also, when you have any type of problems with JavaScript you should look and see if there are any errors. I'd recommend testing in Chrome as it is available for both Mac and PC and has amazing dev tools.

 

When something isn't working in Chrome, use View > Developer Tools > JavaScript Console.

 

You might see something like $ not defined if jQuery isn't loaded.

 

Ok Carl, that finally solved the issue. I thought that jQuery was inside the Greensock folders the whole time!

  • Like 1

Share this post


Link to post
Share on other sites

Ok Carl thanks!

 

That finally solved the issue.

 

I thought that jQuery was inside the Greensock folders the whole time, that's why I didn't think of adding it.

Share this post


Link to post
Share on other sites

Great! No worries, its easy to make that mistake, especially when so many libraries depend on jQuery.

 

One of the great things about GSAP is that it has no dependencies on jQuery or any other library. You can run GSAP super-lean.

 

On the other hand, jQuery is an amazing selector engine and we strongly recommend that you do use it, as it makes so many things with JavaScript not only easy but reliable in many browsers.

 

If jQuery is loaded GSAP will automatically default to using it as the selector engine so you can pass in any jQuery selector string directly to a tween:

TweenLite.to("#footer .copyright", 0.5, {left:50}) // tween all elements inside #footer with a class of .copyright
  • Like 3

Share this post


Link to post
Share on other sites

So what is better to use in my case here? opacity:0.3 OR autoAlpha: 0.3   ?

Share this post


Link to post
Share on other sites

If you are animating from() a non-zero opacity like 0.3, then use opacity.

 

autoAlpha is helpful when animating to() a value of 0 as it will also switch the visibility to hidden when the tween ends OR in the case of from() tweens, autoAlpha:0 will render the first frame of the tween with visibility set to "hidden".

  • Like 1

Share this post


Link to post
Share on other sites
On 12/14/2013 at 3:29 AM, Carl said:

Great! No worries, its easy to make that mistake, especially when so many libraries depend on jQuery.

 

One of the great things about GSAP is that it has no dependencies on jQuery or any other library. You can run GSAP super-lean.

 

On the other hand, jQuery is an amazing selector engine and we strongly recommend that you do use it, as it makes so many things with JavaScript not only easy but reliable in many browsers.

 

If jQuery is loaded GSAP will automatically default to using it as the selector engine so you can pass in any jQuery selector string directly to a tween:


TweenLite.to("#footer .copyright", 0.5, {left:50}) // tween all elements inside #footer with a class of .copyright

finally. Its taken me 3 days! Thankyou guys :)

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.

×