Animated Rollovers not functioning properly

sorciereus · February 4, 2014

Hello. I have some code I'm having trouble with - I'd like to do animated rollovers however it is not working correctly. Can you please advise where I am going wrong? Thank you!

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>GreenSock: HTML5</title>
<!--css goes here -->     
<style>
#container
{
  width:924px;
  height:250px;
  background-color:#000000;
  opacity:0;
  position:relative;

}

#my_films
{
	width:875px;
	height:422px;
	opacity:0;
	margin-top:55px;
	margin-left:20px;
}

#season2
{
	width:285px;
	height:44px;
	margin-top:0px;
	margin-left:19px;
}

#grantland
{
	width:304px;
	height:44px;
	margin-top:5px;
	margin-left:0px;
	opacity:0;
}

#packshot
{
	width:365px;;
	height:265px;
	position:absolute;
	left:335px;
	top:20px;
	opacity:0;
}

#holiday
{
	width:142px;
	height:16px;
	position:absolute;
	left:722px;
	top:84px;
	opacity:0;
}

#starts
{
	position:absolute;
	left:714px;
	top:104px;
	opacity:0;	
}

#buy
{
	position:absolute;
	left:747px;
	top:210px;
	opacity:0;
	background-color:#000000;
	background-image: url('images/buy_outline.png');
	width:88px;
	height:41px;
}


</style>
</head>
 
<body>
<div id="container">
   <div><img src="images/my_films.svg" id="my_films" /></div>
   <div id="season2"><img src="images/season2.png" /></div>
   <div id="grantland"><img src="images/grantland.png"></div>
   <div id="packshot"><img src="images/packshots_lrgest.png" /></div>
   <div id="holiday"><img src="images/holiday.png" /></div>
   <div id="starts"><img src="images/starts.png" /></div>
   <div id="buy"><a href="#">Buy</a></div>
</div>
 
<!--CDN link for the latest TweenMax-->
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.10.2/TweenMax.min.js"></script>

<script>
window.onload = function(){
var tl = new TimelineMax({repeat:2, repeatDelay:3});
tl.add( TweenLite.to(container, 1, {autoAlpha:1, ease:Quad.easeIn}) );
tl.add( TweenLite.to(my_films, 1, {width:177, height:44, alpha:1, ease:Power1.easeIn}) );
tl.add( TweenLite.from(season2, 1.5, {alpha:0}) );
tl.add( TweenLite.to(grantland, .5, {x:19, alpha:1}) );
tl.add( TweenLite.to(packshot, 1.5, {alpha:1, ease:Power4.easeIn}) );
tl.add( TweenLite.to(holiday, 1, {alpha:1}) );
tl.add( TweenLite.to(starts, .75, {alpha:1}) );
tl.add( TweenLite.to(buy, .5, {alpha:1, top:142, ease:Back.easeOut}) );
}
$("#buy").hover(
  function(){
    TweenLite.to(this, 0.5, {scale:1.5, backgroundColor:"red"});
  },
  function(){
    TweenLite.to(this, 0.5, {scale:1, backgroundColor:"black"});
  }
);
     
</script>


</body>
</html>

Any ideas? (the buy text is in there as placeholder - I'd like to see the background changing like in this example:

See the Pen deb6ac1e2c8ce73ac7d68efba088ed00 by GreenSock (@GreenSock) on CodePen

Carl · February 4, 2014

.hover() is a jQuery method. I don't see that you are loading jQuery anywhere, please add this to your code right before the script tag for TweenMax.

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

Rodrigo · February 4, 2014

Hi,

You're not including the latest version of jQuery in your code. Also is recommended to put the script tags for libraries in between the <head> tags, like this:

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>GreenSock: 30 For 30 HTML5</title>
<!--css goes here -->     
<style>
#container
{
  width:924px;
  height:250px;
  background-color:#000000;
  opacity:0;
  position:relative;
 
}
 
#my_films
{
	width:875px;
	height:422px;
	opacity:0;
	margin-top:55px;
	margin-left:20px;
}
 
#season2
{
	width:285px;
	height:44px;
	margin-top:0px;
	margin-left:19px;
}
 
#grantland
{
	width:304px;
	height:44px;
	margin-top:5px;
	margin-left:0px;
	opacity:0;
}
 
#packshot
{
	width:365px;;
	height:265px;
	position:absolute;
	left:335px;
	top:20px;
	opacity:0;
}
 
#holiday
{
	width:142px;
	height:16px;
	position:absolute;
	left:722px;
	top:84px;
	opacity:0;
}
 
#starts
{
	position:absolute;
	left:714px;
	top:104px;
	opacity:0;	
}
 
#buy
{
	position:absolute;
	left:747px;
	top:210px;
	opacity:0;
	background-color:#000000;
	background-image: url('images/buy_outline.png');
	width:88px;
	height:41px;
}
 
 
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
</head>

Finally you're pointing to a very old version of the engine, the latest one is 1.11.4. It's always better to use the latest version.

Rodrigo.

sorciereus · February 6, 2014

Hi there. Apologies - I have the JQuery script tag in my original file but didn't copy over. Actually so I tried this and am also using the latest version of TweenMax - that ad is animating fine - rollover still isn't functioning. Tried placing the JQuery in it's own script tag, nested within the TimelineMax tag and etc - no luck.

Rodrigo · February 6, 2014

Hi,

I haven't been able to reproduce your issue. This codepen has a similar structure in terms of the timeline and an individual tween for the hover in/out events:

See the Pen kcday by rhernando (@rhernando) on CodePen

Feel free to fork and adapt it to your scenario so we can get a better idea of what could be happening.

Rodrigo.

sorciereus · February 7, 2014

I was able to implement the above link in a looping animated sequence - thank you!

sorciereus · February 10, 2014

Hello - so I have another question - this may be more of a Jquery question. For the particular site I'm researching these methods for, I can't use $ to reference Jquery code. It breaks with the other site code. For this here:

See the Pen kcday by rhernando (@rhernando) on CodePen

Do you have an alternative method to referencing:

var element = $("#element"),

? Thanks in advance for any help -

Jonathan · February 10, 2014

Hello sorciereus,

You can try using jQuery() name instead of using the factory symbol $():

var element = jQuery("#element"),

BUT NOTE:
The factory function $() is a synonym of jQuery() function. So in case you are using any other JavaScript library where $ sign is conflicting with some thing else then you can replace $ sign by jQuery name and you can use function jQuery() instead of $().

Here is some good info on Avoiding Conflicts With Other Libraries:

http://learn.jquery.com/using-jquery-core/avoid-conflicts-other-libraries/

https://api.jquery.com/jQuery.noConflict/

sorciereus · February 10, 2014

Ok, I have one more javascript/jquery question - so also the window.onLoad isn't a good way for me to load my gsap units - I need to use Document.ready -

Can you show me how that would look in the context of the code I initially posted? Thanks for any help!

Jonathan · February 10, 2014

You could have the DOM ready and window load events seperate.. but it just depends on your situation and type of web app your making.

// runs when the DOM is ready
jQuery(document).ready(function(){
     console.log("DOM is ready");
});

//runs when images, objects, frames and links have loaded
window.load = function(){
      console.log("window is loaded");
};

Or you could nest the window load event inside document ready(). You could place the window load event inside the jQuery document ready() method. This makes sure the DOM is ready before checking if the window has loaded. Sometimes the DOM can parse slow and be ready after your window has loaded.. so thats why i opt to have my window event inside the DOM ready(). If the DOM is ready and the window is loaded, the window load event will fire immediately.

// runs when the DOM is ready 
jQuery(document).ready(function(){

        console.log("DOM is ready");
        
        // the handler will fire immediately if the window is loaded
        // runs when images, objects, frames and links have loaded
        window.load = function(){
                console.log("window is loaded");
        };
});

///////////////////////////////////////////////////////
// or you do this with jQuery on() to load the window 
///////////////////////////////////////////////////////

// runs when the DOM is ready 
jQuery(document).ready(function(){

       console.log("DOM is ready");
        
       // the handler will fire immediately if the window is loaded
       // using jQuery to bind the event for cross-browser
       // runs when images, objects, frames and links have loaded
       jQuery(window).on("load", function(){
                 console.log("window is loaded");
       });
});

But the best thing to do is TEST, TEST, TEST.. the above code to see when the console logs are outputted to the console.. and then TEST on your server. This is more of a personal preference.. but for me, I like to make sure the DOM is completely ready before firing event handlers.

Does that help

sorciereus · February 28, 2014

So would this be correct?

<script>
jQuery(document).ready(function(){
     console.log("DOM is ready");
     TweenLite.to("holiday", 1, {alpha:1, delay:4});
     TweenLite.to("starts", .75, {alpha:1, delay:4.8});
     TweenLite.to("buy", .5, {alpha:1, top:142, ease:Back.easeOut, delay:5.5});
});
</script>

Jonathan · February 28, 2014

Yeah, that would wait until the DOM was ready, and then run the code inside.

If you have images on the page your animating, you can also add the window.load events from above to make sure all images are loaded before animating them and running the code, like so:

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

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

           TweenLite.to("holiday", 1, {alpha:1, delay:4});
           TweenLite.to("starts", .75, {alpha:1, delay:4.8});
           TweenLite.to("buy", .5, {alpha:1, top:142, ease:Back.easeOut, delay:5.5});
      });

});
</script>

But your above code should work..

Try testing it and see what works best for your situation.

Create an Account

Sign In

Animated Rollovers not functioning properly

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Recently Browsing 0 members

HTML5 / JS

Learning

Support

Our Company