How to add min and max for X and Y

[Aiysen]

Hello

 

Is any option to add min and max value for X and Y position.

Method .to()

I need it for save timeline and angle from original move, but object stop move when reached limit value for x or y

 

 

I tried to use snap, but I think its not for this case. I tried calculate time and position when I need to stop it, but nothing succeeded.

I think better option to set min and max value.

 

Thank you for your help.

[GSAP Helper]

It's pretty tough to troubleshoot without a minimal demo - the issue could be caused by CSS, markup, a third party library, your browser, an external script that's totally unrelated to GSAP, etc. Would you please provide a very simple CodePen or CodeSandbox that demonstrates the issue? 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best (avoid frameworks if possible). See if you can recreate the issue with as few dependancies as possible. If not, incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, then at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen

 

If you're using something like React/Next/Nuxt/Gatsby or some other framework, you may find CodeSandbox easier to use. 

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. 

[mvaneijgen]

Hi @Aiysen welcome to the forum!

 

It's really hard to understand what you're trying to do without seeing a minimal demo. What sprang to mind are the GSAP util functions (https://greensock.com/docs/v3/GSAP/gsap.utils), which are a set of amazing functions. For instance you could use .clamp() to clamp some value between two numbers. See the docs page (https://greensock.com/docs/v3/GSAP/UtilityMethods/clamp())

gsap.utils.clamp(0, 100, 105); // returns 100

If you feed 105 to this function it will clamp it to 100. You could do something like this to have your value be maximum of 100 and a minimum of 0. Hope it helps and happy tweening! Be sure to include a minimal demo next time, so that we can better understand your questions a thus better help you.

 

const myClamp = gsap.utils.clamp(0, 100);

gsap.to(item,{
 x: myClamp(myValue),
 y: myClamp(myOtherValue),
})

 

[Aiysen]

@mvaneijgen Thank you.

If its not help, I will try make a demo

[Aiysen]

@mvaneijgen

gsap.utils.clamp - this is not what solve my problem.

 

 

I will try explain what I need, hope you can help me with this.

I use GSAP with PIXI JS, not in css.

 

Image A:

Object (black circle) move from 300 px to 50 px by .to() method. For X and Y axe

 

But, i want that when black circle up to 100 px by X axe, its stop change X value, and continue only by Y

I imagine it on image B.

 

Suppose we add limit value for X = 100

 

Black hole move by X and Y from 300;300 to 50;50, but while on moving by limit X should stop move on 100px and continue only by Y.

So onComplete will called on 100;50

 

Image C

I can't do straightaway to 100;50, because object will move my another  X and Y, for me very important, that object repeat path and time as if no limit.

With limit object path will like triangle Image D

 

 

[GreenSock]

41 minutes ago, Aiysen said:

I can't do straightaway to 100;50, because object will move my another  X and Y, for me very important, that object repeat path and time as if no limit.

 

You could just do the math and plot your tweens correctly (the x one would have a shorter duration and only animate to 100, for example), but you could use modifiers to make it simpler to program: 

See the Pen NWzzgKO?editors=0010 by GreenSock (@GreenSock) on CodePen

[Aiysen]

@GreenSock

You are the best, thank you, i didn't see this property.

 

Thank you.

It what i need