Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

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

Go to solution Solved by OSUblake,

Recommended Posts

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

  • Solution

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,
      ease: "none",
      onUpdate: function () {
        gsap.to(addCube.scale, {
          duration: 0.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



  • Like 4
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.