Jump to content
Search Community

Disabling an Element

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

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.

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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. 

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