Aitor Posted November 20, 2021 Share Posted November 20, 2021 I'm not sure this question is right for this forum. My appologies in advance. I have an object body (from cannon-es library but it is not relevant). Then, I can animate some properties like position, this way: gsap.to( body.position, { duration:1, y: body.position.y + 10 } ) Now, I want to rotate it, but rotation in this kind of object must be done with a setFromAxisAngle() function in its quaternion property, not changing a property directly: body.quaternion.setFromAxisAngle( new CANNON.Vec3(0, 1, 0), Math.PI * 0.5 ) So, I want to animate the floating value '0.5' in this line: Math.PI * 0.5 Is it possible? Which is the right approach to do it? Link to comment Share on other sites More sharing options...
Solution akapowl Posted November 20, 2021 Solution Share Posted November 20, 2021 Hello @Aitor It's always best to include a minimal demo for people here to tinker with (as the forum guidelines state) that makes it way easier to provide you with a suitable solution. Technically you can tween any value with GSAP, so you could e.g. set up an object with a value and onUpdate of a tween on that value, update what you need to with that value. I have no experience with cannon.js whatsoever, so I'm not sure if there is an easier way (but judging from the little experience I have with three.js and this scenario being sort of similar to how to tween certain properties in three.js, I don't really think so), but here is what I came up with. Hope it helps let sphereRotation = { val: 0 }; gsap.to( sphereRotation, { duration: 5, val: 2, repeat: -1, yoyo: true, ease: "power1.inOut", onUpdate: updateRotation }) function updateRotation() { sphereBody.quaternion.setFromAxisAngle( new CANNON.Vec3(0, 1, 0), Math.PI * sphereRotation.val ) } See the Pen 5e21f51cc80e45865d72ec08d556afd2 by akapowl (@akapowl) on CodePen 3 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