Jump to content
Search Community

First event in TimeLine using .Click not firing

Ronen 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

Hey all,

 

Relatively fresh in the web-dev world, really enjoying using greensock!

I've been working on the website for my company. One of the features of the site will be a colour chooser/builder, allowing visitors to choose/design there own variation of one of our products (Mountain Bike related in this case).

The idea is, you select the colour of the component you want, and it tweens to the select colour. I need it to fade out of the current colour, then into the selected.

I've got it working, although the images I have are slightly large and un-optimized at the moment.

 

I've created a demo site here: http://goo.gl/rvuSco so you can see the effect I'm talking about.

 

The issue I've run into, is that when a visitor first comes to the site, prior to anything occurring on the timeLine, the fade out/in tween doesn't function. It seems to just ignore it. I've come up with a fix, by forcing a dummy tween to full opacity when the page loads, but is this correct? all subsequent tweens work great, but for some reason the first one has an issue.

 

I've commented out my fix, to illustrate the issue on http://goo.gl/rvuSco.

 

HTML code with JS:

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Go Greensock Go!</title>
	<link href="/GreenSockForum/css/placer.css" rel="stylesheet" type="text/css">
</head>
 
<body>
	<div class="fullPage">
		<div class="colourSelector">
			<div id="ringDisplay">
				<img id="ringImg" src="/GreenSockForum/img/ringRenders/BlackRing.png"/>
			</div>
			<div id="bashDisplay">
				<img id="bashImg" src="/GreenSockForum/img/ringRenders/BlackBash.png"/>
			</div>
			<div class="bashColours">
				<p>Bash Colours</p>
				<div class="colourBox" id="squareBlackBash"></div>
				<div class="colourBox" id="squareRedBash"></div>
				<div class="colourBox" id="squareGoldBash"></div>
				<div class="colourBox" id="squareGreenBash"></div>
				<div class="colourBox" id="squareBlueBash"></div>
				<div class="colourBox" id="squareSilverBash"></div>
				<div class="colourBox" id="squareNoneBash"></div>
			</div>
			<div class="ringColours">
				<p>Ring Colours</p>
				<div class="colourBox" id="squareBlackRing"></div>
				<div class="colourBox" id="squareRedRing"></div>
				<div class="colourBox" id="squareGoldRing"></div>
				<div class="colourBox" id="squareGreenRing"></div>
				<div class="colourBox" id="squareBlueRing"></div>
				<div class="colourBox" id="squareSilverRing"></div>
				<div class="colourBox" id="squareNoneRing"></div>
			</div>
		</div>
	</div>
<script type="text/javascript" src="/GreenSockForum/js/greensock/plugins/CSSPlugin.min.js"></script>
<script type="text/javascript" src="/GreenSockForum/js/greensock/TweenMax.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
 
<script>
$(document).ready(function() {
	var isAnimating = false;
    var tl = new TimelineLite({
		onComplete: function() {
			isAnimating = false;
		}
	});
	//tl.to("#bashImg", 0.5, {opacity:1}); //<--Required to fix issue
    $( "#squareBlackBash" ).click(function() {
		if (isAnimating) return;
		isAnimating = true;
  		tl.to("#bashImg", 0.5, {opacity:0});
  		tl.add(function() { 
			$("#bashImg").hide();
			$("#bashImg").attr('src','/GreenSockForum/img/ringRenders/BlackBash.png');
			$("#bashImg").show();
		})
		tl.to("#bashImg", 0.5, {opacity:1});
	});
	$( "#squareRedBash" ).click(function() {
		if (isAnimating) return;
		isAnimating = true;
  		tl.to($("#bashImg"), 0.5, {opacity:0});
  		tl.add(function() {
			$("#bashImg").hide();
			$("#bashImg").attr('src','/GreenSockForum/img/ringRenders/RedBash.png');
			$("#bashImg").show();
		})
		tl.to($("#bashImg"), 0.5, {opacity:1});
	});
	$( "#squareBlueBash" ).click(function() {
		if (isAnimating) return;
		isAnimating = true;
  		tl.to("#bashImg", 0.5, {opacity:0});
  		tl.add(function() {
			$("#bashImg").hide();
			$("#bashImg").attr('src','/GreenSockForum/img/ringRenders/BlueBash.png');
			$("#bashImg").show();
		})
		tl.to("#bashImg", 0.5, {opacity:1});	
	});
	$( "#squareGreenBash" ).click(function() {
		if (isAnimating) return;
		isAnimating = true;
  		tl.to("#bashImg", 0.5, {opacity:0});
  		tl.add(function() {
			$("#bashImg").hide();
			$("#bashImg").attr('src','/GreenSockForum/img/ringRenders/GreenBash.png');
			$("#bashImg").show();
		})
		tl.to("#bashImg", 0.5, {opacity:1});
	});
	$( "#squareGoldBash" ).click(function() {
		if (isAnimating) return;
		isAnimating = true;
  		tl.to("#bashImg", 0.5, {opacity:0});
  		tl.add(function() {
			$("#bashImg").hide();
			$("#bashImg").attr('src','/GreenSockForum/img/ringRenders/GoldBash.png');
			$("#bashImg").show();
		})
		tl.to("#bashImg", 0.5, {opacity:1});
	});
	$( "#squareSilverBash" ).click(function() {
		if (isAnimating) return;
		isAnimating = true;
  		tl.to("#bashImg", 0.5, {opacity:0});
  		tl.add(function() {
			$("#bashImg").hide();
			$("#bashImg").attr('src','/GreenSockForum/img/ringRenders/SilverBash.png');
			$("#bashImg").show();
		})
		tl.to("#bashImg", 0.5, {opacity:1});
	});
	$( "#squareNoneBash" ).click(function() {
		if (isAnimating) return;
		isAnimating = true;
  		tl.to("#bashImg", 0.5, {opacity:0});
	});
    $( "#squareBlackRing" ).click(function() {
		if (isAnimating) return;
		isAnimating = true;
  		tl.to("#ringImg", 0.5, {opacity:0});
  		tl.add(function() {
			$("#ringImg").hide();
			$("#ringImg").attr('src','/GreenSockForum/img/ringRenders/BlackRing.png');
			$("#ringImg").show();
		})
		tl.to("#ringImg", 0.5, {opacity:1});
	});
	$( "#squareRedRing" ).click(function() {
		if (isAnimating) return;
		isAnimating = true;
  		tl.to("#ringImg", 0.5, {opacity:0});
  		tl.add(function() {
			$("#ringImg").hide();
			$("#ringImg").attr('src','/GreenSockForum/img/ringRenders/RedRing.png');
			$("#ringImg").show();
		})
		tl.to("#ringImg", 0.5, {opacity:1});
	});
	$( "#squareBlueRing" ).click(function() {
		if (isAnimating) return;
		isAnimating = true;
  		tl.to("#ringImg", 0.5, {opacity:0});
  		tl.add(function() {
			$("#ringImg").hide();
			$("#ringImg").attr('src','/GreenSockForum/img/ringRenders/BlueRing.png');
			$("#ringImg").show();
		})
		tl.to("#ringImg", 0.5, {opacity:1});	
	});
	$( "#squareGreenRing" ).click(function() {
		if (isAnimating) return;
		isAnimating = true;
  		tl.to("#ringImg", 0.5, {opacity:0});
  		tl.add(function() {
			$("#ringImg").hide();
			$("#ringImg").attr('src','/GreenSockForum/img/ringRenders/GreenRing.png');
			$("#ringImg").show();
		})
		tl.to("#ringImg", 0.5, {opacity:1});
	});
	$( "#squareGoldRing" ).click(function() {
		if (isAnimating) return;
		isAnimating = true;
  		tl.to("#ringImg", 0.5, {opacity:0});
  		tl.add(function() {
			$("#ringImg").hide();
			$("#ringImg").attr('src','/GreenSockForum/img/ringRenders/GoldRing.png');
			$("#ringImg").show();
		})
		tl.to("#ringImg", 0.5, {opacity:1});
	});
	$( "#squareSilverRing" ).click(function() {
		if (isAnimating) return;
		isAnimating = true;
  		tl.to("#ringImg", 0.5, {opacity:0});
  		tl.add(function() {
			$("#ringImg").hide();
			$("#ringImg").attr('src','/GreenSockForum/img/ringRenders/SilverRing.png');
			$("#ringImg").show();
		})
		tl.to("#ringImg", 0.5, {opacity:1});
	});
	$( "#squareNoneRing" ).click(function() {
		if (isAnimating) return;
		isAnimating = true;
  		tl.to("#ringImg", 0.5, {opacity:0});
	});
    
});
</script>
 
</body>
</html> 

My hack-job lovely css:

* {margin:0;}
html,body {height: 100%;}
.fullPage {
	position: relative;
	height:100%;
	width:100%;	
	box-shadow: 0px 2px 10px;
	background-color: #FFFFFF;
	background-image:url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMDAlJyBoZWlnaHQ9JzEwMCUnICB4bWxuczp4bGluaz0naHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayc+Cgk8cmFkaWFsR3JhZGllbnQgaWQ9J2cnIGdyYWRpZW50VW5pdHM9J3VzZXJTcGFjZU9uVXNlJyBjeD0nMCcgY3k9JzAnIHI9JzQyJSc+CgkJPHN0b3Agb2Zmc2V0PScwJScgc3RvcC1vcGFjaXR5PScwJyBzdG9wLWNvbG9yPScjMDAwMDAwJyAvPgoJCTxzdG9wIG9mZnNldD0nMTAwJScgc3RvcC1vcGFjaXR5PScxJyAgc3RvcC1jb2xvcj0nIzY2MmYyZicgLz4KCTwvcmFkaWFsR3JhZGllbnQ+Cgk8cmFkaWFsR3JhZGllbnQgaWQ9J2cyJyBncmFkaWVudFVuaXRzPSd1c2VyU3BhY2VPblVzZScgY3g9JzAnIGN5PScwJyByPSc0MiUnPgoJCTxzdG9wIG9mZnNldD0nMCUnIHN0b3Atb3BhY2l0eT0nLjEnIHN0b3AtY29sb3I9JyMwMDAwMDAnIC8+CgkJPHN0b3Agb2Zmc2V0PSc1MCUnIHN0b3Atb3BhY2l0eT0nLjUnICBzdG9wLWNvbG9yPScjNjYyZjJmJyAvPgoJCTxzdG9wIG9mZnNldD0nMTAwJScgc3RvcC1vcGFjaXR5PScuOScgIHN0b3AtY29sb3I9JyM2NjJmMmYnIC8+Cgk8L3JhZGlhbEdyYWRpZW50PgoJPHJlY3QgeD0nMCcgeT0nMCcgd2lkdGg9JzExMCUnIGhlaWdodD0nMTEwJScgZmlsbD0ndXJsKCNnKScvPgoJPHN2ZyB4PScwJyB5PScwJyBvdmVyZmxvdz0ndmlzaWJsZSc+CgkJPGxpbmUgaWQ9J2wnIHgxPScwJScgeDI9JzAnIHkxPScwJyB5Mj0nMTAwMCUnIHN0eWxlPSdzdHJva2U6I2Q5ZDZjMzsgc3Ryb2tlLXdpZHRoOjIuNDY7JyB0cmFuc2Zvcm09J3JvdGF0ZSgwKScvPgoJCTx1c2UgeGxpbms6aHJlZj0nI2wnIHRyYW5zZm9ybT0ncm90YXRlKC01LjI5NDExNzY0NzA1ODgyMyknIC8+CgkJPHVzZSB4bGluazpocmVmPScjbCcgdHJhbnNmb3JtPSdyb3RhdGUoLTEwLjU4ODIzNTI5NDExNzY0NyknIC8+CgkJPHVzZSB4bGluazpocmVmPScjbCcgdHJhbnNmb3JtPSdyb3RhdGUoLTE1Ljg4MjM1Mjk0MTE3NjQ3MSknIC8+CgkJPHVzZSB4bGluazpocmVmPScjbCcgdHJhbnNmb3JtPSdyb3RhdGUoLTIxLjE3NjQ3MDU4ODIzNTI5MyknIC8+CgkJPHVzZSB4bGluazpocmVmPScjbCcgdHJhbnNmb3JtPSdyb3RhdGUoLTI2LjQ3MDU4ODIzNTI5NDExNiknIC8+CgkJPHVzZSB4bGluazpocmVmPScjbCcgdHJhbnNmb3JtPSdyb3RhdGUoLTMxLjc2NDcwNTg4MjM1Mjk0MiknIC8+CgkJPHVzZSB4bGluazpocmVmPScjbCcgdHJhbnNmb3JtPSdyb3RhdGUoLTM3LjA1ODgyMzUyOTQxMTc2KScgLz4KCQk8dXNlIHhsaW5rOmhyZWY9JyNsJyB0cmFuc2Zvcm09J3JvdGF0ZSgtNDIuMzUyOTQxMTc2NDcwNTkpJyAvPgoJCTx1c2UgeGxpbms6aHJlZj0nI2wnIHRyYW5zZm9ybT0ncm90YXRlKC00Ny42NDcwNTg4MjM1Mjk0MSknIC8+CgkJPHVzZSB4bGluazpocmVmPScjbCcgdHJhbnNmb3JtPSdyb3RhdGUoLTUyLjk0MTE3NjQ3MDU4ODIzKScgLz4KCQk8dXNlIHhsaW5rOmhyZWY9JyNsJyB0cmFuc2Zvcm09J3JvdGF0ZSgtNTguMjM1Mjk0MTE3NjQ3MDYpJyAvPgoJCTx1c2UgeGxpbms6aHJlZj0nI2wnIHRyYW5zZm9ybT0ncm90YXRlKC02My41Mjk0MTE3NjQ3MDU4ODQpJyAvPgoJCTx1c2UgeGxpbms6aHJlZj0nI2wnIHRyYW5zZm9ybT0ncm90YXRlKC02OC44MjM1Mjk0MTE3NjQ3MSknIC8+CgkJPHVzZSB4bGluazpocmVmPScjbCcgdHJhbnNmb3JtPSdyb3RhdGUoLTc0LjExNzY0NzA1ODgyMzUyKScgLz4KCQk8dXNlIHhsaW5rOmhyZWY9JyNsJyB0cmFuc2Zvcm09J3JvdGF0ZSgtNzkuNDExNzY0NzA1ODgyMzUpJyAvPgoJCTx1c2UgeGxpbms6aHJlZj0nI2wnIHRyYW5zZm9ybT0ncm90YXRlKC04NC43MDU4ODIzNTI5NDExNyknIC8+CgkJPHVzZSB4bGluazpocmVmPScjbCcgdHJhbnNmb3JtPSdyb3RhdGUoLTkwKScgLz4KCTwvc3ZnPgoJPHJlY3QgeD0nMCcgeT0nMCcgd2lkdGg9JzExMCUnIGhlaWdodD0nMTEwJScgZmlsbD0ndXJsKCNnMiknLz4KPC9zdmc+');
}
.colourSelector {
text-align:center;
position: relative;
background-color: #0c0ceb;
background-image:url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScyNzYnIGhlaWdodD0nMjc2JyB2aWV3Qm94PScwIDAgMjc2IDI3Nic+Cgk8ZGVmcz4KCQk8cGF0dGVybiBpZD0nYmx1ZXN0cmlwZScgcGF0dGVyblVuaXRzPSd1c2VyU3BhY2VPblVzZScgeD0nMCcgeT0nMCcgd2lkdGg9JzU1LjInIGhlaWdodD0nNTUuMicgdmlld0JveD0nMCAwIDExMC40IDExMC40JyA+CgkJPHJlY3Qgd2lkdGg9JzExMCUnIGhlaWdodD0nMTEwJScgZmlsbD0nIzBjMGNlYicvPgoJCQk8cGF0aCBkPSdNMSwxaDExMC40djExMC40aC0xMTAuNHYtMTEwLjQnIGZpbGwtb3BhY2l0eT0nMCcgc3Ryb2tlLXdpZHRoPScxLjc4JyBzdHJva2UtZGFzaGFycmF5PScwLDIsMicgc3Ryb2tlPScjZmZmZmZmJy8+CgkJPC9wYXR0ZXJuPiAKCQk8ZmlsdGVyIGlkPSdmdXp6JyB4PScwJyB5PScwJz4KCQkJPGZlVHVyYnVsZW5jZSB0eXBlPSd0dXJidWxlbmNlJyByZXN1bHQ9J3QnIGJhc2VGcmVxdWVuY3k9Jy4yIC4zJyBudW1PY3RhdmVzPSc1JyBzdGl0Y2hUaWxlcz0nc3RpdGNoJy8+CgkJCTxmZUNvbG9yTWF0cml4IHR5cGU9J3NhdHVyYXRlJyBpbj0ndCcgdmFsdWVzPScwJy8+CgkJPC9maWx0ZXI+Cgk8L2RlZnM+Cgk8cmVjdCB3aWR0aD0nMTAwJScgaGVpZ2h0PScxMDAlJyBmaWxsPSd1cmwoI2JsdWVzdHJpcGUpJy8+CjxyZWN0IHdpZHRoPScxMDAlJyBoZWlnaHQ9JzEwMCUnIGZpbHRlcj0ndXJsKCNmdXp6KScgb3BhY2l0eT0nMC4xOCcvPgo8L3N2Zz4K');
height:85%;
width:60%;
margin-left:20%;
top:10%;
border-radius:50px;
box-shadow: 5px 5px 20px;
}
.ringColours {
color:white;
position: absolute;
height:90%;
width:40px;
right:5%;
top:5%;
}
.bashColours {
color:white;
position: absolute;
height:90%;
width:40px;
left:5%;
top:5%;
}
.colourBox {
position:relative;
margin-top:7%;
width:40px;
height:40px;
border: 2px solid white;
}
.colourBox:hover {
    border: 4px solid yellow;
}
#ringDisplay {
	max-width: 500px;
	position:absolute;
	
	left:-10%;
	right:0;
	top:5%;
	bottom:0;
	margin:auto;
}
#bashDisplay {
	max-width: 500px;
	position:absolute;
	
	left:-10%;
	right:0;
	top:5%;
	bottom:0;
	margin:auto;
}
#squareBlackBash {background-color: black;}
#squareBlueBash {background-color: blue;}
#squareRedBash {background-color: red;}
#squareGoldBash {background-color: gold;}
#squareGreenBash {background-color: green;}
#squareSilverBash {background-color: silver;}
#squareBlackRing {background-color: black;}
#squareBlueRing {background-color: blue;}
#squareRedRing {background-color: red;}
#squareGoldRing {background-color: gold;}
#squareGreenRing {background-color: green;}
#squareSilverRing {background-color: silver;}

Thanks in advance for any assistance. It's working, so I guess its ok to do the dummy tween initially, but I was just wondering if there was a better way to do it.

 

Also, any other hints/tips/tricks/recommendations are greatly appreciated!

 

Cheers!

 

~Ronen

Link to comment
Share on other sites

hello, and welcome to the forums..

 

maybe your images are not fully loaded, even though the DOM is ready.. have you tried adding a window.load event?

// check when DOM is ready
$(document).ready(function(){
       
       // check when all images, links and assets have been loaded
       $(window).on('load',function(){
               // place code here 
               console.log('window loaded');
      });
      console.log('DOM ready');
});

let us know if that helped when you test again?

Link to comment
Share on other sites

Yeah, it really seems like its a loading issue. You should probably pre-load all the images if you want a smooth experience.

 

If I am looking at the red ring and then quickly click the green box the red ring will fade out and then fade back in. A few moments later the green ring will appear abruptly.

 

If you want to further verify that the timeline is working and the events / functions are being called just add a console.log() to one of the functions in your timeline and test

 

$( "#squareBlueRing" ).click(function() {
if (isAnimating) return;
isAnimating = true;
   tl.to("#ringImg", 0.5, {opacity:0});
   tl.add(function() {


console.log("BLUE RING!!!!");


$("#ringImg").hide();
$("#ringImg").attr('src','/GreenSockForum/img/ringRenders/BlueRing.png');
$("#ringImg").show();
})
tl.to("#ringImg", 0.5, {opacity:1}); 
});

Be sure to have the javascript console open when testing.

 

---

 

If you continue to have trouble or if Jonathan and I are misunderstanding the issue, please provide a codepen or jsfiddle example with the least amount of code needed to replicate the issue.

 

Thanks

Link to comment
Share on other sites

Hello Jamie :) , the reason i advised having the window event in the DOM ready was so the DOM was ready before checking the window.load event. It could have been placed outside yes, but sometimes due to different browser inconsistencies, and other scripts loading in. Its perfectly acceptable for the window.load event to go inside the ready function to guarantee the window.load event fires after the DOM is ready, and not before.. since the jQuery ready function, in some instances, will sometimes fire before all images have been loaded.

 

Also and like you said, the window.load event will fire immediately once the ready handler is run if all images have loaded. Sometimes you want to put all your code in one ready handler, instead of having them be separate.. So i understand your point Jamie, and thank you very much for pointing that out :)

Link to comment
Share on other sites

Hey Guys,

 

Thanks for the swift responses.

The flicking image thing Carl mentioned is another issue, related to me not pre-loading the images. My main concern is that first tween (or lack thereof).

 

To show this, if you click on the Black bash first, the image that it replaces it with is already loaded (it's the default one).

The first time you click it, nothing seems to happen, it doesn't do the tween, but switches the image for itself, so no difference there.

The second click gets the desired effect, where the black ring fades out, and is replaced with a black ring (the same image, removing the chance of the img loading issue).

 

I did try out alerting, and I got pop-ups at each expected stage, but tween didn't perform... strange.

 

I'll test it with console.log() to verify that it wasn't breaking because of a pop-up or something...

 

I'll take a look at getting a codepen example running if you think it will assist, not sure how, but google is my friend there ^_^

 

EDIT: Google showed me how amazing and easy codepen is to setup and use... here is the pen I made to reflect this http://cdpn.io/eKzvI

...and one with neater JS in the other window: http://cdpn.io/AKukl

 

Thanks again for your help guys, super appreciated!

 

~Ronen

Link to comment
Share on other sites

Thanks for setting up the codepen Ronen - it makes it much easier to test things out.

 

See the Pen cepCh by jamiejefferson (@jamiejefferson) on CodePen

 

I couldn't help but tweak your example so I could play with it a bit easier, and you might find this sort of code pattern a lot easier to maintain as well. The URLs for the images were moved to data attributes on the colour boxes, and event delegation is used to tie a single function to all of the buttons.

 

What I'm seeing is that the timeline doesn't complete initially, and just after the first set of fades are added it immediately jumps to completion - skipping the fade in/out (the src changing callback still occurs). From then on the timeline is happy to accept new tweens, play them until completion, then wait for more.

 

You can actually get the fade to happen on the first click if you can jump on it in the first second after the page loads. It's like the timelines playhead is not resetting to 0 after its first tween is added. It's hard to track down though as tl.time() is reporting 0 inside the click handler. On the next engine tick time is jumping to 1 (or 0 < x < 1 if you're quick enough). Once that first onComplete has happened the playhead starts to behave as expected.

 

The 'fix' tween you added can be replaced by a tween of any sort - it seems the fix is just to make the timeline trigger an onComplete if it's going to sit around empty.

 

Hopefully Jack/Carl could chime in about this one, but in the meantime here's an alternative that completely avoids the issue for now:

 

See the Pen cJzCK by jamiejefferson (@jamiejefferson) on CodePen

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