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

I just realised that I pasted the wrong link to the button I was using. 

It's actually similar to the example you provide. I still can't get it to work even if I add the JS Query document. I am obviously missing something but since I am pretty much cutting and pasting I have no idea what?!

<!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" src="TweenLite.min.js"></script> 
<script type="text/javascript" src="jquery.gsap.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

If you put this on Codepen it would be a lot easier to troubleshoot.

 

But the main issue I can see from looking at that is that you're targeting "#red" with your rollover state, but you don't actually have a div called "red".  Try changing it to match the ID of the div you want to animate.

Link to comment
Share on other sites

Thank you for your help so far it has been really helpful spotting the stupid mistakes I am making. I have made good progress

but I have a couple of questions which will help finalise this. So far I have 2 options for a button both which work but both have issues which I need to iron out depending if its possible.

 

The first is just a straight CSS button no JS required. The problem here is that it causes the GSAP on the button to stop working. The rollover works fine but so I guess I need to find an alternative way to animate it in (fade and scale) at a specific time . Is this possible?

See the Pen vNEpYm by ArnoldKos (@ArnoldKos) on CodePen

 

 

Another option I have which works great is here:

 

 

 

The problem I have with this one is that the local query.min.js file is pretty huge and I can't locate a smaller version that works with this particular button.

The one that I downloaded to work is 100K. However the bundled one that comes with GS which is only 3k doesn't seem to work?!

I basically just need //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js

Is there a way to download it directly? I only seem to be able to cut and paste the code. 

I am creating banners so I presume I need the files locally for the publisher.

 

Please help thanks! 

Link to comment
Share on other sites

Thank you for your help so far it has been really helpful spotting the stupid mistakes I am making. I have made good progress

but I have a couple of questions which will help finalise this. So far I have 2 options for a button both which work but both have issues which I need to iron out depending if its possible.

 

The first is just a straight CSS button no JS required. The problem here is that it causes the GSAP on the button to stop working. The rollover works fine but so I guess I need to find an alternative way to animate it in (fade and scale) at a specific time . Is this possible?

See the Pen vNEpYm by ArnoldKos (@ArnoldKos) on CodePen

 

 

Another option I have which works great is here:

 

 

 

The problem I have with this one is that the local query.min.js file is pretty huge and I can't locate a smaller version that works with this particular button.

The one that I downloaded to work is 100K. However the bundled one that comes with GS which is only 3k doesn't seem to work?!

I basically just need //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js

Is there a way to download it directly? I only seem to be able to cut and paste the code. 

I am creating banners so I presume I need the files locally for the publisher.

 

Please help thanks! 

 

 

 

You don't have to use Jquery.  If you look at the first page of the thread; there are multiple variations of rollover animations with straight Javascript that don't require Jquery.  Here is one example that does exactly the same thing as the other codepen you referenced but without Jquery: 

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

 

If you do use Jquery, you should link to the Google-hosted CDN to take advantage of caching instead of saving a copy locally: https://developers.google.com/speed/libraries/

 

The 3k plugin that's part of gsap is just a pugin that works with Jquery, not a replacement for Jquery itself. https://greensock.com/jquery-gsap-plugin

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