Teymooor Posted September 19, 2022 Share Posted September 19, 2022 Hi, i want to ask can i animate just on single number? for example var count = 5 this number use in another var var radius = count + math.random * 2 i want this number change to 10 for example when click on button Link to comment Share on other sites More sharing options...
Rodrigo Posted September 19, 2022 Share Posted September 19, 2022 Hi @Teymooor and welcome to the GreenSock forums! Sure thing, GSAP is not only for regular DOM elements, you can tween any numeric property on any object that you provide to a GSAP instance. Just keep in mind that has to be an object, not a variable. So in the case of your question it would look a bit like this: const myObj = { count: 5 }; gsap.to(myObj, { count: 10, duration: 1, ease: "none" }); This code tells GSAP to take the number from it's current value to 10, in one second and the variation of the number will be equal throughout the duration, that is no easing function will be applied, so the change will be completely linear. Also you can take advantage of GSAP rich callback system to update another variable as the tween is being updated: const myObj = { count: 5 }; let radius = myObj.count + math.random * 2; gsap.to(myObj, { count: 10, duration: 1, ease: "none", onUpdate() { radius = myObj.count + math.random * 2; } }); Finally a couple of observations, in JS the math object starts with uppercase Math and random is a method, not a property, so it has to be invoked and not just referenced. // This will throw an error math.random * 2; // math is undefined // This is the right syntax Math.random() * 2; https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random Here is a very simple example: See the Pen mdLmqye by rhernando (@rhernando) on CodePen Happy Tweening!!! 1 Link to comment Share on other sites More sharing options...
Teymooor Posted September 19, 2022 Author Share Posted September 19, 2022 thank you dear Rodrigo it's so helpful for me const radiusNumber = { count: 5 }; gsap.to(radiusNumber, { count: 10, duration: 1, }); console.log(radiusNumber.count); console.log(radiusNumber); Why these two logs still show the number 5? This line of code is inside a for loop radius = myObj.count + math.random() * 2; but this line is outside const radiusNumber = { count: 5 }; how can i change just the number Link to comment Share on other sites More sharing options...
Rodrigo Posted September 19, 2022 Share Posted September 19, 2022 Hi, Can you provide a minimal live example, please? Is kind of hard to see what the issue could be with the code you just provided. As for the console logs not showing the updated values, keep in mind that, while JS is a single threaded language, the GSAP instance will run as the browser keeps executing the rest of your JS code. If you want to check the value while your GSAP instance is running, you have to use an onUpdate callback. GSAP has a very rich and unique callback system, you can check it here:https://greensock.com/docs/v3/GSAP/Tween Scroll down to Special Properties and you'll find all the available callbacks that you can use. Happy Tweening!!! Link to comment Share on other sites More sharing options...
Teymooor Posted September 19, 2022 Author Share Posted September 19, 2022 (edited) See the Pen ZEoyGQp by Teymoor (@Teymoor) on CodePen This is an example of what I mean As you can see console.log prints "clicked" when you click on the floor and graves I want the radius number to change when I click on the scene Edited September 19, 2022 by Teymooor Link to comment Share on other sites More sharing options...
Rodrigo Posted September 20, 2022 Share Posted September 20, 2022 Hi, The approach you have right now is the correct one in terms of restarting the GSAP instance. However I assume that you want to apply the radius value to the grave being clicked. As I mentioned before you can use the onUpdate callback to apply the value to the grave, but for that you also need to get the grave targeted grave and do the changes that you want, that is something more related with THREE than GSAP and my knowledge of THREE is extremely basic. I'd encourage you to find out a bit more about THREE and how to update values on a mesh and then using GSAP to update those values should be quite simple. Happy Tweening!!! Link to comment Share on other sites More sharing options...
Teymooor Posted September 20, 2022 Author Share Posted September 20, 2022 thank you dear Rodrigo 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