Strange behaviour with hover + scale (bug?)

Help
#1

Principle Version: 5.1.0
macOS Version: 10.14.5
Sketch Version: n/a
Description of what you need help with:

Steps to reproduce the behavior:

  1. Creating component with 2 artboards
  2. Artboard 1 has a hover:inside interaction that takes you to Artboard 2
  3. Artboard 2 has a hover:outside interaction that takes you back to Artboard 1
  4. There’s an image on both artboards that scales, creating a simple zoom effect on hover
  5. The zoom animation on hover:inside is longer than the zoom animation on hover:outside

ISSUE:

  • Hovering over and off the image without letting the zoom animation finish actually starts SHRINKING the image. However, the image is not shrunk down nor does it have a negative scale on either artboard.

  • I’ve noticed that if I make the animation timings the exact same between both arboards (i.e. zoom in has the same timing as zoom out) then this issue doesn’t occur… But I want the zoom out animation to quicker…

I’ve attached a principle file here documenting the above. would love if someone could take a look - this is driving me absolutely crazy, and no one in our team can figure it out.

P.S. I’ve tried resizing the image instead of changing the scale property and the same thing happens…

1 Like
#2

Tried checking, it seems like some sort of bounce effect that is added when maybe on hover:out hasn’t finished so it goes back to first state but over compensates the scale effect that didn’t reach by adding negative value to it, so probably is a bug.

I tried using move on Y axis rather than scale and does the same:

Hover:inside > Y=100
Hover:outside > Y=0

So if I stop the animation when the hover:insider only has moved 30px, that makes the animation count back 100px from Y=30, so it animates back to Y=-70, then bounces back to Y=0

Hope @Daniel can take a look at this soon.

#3

Hey man,

Thanks for taking a look.

Indeed, feels like some kind of bounce/spring effect is happening, shrinking the image down when it shouldn’t. Feels like a bug.