Teymooor Posted September 23, 2022 Share Posted September 23, 2022 Hi this is a part o f my code function init() { const radiusNumber = { counts: 3 }; const setRadius = () => { const rad = radiusNumber.counts + Math.random() * 6; return rad; }; gsap.to(radiusNumber, { counts: 8, duration: 1, onUpdate: setRadius, }); for (var i = 1; i < count; i++) { let radius = setRadius(); ... .. . why my radius radiusNumber.counts = 3, don't change to 8 ? Link to comment Share on other sites More sharing options...
Rodrigo Posted September 24, 2022 Share Posted September 24, 2022 Hi @Teymooor, I'm not an expert in scope, which I think could be an issue here. But I'm 100% sure that is highly possible that your loop will be completed far before the GSAP instance updating the value of counts is completed, so you'll never get that value in there. In fact a fairly simple loop can be completed in less than 10 milliseconds. GSAP internal clock or ticker, updates normally once every 16 milliseconds unless it is setup otherwise, but that is outside the interest of this thread. If you want the value of counts to be 8 by the time you run the for loop, you should run the loop inside an onComplete callback: const setRadius = () => { const rad = radiusNumber.counts + Math.random() * 6; return rad; }; const doLoop = () => { for (i = 0; i < count; i++) { let radius = setRadius(); } }; gsap.to(radiusNumber, { counts: 8, duration: 1, onUpdate: setRadius, onComplete: doLoop, }); Now that being said, I must say that your setup is a bit curious, since IMO there is no need to use the onUpdate to call setRadius, that callback has no effect whatsoever anywhere inside the GSAP instance, since it just returns a value. Happy Tweening!!! Link to comment Share on other sites More sharing options...
Teymooor Posted September 24, 2022 Author Share Posted September 24, 2022 thank you Rodrigo it works but without animation can you explain why? I put this line in a click event gsap.to(radiusNumber, { counts: 8, duration: 1, onUpdate: setRadius, onComplete: doLoop, }); Link to comment Share on other sites More sharing options...
Rodrigo Posted September 25, 2022 Share Posted September 25, 2022 Hi @Teymooor, Please provide a minimal demo, since there is no way for us to know exactly what you're trying to do with the code snippets you're providing. If this is related to your previous thread with the THREEJS graveyard, please be specific about what you're trying to achieve and how. Happy Tweening!!! Link to comment Share on other sites More sharing options...
Teymooor Posted September 26, 2022 Author Share Posted September 26, 2022 here it is See the Pen ZEoyGQp by Teymoor (@Teymoor) on CodePen when you click on fox model , the radius changes but without animation And again, when you click on anything other than the fox, it goes back to the first state Link to comment Share on other sites More sharing options...
GreenSock Posted September 26, 2022 Share Posted September 26, 2022 That looks like just a JavaScript thing in your code - are you expecting the "radius" variable to change? You only set it once during init() and never again, When you call setRadius(), you're not actually setting radius at all. That function returns a new value, but you're not assigning it to anything. I don't have time to try to dissect everything in your demo to figure out how you're trying to use that (the minimal demo shouldn't need to have any Three.js in there - it should only take a few lines of code to demonstrate the issue in a very isolated way). Maybe you meant to have your onUpdate be this: () => radius = setRadius() ? Link to comment Share on other sites More sharing options...
Rodrigo Posted September 26, 2022 Share Posted September 26, 2022 Hi, Instead of using setRadius in the onUpdate callback, use the init method: window.addEventListener("click", () => { raycaster.setFromCamera(mouse, camera); const intersects = raycaster.intersectObjects(sceneMeshes); if (intersects.length > 0) { if (INTERSECTED != intersects[0].object) { if (INTERSECTED) console.log("clicked"); INTERSECTED = intersects[0].object; gsap.to(radiusNumber, { counts: 7, duration: 1, onUpdate: init }); } } else { if (INTERSECTED) { gsap.to(radiusNumber, { counts: 3, duration: 1, onUpdate: init }); } INTERSECTED = null; } }); That kind of works, I don't know if it is exactly what you're looking for, but at least you can see the updated values reflected in the renderer. Happy Tweening!!! Link to comment Share on other sites More sharing options...
Teymooor Posted September 27, 2022 Author Share Posted September 27, 2022 21 hours ago, GreenSock said: That looks like just a JavaScript thing in your code - are you expecting the "radius" variable to change? You only set it once during init() and never again, When you call setRadius(), you're not actually setting radius at all. That function returns a new value, but you're not assigning it to anything. I don't have time to try to dissect everything in your demo to figure out how you're trying to use that (the minimal demo shouldn't need to have any Three.js in there - it should only take a few lines of code to demonstrate the issue in a very isolated way). Maybe you meant to have your onUpdate be this: () => radius = setRadius() ? yes i want to change radius only, but when i call setRadius() on onUpdate does not happen anythings I want the radius to change with animation when I click on the model I would be grateful if you could take the time to solve this problem Link to comment Share on other sites More sharing options...
Teymooor Posted September 27, 2022 Author Share Posted September 27, 2022 20 hours ago, Rodrigo said: Hi, Instead of using setRadius in the onUpdate callback, use the init method: window.addEventListener("click", () => { raycaster.setFromCamera(mouse, camera); const intersects = raycaster.intersectObjects(sceneMeshes); if (intersects.length > 0) { if (INTERSECTED != intersects[0].object) { if (INTERSECTED) console.log("clicked"); INTERSECTED = intersects[0].object; gsap.to(radiusNumber, { counts: 7, duration: 1, onUpdate: init }); } } else { if (INTERSECTED) { gsap.to(radiusNumber, { counts: 3, duration: 1, onUpdate: init }); } INTERSECTED = null; } }); That kind of works, I don't know if it is exactly what you're looking for, but at least you can see the updated values reflected in the renderer. Happy Tweening!!! Unfortunately, due to the randomness of the radius and angle of the cubes, what is happening is not acceptable. Link to comment Share on other sites More sharing options...
Rodrigo Posted September 27, 2022 Share Posted September 27, 2022 Hi, Unfortunately this is a bit beyond our scope. I don't know enough about THREE in order to offer a solution to this, if what you're after is move the blocks away from the fox. I have a couple of ideas but don't have a lot of time to go through them now. I'll circle back to this and see if I can offer a better solution when I have time. Sorry I can't be of more assistance. Hopefully another user with more experience in THREE can offer a better insight. Happy Tweening! Link to comment Share on other sites More sharing options...
GreenSock Posted September 27, 2022 Share Posted September 27, 2022 Yeah, GSAP is doing exactly what you're asking it to do. I really don't understand the effect you desire or what you think the problem is, but we're happy to answer any GSAP-specific questions. otherwise, like @Rodrigo said, we don't have the bandwidth to offer free general consulting services. Right now, your code is updating your value with randomness on every single tick of the animation. Maybe you just wanted to choose an end value that's random and animate there rather than constantly changing it on every tick? If so, you need to rework the logic in your demo accordingly so that you're just feeding in the new end value and probably an onUpdate to trigger re-rendering with the new value. Good luck! 👍 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