Jump to content
GreenSock

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

JQuery Document.Load Gsap

Recommended Posts

Hello - My last thread became a new topic so I'm starting one specific for this one. Here is the original thread:

http://forums.greensock.com/topic/8978-animated-rollovers-not-functioning-properly/

 

So I'm trying to use JQuery (document).ready to load some tweenlite rather than window onload. This isn't working so far, I know the tweenlite works because it's working with window.onload - here is the code:

<body>
<div id="container">
	<div id="lens_flare"><img src="images/lens_flare.png" /></div>
   <div><img src="images/new_season.png" id="share" /></div>
   <div id="love"><img src="images/new_you.png"></div>
   <div id="my_logo"><img src="images/my_logo.gif"></div>

</div>
 
<!--- The following scripts are necessary to do TweenLite tweens on CSS properties -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/plugins/CSSPlugin.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/easing/EasePack.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenLite.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

<script>
jQuery(document).ready(function(){ 

     console.log("DOM is ready");
     
     jQuery(window).on("load", function(){
           
           console.log("window is loaded");

     TweenLite.to("lens_flare", .25, {alpha:1, scaleX:1.2, scaleY:1.2, delay:1});
     TweenLite.to("lens_flare", .25, {alpha:0, scaleX:1, scaleY:1, delay:1.25});
     TweenLite.to("container", 1, {autoAlpha:1, ease:Quad.easeIn});
     TweenLite.to("share", .75, {delay:3, alpha:1});
     TweenLite.to("love", .5, {alpha:1, delay:3.5});
     TweenLite.to("my_logo", .75, {left:0, alpha:1, delay:4});
      });

});
     
</script>


</body>

This displays as blank. Any help?

 

Thanks!

Link to post
Share on other sites

Hi,

 

Put the script tags pointing to the files(jQuery and GSAP) between the <head> tags and then the rest.

<head>

<!--- The following scripts are necessary to do TweenLite tweens on CSS properties -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/plugins/CSSPlugin.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/easing/EasePack.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenLite.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

</head>

<body>
<div id="container">
	<div id="lens_flare"><img src="images/lens_flare.png" /></div>
   <div><img src="images/new_season.png" id="new_season" /></div>
   <div id="new_you"><img src="images/new_you.png"></div>
   <div id="my_logo"><img src="images/my_logo.gif"></div>

</div>

<script>
jQuery(document).ready(function(){ 

     console.log("DOM is ready");
     
     jQuery(window).on("load", function(){
           
           console.log("window is loaded");

     TweenLite.to("lens_flare", .25, {alpha:1, scaleX:1.2, scaleY:1.2, delay:1});
     TweenLite.to("lens_flare", .25, {alpha:0, scaleX:1, scaleY:1, delay:1.25});
     TweenLite.to("container", 1, {autoAlpha:1, ease:Quad.easeIn});
     TweenLite.to("new_season", .75, {delay:3, alpha:1});
     TweenLite.to("new_you", .5, {alpha:1, delay:3.5});
     TweenLite.to("my_logo", .75, {left:0, alpha:1, delay:4});
      });

});
     
</script>


</body>

Rodrigo.

Link to post
Share on other sites

Yeah I tried that one before doesn't seem to do the trick. 

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

×