Jump to content
Search Community

Prevent rollover state until button is visible?

ohem 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

Hi, I'm still very new to GSAP; I'm much more familiar with timeline-based animation but trying to get familiar with GSAP too.  

 

In a test I made, I have a button that expands when the main div is rolled over.  The button is not going to appear until the end of a longer animation, so I'm wondering how to prevent the mouseenter & mouseleave functions from happening before the button is visible?

 

Currently, if you roll over before the red button appears, when the red button does appear it's already scaled and I just want to prevent that.

 

Thanks so much for any suggestions!

See the Pen WvMOaZ by ohem (@ohem) on CodePen

Link to comment
Share on other sites

Hi,

 

A solution could be to set up a boolean, change it when the initial animation is completed and use it to prevent the play/reverse of the element's animation:

var hoverBool = false;

TweenLite.from("#red", .7, {
  autoAlpha: 0,
  delay: 2.2,
  ease: Power3.easeOut,
  onComplete: function(){hoverBool = true;}
});

//rollover CTA


var btnOver = TweenLite.to('#red', .4, {
  ease: Back.easeOut,
  scaleX: 1.2,
  scaleY: 1.2,
  paused: true
});

$("#black").on("mouseenter", function() {
  if(hoverBool){  
    btnOver.play();
  }
}).on("mouseleave", function() {
  if(hoverBool){  
    btnOver.reverse();
  }
});

Another option would be to attach the event handler using the onComplete callback:

//rollover CTA

var btnOver = TweenLite.to('#red', .4, {
  ease: Back.easeOut,
  scaleX: 1.2,
  scaleY: 1.2,
  paused: true
});

TweenLite.from("#red", .7, {
  autoAlpha: 0,
  delay: 2.2,
  ease: Power3.easeOut,
  onComplete: allowHover
});

function allowHover() {
  $("#black").on("mouseenter", function() {
    btnOver.play();
  }).on("mouseleave", function() {
    btnOver.reverse();
  });
}
  • Like 4
Link to comment
Share on other sites

in addition , you can use this method too :

 

var btnOver = TweenLite.to('#red',.4, {ease:Back.easeOut,scale:1.2,paused:true});
var Tween = TweenLite.from("#red",.7,{delay:2,autoAlpha:0});

$("#black").hover(over, out);
function over(){if(Tween.progress()==1){ btnOver.play() }};
function out(){if(Tween.progress()==1){ btnOver.reverse() }};
// if Tween was ( TweenMax + repeat ) you should to use .totalProgress() 
  • Like 2
Link to comment
Share on other sites

  • 2 weeks later...

So, I wanted to update the rollover code so that it doesn't rely on JQuery.  Both of these versions seem to work fine: 

See the Pen bdmvoK by ohem (@ohem) on CodePen

See the Pen jPexwE by ohem (@ohem) on CodePen

 

But I was just wondering if there's any issue with doing it like this, or if there's a better/cleaner way I should be doing it?  I'm still new to GSAP & I just want to be sure there's nothing horribly wrong with this.

 

I was also wondering, how would I do the same thing using TimelineLite?

 

Thanks again so much for the help! :)

Link to comment
Share on other sites

Actually I'm noticing a weird glitch with both new methods where the button flickers slightly if I roll directly over it.  It's fine when I just roll over the main banner.  Any suggestions on how to fix this would be very much appreciated.  Thanks again.

Link to comment
Share on other sites

Hi ohem,

 

What's going on is that your using mouseover, which is restarting the tween every time you move the mouse. To get a hover effect you should use mouseenter and mouseleave. Also, it's probably better to use addEventListener for your events so that you can use more than one event handler.

 

Outside of that, most of what you did is just fine. But since you were wondering about a better/cleaner way to do things, I changed some things around and added some comments. One thing you can do to speed up your code is to select elements beforehand if you are going to keep using them over again, so I added some functions to help you out since you're not using jQuery.

 

See the Pen QbZrgW by osublake (@osublake) on CodePen

  • Like 2
Link to comment
Share on other sites

Quick question, if I wanted to do an animation using TimelineLite instead of TweenLite, would this be the correct way to do it?  

See the Pen jPexQq by ohem (@ohem) on CodePen

 

If the button was appearing after a longer animation, where would I put the position parameter within that code?  

 

Thanks again!

Link to comment
Share on other sites

If I'm understanding you correctly, all you need to do is just add a matching label on the from tween. If you don't specify a time for the label, it will be added to the end of the timeline, which will be after the scale tween I just added. If that doesn't make sense, check out the position parameter video and examples. It's much easier to understand when you can visualize it.

 

Video and examples: http://greensock.com/position-parameter

Updated CodePen: 

See the Pen BNqxMa by osublake (@osublake) on CodePen

  • Like 2
Link to comment
Share on other sites

Hey, I was just trying out a few different methods of doing the same thing, just trying to get more familiar & seeing what seems simplest.  I tried one version that combined both my example and yours, and it seems like it should work... but for some reason the text isn't changing color on hover, even though the button is: 

See the Pen rVqopj by ohem (@ohem) on CodePen

 

I know the other examples work fine, but I'm just having trouble understanding what the problem could be with this one.  Is there something that I'm overlooking?

 

Thanks again for the assistance!

Link to comment
Share on other sites

  • 2 months later...

Hi, I'm not sure if I should make a new thread for this.  I got some great help with this earlier this summer, and I have used rollover states on a few projects with no issue.

 

However, now I want to do something slightly different; I want to have a button shimmer at the end of my animation, and then also use that same animation for the rollover state.  

 

So far this works, but only the first time.  If you mouse over more than once it won't play again, and I can't seem to figure out how to reset the HoverAnim timeline once it ends.  Here is a simplified example: 

See the Pen OygqbJ by ohem (@ohem) on CodePen

 

Any suggestions are very much appreciated.

Link to comment
Share on other sites

Also I just realized that my example above (

See the Pen OygqbJ by ohem (@ohem) on CodePen

) does not work at all in Safari unless I turn off "use strict" in the JavaScript.  I never encountered this problem before and I can't figure out why would be any issues with such a simple banner.

 

If anybody can possibly shed some light on why "use strict" is breaking the banner I would be very grateful.

 

Thanks so much.

 

EDIT: I accidentally had two eases in one tween, so that solves the Safari mystery.  Still unclear what to do about the rollover shimmer though.

Edited by ohem
Link to comment
Share on other sites

Hi, I'm not sure if I should make a new thread for this.  I got some great help with this earlier this summer, and I have used rollover states on a few projects with no issue.

 

However, now I want to do something slightly different; I want to have a button shimmer at the end of my animation, and then also use that same animation for the rollover state.  

 

So far this works, but only the first time.  If you mouse over more than once it won't play again, and I can't seem to figure out how to reset the HoverAnim timeline once it ends.  Here is a simplified example: 

See the Pen OygqbJ by ohem (@ohem) on CodePen

 

Any suggestions are very much appreciated.

So, I think I fixed this by setting the hoverAnim timeline to restart instead of play on mouse enter: 

See the Pen bVRPLe by ohem (@ohem) on CodePen

 

But now I'm just wondering if there's a way to not have the shimmer animation restart until it ends; currently if you mouse over multiple times while it's still playing, the fromTo tween looks kind of awkward when it jumps back to the starting point.  

 

I also tried to simplify the code so it's less repetitive & just uses the same hoverAnim timeline both times:

See the Pen avwgaR by ohem (@ohem) on CodePen

but I'm still not sure how to make the tween not restart until it has ended.  

 

Does that make sense?  Any help is much appreciated; if it's better to make a new thread please let me know.  

 

Thanks much! 

Link to comment
Share on other sites

Quick follow up question.   If I wanted to make the button visible (and hover-able) the whole time, is there a way to include the hoverAnim function in the timeline but delay it slightly?  


 


I made another version where the hover animation plays immediately after the previous animation completes, but I want to delay it slightly (0.75 seconds).  I’m not sure where/how to add the delay to a function in the timeline though.  Is this possible?  Codepen here: 

See the Pen avybpY by ohem (@ohem) on CodePen


 


(As always, the amazing support is greatly appreciated!)  :)


Link to comment
Share on other sites

  • 7 months later...

Hello,

I am trying to add a simple rollover animation to a button at the end of my banner as per this example:

See the Pen avybpY by ohem (@ohem) on CodePen

This link seems to be exactly what I want but when I add it to my script it fades in succesfully but it doesn't do any rollover animation.

For now I have just used #myAd_red" as a test button over the top of my original script.

I am a complete novice so if anyone can please spot any errors in my code I'd greatly appreciate it. (the rollover button code is at the bottom but I wanted to keep it in context incase there is some conflicts.

Many thanks.

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>GSAP animation</title>
<style type="text/css">
@import url(http://fonts.googleapis.com/css?family=Open+Sans:800);
body {
	padding: 10px;
	font-family: 'Open Sans', sans-serif;
}
a#myAdLink {
	display: inline-block;
	background-color: #666666;
}
#myAd {
	width: 300px;
	height: 250px;
	border: solid 1px #333;
	position: relative;
	overflow: hidden;
	opacity: 0;
}
#myAd #myAd_flame {
	position: absolute;
	background: url(flame3.jpg) no-repeat 0px 0px;
	width: 600px;
	height: 157px;
	top: 50px;
	left: -370px;
}
#myAd #myAd_marker {
	position: absolute;
	background: url(vue_cutOut.svg) no-repeat 0px 0px;
	width: 480px;
	height: 400px;
	top: -75px;
	left: -93px;
 //opacity:0.5;
}
#myAd #myAd_tagLine {
	position: absolute;
	background: url(tagLine.svg) no-repeat 0px 0px;
	width: 131px;
	height: 7px;
	top: 158px;
	left: 85px;
}
#myAd #myAd_date {
	position: absolute;
	background: url(date.svg) no-repeat 0px 0px;
	width: 211px;
	height: 42px;
	top: 20px;
	left: 42px;
}
#myAd #myAd_button {
	position: absolute;
	background: url(button.svg) no-repeat 0px 0px;
	width: 132px;
	height: 46px;
	top: 185px;
	left: 85px;
}
#myAd #myAd_red {
	z-index: 1;
	width: 140px;
	height: 40px;
	position: absolute;
	bottom: 20px;
	right: 20px;
	background-color: red;
	text-align: center;
	line-height: 40px;
}
</style>
</head>
<body>
<a id="myAdLink" href="http://google.com">
<div id="myAd">
  <div class="myAd_Img" id="myAd_flame"></div>
  <div class="myAd_Img" id="myAd_marker"></div>
  <div class="myAd_Img" id="myAd_tagLine"></div>
  <div class="myAd_Img" id="myAd_date"></div>
  <div class="myAd_Img" id="myAd_button"></div>
  <div class="myAd_Img" id="myAd_red"></div>
</div>
</a> 
<script type="text/javascript" src="TweenMax.min.js"></script> 
<script type="text/javascript">

(function(){
	var tl1 = new TimelineMax();
	
	tl1
	.to('#myAd',.4, {opacity:1})
	.from('#myAd_flame',1.2, {scale:3,left:600, ease: Power2.easeOut},'-=.5')
	.from('#myAd_marker',1.2, {scale:5, ease: Power2.easeOut},'-=1')
	.from('#myAd_tagLine',1.2, {opacity:0, ease: Power2.easeOut},'-=.5')
	.from('#myAd_date',5, {opacity:0, scale:.5, ease: Power4.easeOut},'-=1.5')
	.from('#myAd_button',1, {opacity:0, scale:0.5, ease: Power4.easeOut},'-=4');
	

//rollover CTA

var btnOver = TweenLite.to('#myAd_red', .4, {
  ease: Back.easeOut,
  scaleX: 1.2,
  scaleY: 1.2,
  paused: true
});

TweenLite.from("#myAd_red", .7, {
  autoAlpha: 0,
  delay: 2.2,
  ease: Power3.easeOut,
  onComplete: function() {
    $("#red").on("mouseenter", function() {
      btnOver.play();
    }).on("mouseleave", function() {
      btnOver.reverse();
    });
  }
});




}());
</script>
</body>
</html>

Link to comment
Share on other sites

 

Hello,

I am trying to add a simple rollover animation to a button at the end of my banner as per this example:

See the Pen avybpY by ohem (@ohem) on CodePen

This link seems to be exactly what I want but when I add it to my script it fades in succesfully but it doesn't do any rollover animation.

For now I have just used #myAd_red" as a test button over the top of my original script.

I am a complete novice so if anyone can please spot any errors in my code I'd greatly appreciate it. (the rollover button code is at the bottom but I wanted to keep it in context incase there is some conflicts.

Many thanks.

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>GSAP animation</title>
<style type="text/css">
@import url(http://fonts.googleapis.com/css?family=Open+Sans:800);
body {
	padding: 10px;
	font-family: 'Open Sans', sans-serif;
}
a#myAdLink {
	display: inline-block;
	background-color: #666666;
}
#myAd {
	width: 300px;
	height: 250px;
	border: solid 1px #333;
	position: relative;
	overflow: hidden;
	opacity: 0;
}
#myAd #myAd_flame {
	position: absolute;
	background: url(flame3.jpg) no-repeat 0px 0px;
	width: 600px;
	height: 157px;
	top: 50px;
	left: -370px;
}
#myAd #myAd_marker {
	position: absolute;
	background: url(vue_cutOut.svg) no-repeat 0px 0px;
	width: 480px;
	height: 400px;
	top: -75px;
	left: -93px;
 //opacity:0.5;
}
#myAd #myAd_tagLine {
	position: absolute;
	background: url(tagLine.svg) no-repeat 0px 0px;
	width: 131px;
	height: 7px;
	top: 158px;
	left: 85px;
}
#myAd #myAd_date {
	position: absolute;
	background: url(date.svg) no-repeat 0px 0px;
	width: 211px;
	height: 42px;
	top: 20px;
	left: 42px;
}
#myAd #myAd_button {
	position: absolute;
	background: url(button.svg) no-repeat 0px 0px;
	width: 132px;
	height: 46px;
	top: 185px;
	left: 85px;
}
#myAd #myAd_red {
	z-index: 1;
	width: 140px;
	height: 40px;
	position: absolute;
	bottom: 20px;
	right: 20px;
	background-color: red;
	text-align: center;
	line-height: 40px;
}
</style>
</head>
<body>
<a id="myAdLink" href="http://google.com">
<div id="myAd">
  <div class="myAd_Img" id="myAd_flame"></div>
  <div class="myAd_Img" id="myAd_marker"></div>
  <div class="myAd_Img" id="myAd_tagLine"></div>
  <div class="myAd_Img" id="myAd_date"></div>
  <div class="myAd_Img" id="myAd_button"></div>
  <div class="myAd_Img" id="myAd_red"></div>
</div>
</a> 
<script type="text/javascript" src="TweenMax.min.js"></script> 
<script type="text/javascript">

(function(){
	var tl1 = new TimelineMax();
	
	tl1
	.to('#myAd',.4, {opacity:1})
	.from('#myAd_flame',1.2, {scale:3,left:600, ease: Power2.easeOut},'-=.5')
	.from('#myAd_marker',1.2, {scale:5, ease: Power2.easeOut},'-=1')
	.from('#myAd_tagLine',1.2, {opacity:0, ease: Power2.easeOut},'-=.5')
	.from('#myAd_date',5, {opacity:0, scale:.5, ease: Power4.easeOut},'-=1.5')
	.from('#myAd_button',1, {opacity:0, scale:0.5, ease: Power4.easeOut},'-=4');
	

//rollover CTA

var btnOver = TweenLite.to('#myAd_red', .4, {
  ease: Back.easeOut,
  scaleX: 1.2,
  scaleY: 1.2,
  paused: true
});

TweenLite.from("#myAd_red", .7, {
  autoAlpha: 0,
  delay: 2.2,
  ease: Power3.easeOut,
  onComplete: function() {
    $("#red").on("mouseenter", function() {
      btnOver.play();
    }).on("mouseleave", function() {
      btnOver.reverse();
    });
  }
});




}());
</script>
</body>
</html>

You're using the version from the beginning of this thread that relies on JQuery, but you haven't linked to Jquery in your document.

 

Add this:

<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.5/TweenMax.min.js'></script>

Or just use one of the other versions that doesn't require Jquery.  I went through like 20 variations of that button rollover code before finding the perfect one! (With amazing help from these forums).

 

You should be able to repurpose this one for your needs: 

See the Pen QbZrgW by osublake (@osublake) on CodePen

  • Like 1
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...