Jump to content
Search Community

Setting bounds on tweened attributes

Guest andrewscwei
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

Guest andrewscwei

Hello, I just started using GSAP and I am trying to figure out how to set boundaries on tweened attributes. By attributes I am particularly interested in "x" and "y", and by boundaries I mean the ability to ensure that those "x" and "y" values will not go above or below a specified max or min value respectively. This is particularly important in my use case because I am using relative tweens.


 


So in the following example, I want to, say, make sure that "x" will not go below 0 nor above 100. How can I achieve that?



TweenLite.to(element, 0.5, { x: '+=10' }); // How to make sure 0 < x < 100?

I have searched through the forum and docs and unfortunately I was not able to find anything related to this topic. I did however come across the '_gsTransform' property, and am exploiting that at the moment to achieve what I want. It does feel kinda hacky though which is why I am hoping there must be a built-in way to do this, similar to what can be done in the Flash version of GSAP as discussed here: http://greensock.com/forums/topic/7188-minimum-and-maximum-x-value-when-tweening/

Link to comment
Share on other sites

Guest andrewscwei

 

Hi andrewscwei  :)

 

you can use something like this :

 

function checkRange(num,edge,min,max){ return num>=min+edge && num<=max-edge }; 
// 'num' is your input number

console.log(  checkRange(10,10,0,100)  );

 

 

Thank you very much for the response Diaco :)

 

I am sorry but I don't quite understand how I can go about using that function to solve my issue. I understand that the function returns a boolean which tells me whether the input number is within the given range. Is there a feature in GSAP where I can supply a function for validating values (like the one you provided) or something? If so can you please let me know how I can go about doing that? I can't find anything in the docs.

 

Or are you perhaps suggesting that I should use a function like that to manually check the next value of my tween? Something like:

if (checkRange(...)) {
  TweenLite.to(...);
else {
  // Don't tween
}

If so I am already doing something similar by picking out the current value from the '_gsTransform' property and using it to compute the next value. I am more hoping that there might be an easier way to do it, maybe something like this:

TweenLite.to(element, 0.5, { x: { value: '+=10', min: 0, max: 100 }});

Any tips would be greatly appreciated!

Link to comment
Share on other sites

Guest andrewscwei

Thanks for the help OSUblake, and sorry for not being able to write back sooner.

 

My current implementation is similar to yours, which I agree is a bit over-complicated for achieving a simple behaviour. I guess my conclusion is there is no built-in way to set bounds and I'll just have to settle with this method.

Link to comment
Share on other sites

Yeah, nothing is built into GSAP to handle this. I just used a function to show how it could be done, but there are other ways to do this.

 

How well do you know you JavaScript? I see questions very similar to yours all the time, and my response is almost always the same, use getters/setters, which will allow you to change the variable. If you are working with DOM elements, you should create some sort of proxy object or wrapper for the element so that GSAP will not modify the property directly. It would be nice if GSAP offered some sort of abstract actor class to use, but for now you will have to create it manually.

 

Here's just a quick demo of how you could set something like this up. Each class has an internal timeline and a getter/setter for the x value so you can change the clamped values on the fly.

 

See the Pen b50fe2a9e1b3d684edb78cbf8c0e8d19?editors=001 by osublake (@osublake) on CodePen

Link to comment
Share on other sites

Hi guys :)

 

pls try something like this too : 

you can feed the limit() fn with onUpdateParams and do whatever you want .

function limit(mn,mx){
  var T=this.target , elT=T[0]._gsTransform;
  if( elT.x<mn || elT.x>mx ){ TweenLite.set(T,{ x:elT.x>mx?mx:mn }) };
};

TweenLite.to('.box',1,{x:'+=500',onUpdate:limit,onUpdateParams:[0,200]});

See the Pen gaReep by MAW (@MAW) on CodePen

Link to comment
Share on other sites

Guest andrewscwei

@OSUblake: Thanks for the feedback! I'm pretty comfortable with Javascript (especially loving ES6 :)) and am using a framework I created myself, which includes a wrapper class most of the DOM elements I interact with (plus other gimmicks), so your method sounds entirely possible in my project. I understand the concept, and will certainly evaluate and see if it is necessary to expose an internal timeline for the wrapper class to achieve this behaviour. A feature like that will certainly be very handy when managing multiple child elements that need animated. For my current use case however I just need to animate one native DOM element with bounded x values, so it might be an overkill.

 

@Diaco: Thanks for the example you provided. That looks nice and easy, will give it a shot and see how it fits.

 

Consider this issue solved. Thanks for all the help! I do hope that GSAP will have a built-in way of setting bounds in the near future though... :)

Link to comment
Share on other sites

You definitely don't need an internal timeline, I was just showing one way you could encapsulate everything inside a class. The only thing that matters is the getter/setter, which is just a function that does the same thing as Diaco's and the other clamping functions I showed.

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