Disabling an Element

[Paopee]

Hi guys! I'm basically new to JS. I want to know how can I make the element unclickable while the tween is ongoing? Thanks!! 

<script> 
	function init() {
		var r = document.getElementById("test");
		var rh = document.getElementById("test").offsetHeight;
		var rh2 = document.getElementById("test").offsetHeight;

		r.onclick = function tog(){
		
			if(rh <= rh2){
				TweenMax.to(r, 1, {width:"-=100", ease:Cubic.easeOut});
				rh2 = document.getElementById("test").offsetHeight;
			}
			if(rh > rh2){
				TweenMax.to(r, 1, {width:"+=100", ease:Cubic.easeOut});
				rh = document.getElementById("test").offsetHeight;
			}
		}
	}
</script>

[Rodrigo]

Hi and welcome to the forums.

 

You can use the isTweening method. What it does is check if the target element has any active tweens going at the moment you call the function and returns a boolean value, so you can attach it to a simple conditional logic, in your case would be like this:

function init() {
		var r = document.getElementById("test");
		var rh = document.getElementById("test").offsetHeight;
		var rh2 = document.getElementById("test").offsetHeight;

		r.onclick = function tog(){
		
			if(rh <= rh2 && !TweenMax.isTweening(r)){
				TweenMax.to(r, 1, {width:"-=100", ease:Cubic.easeOut});
				rh2 = document.getElementById("test").offsetHeight;
			}
			if(rh > rh2 && !TweenMax.isTweening(r)){
				TweenMax.to(r, 1, {width:"+=100", ease:Cubic.easeOut});
				rh = document.getElementById("test").offsetHeight;
			}
		}
	}

So in this case the conditional logic for the first condition is: if rh less or equal to rh2 and the element r is not tweening (the return is false) you execute the code. For the second condition is: if rh is bigger than rh2 and the element r is not tweening execute this code. In both cases if any of the two conditions doesn't meet nothing will happen, so if the element is tweening but the values condition is true nothing will happen.

 

You can read more about the method here:

http://api.greensock.com/js/com/greensock/TweenMax.html#isTweening()

 

Hope this helps,

Cheers,

Rodrigo.

[Paopee]

Hi rhernando! Thanks for helping! I tried the code but sadly it's not working properly. Yup, I can't clicked the element anymore but tween is like bugged. Second click still follows the first if condition. But I completely understand the if condition you gave. Should I change any of my codes?

[Rodrigo]

Hi, you're welcome.

 

Please check the following:

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

 

Is the same code you have and is working. It'll help if you could fork the codepen with your code in order yo get a better look of what could be the issue.

 

Hope this helps,

Cheers,

Rodrigo.

[Paopee]

Hi again!

 

Here you go! 

See the Pen fHzdj by anon (@anon) on CodePen

 

 

Thanks a bunch rhernando! I really appreciate your help with this!

[Rodrigo]

I believe is working as expected now.

 

Although I'd recommend you to use a minimum width, because otherwise you're element keeps getting smaller and smaller. You can also use conditional logic to do that.

 

Cheers,

Rodrigo.

[Paopee]

Alright, Thanks again rhernando!!

[Paopee]

I was just debugging and found out that the value on the first click on a onComplete function is around "300+" and not "300" and on the second click is around "200+" not the expected "200px". 

See the Pen fHzdj by anon (@anon) on CodePen

 

I also experienced this inaccurate value in Flash also before. Wondering is there a solution for this?

[Rodrigo]

Yep, sometimes the engine can finish a value in a very far decimal position, for example if you're tweening something to 100 the final value could be 100.00000001 which of course is bigger than 100.

 

Luckily for us they've think about everything and that's why the Round Props plugin exists. It rounds the value of a tween to the nearest integer and it's usage is super simple:

var r = document.getElementById("test");

TweenMax.to(r, 1, {width:'+=100', roundProps:'width'});

Like that if the original width is 150px the final value will be 250 with no decimals.

 

The plugin is included in TweenMax.js and TweenMax.min.js, so you need to point to the specific file only if you're not using any of the files mentioned above.

 

Hope this helps,

Cheers,

Rodrigo.

[GreenSock]

Just to clarify, the tweening engine always ends at EXACTLY what you feed it for an ending value, but if you're using a relative value like "+=100" that just adds 100 to whatever it currently is, and if the browser reports the current value as a tiny decimal, that's the cause of the issue.