Aiysen Posted November 26, 2022 Share Posted November 26, 2022 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. Link to comment Share on other sites More sharing options...
GSAP Helper Posted November 26, 2022 Share Posted November 26, 2022 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. Link to comment Share on other sites More sharing options...
mvaneijgen Posted November 26, 2022 Share Posted November 26, 2022 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), }) Link to comment Share on other sites More sharing options...
Aiysen Posted November 26, 2022 Author Share Posted November 26, 2022 @mvaneijgen Thank you. If its not help, I will try make a demo Link to comment Share on other sites More sharing options...
Aiysen Posted November 26, 2022 Author Share Posted November 26, 2022 @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 Link to comment Share on other sites More sharing options...
Solution GreenSock Posted November 26, 2022 Solution Share Posted November 26, 2022 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 2 Link to comment Share on other sites More sharing options...
Aiysen Posted November 27, 2022 Author Share Posted November 27, 2022 @GreenSock You are the best, thank you, i didn't see this property. Thank you. It what i need 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now