Jump to content
GreenSock

sorciereus

Animated Rollovers not functioning properly

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

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

  • Like 1
Link to comment
Share on other sites

.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>
  • Like 3
Link to comment
Share on other sites

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.

  • Like 3
Link to comment
Share on other sites

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. 

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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 - 

Link to comment
Share on other sites

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/

 
:)
  • Like 1
Link to comment
Share on other sites

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! 

Link to comment
Share on other sites

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 :)

Link to comment
Share on other sites

  • 3 weeks later...

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

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

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