mark772 Posted October 14, 2021 Share Posted October 14, 2021 Hello! I am trying to achieve a hover effect on some geometries: when i hover over a cube it has to scale up and also start an infinite rotation while the cursor is over it. When the cursor leaves the object, it has to scale back down and the rotation has to pause (so it can continue if the cursor is again hovering over it). Tween kill doesn't do it (it stops the rotation and only scales down while i'm moving the cursor, otherwise it stays in the scaled up version + it doesn't start the rotation again on subsequent hovers). See the Pen XWamzVV by mark772 (@mark772) on CodePen Link to comment Share on other sites More sharing options...
Solution OSUblake Posted October 14, 2021 Solution Share Posted October 14, 2021 Hi Mark, I'm surprised this didn't crash your app. You're creating a new scale animation on every animation frame. It's generally a bad idea to create an animation inside an onUpdate callback, especially an animation that has a repeat of -1 as that will run an infinite amount of times. tweenRotateCube = gsap.to(addCube.rotation, { y: Math.PI/2 , duration: 3, repeat:-1, ease: "none", onUpdate: function () { gsap.to(addCube.scale, { duration: 0.1, repeat:-1, x: 1.2, y: 1.2, z: 1.2, }); }, }); Checking for an active animation is ok for very basic stuff. With what you have going on, you'll need a better way to keep track of the hover states. I just made a little animator class to handle that. See the Pen dyzYdZz by GreenSock (@GreenSock) on CodePen 4 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