On hover (scale+rotate), off hover (scale to original+pause)

[mark772]

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

[OSUblake]

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