Jump to content
Search Community

not working with $(document).ready()

benjino test
Moderator Tag

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

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?

Link to comment
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!

Link to comment
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>
Link to comment
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? :)

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

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

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

Link to comment
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>

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

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

  • 5 years later...
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 :)

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