Rotation on Hover Resting State is Wonky

Design help Animations & Interactions
#1

I’m setting up a rotation on hover, similar to this webflow tutorial.

The issue is that the interaction’s center is off. The resting state at 50% 50% makes the image look tilted when it should be flat. If I make “30%, 30%” the resting state, it looks normal again; Nonetheless, when I hover over the element it still feels like the interaction’s center is off. If you try it, you’ll notice the left side is far more sensitive than the right side, despite the interaction being symmetrically balanced.

I’ve gone over the elements and interaction and couldn’t find what’s causing this. Any tips on what might be causing this?

The project’s Read-only Link is below. Thank you.

PS: Site is a work-in-progress!

Note: The main difference with the linked tutorial is that the trigger area is an div. hovering over it It targets and tilts a div inside it. This set up is so that I can later replicate this across several items using the trigger’s class to affect “only children of that class” on hover.

Here is my public share link: LINK
It’s the first card under the pink Servicios section at the beginning of the page.

#2

@Waldo I noticed you posting a fix for a related issue a while back, might be this falls into your area of expertise?

#3

@Yaco why not use interaction trigger

1 Like
#4

Thank you @guoshuzhang , this is certainly a better solution. I had tried it before but I’d gotten a jitter effect if I placed the mouse near the edges, especially on the corners, which led me to use a trigger div.

After seeing your demo though, I noticed your cards were not tilting like mine was. It turns out that several easing options would make the card tilt by default! So that’s fixed.

I’ve set the interaction as suggested and I noticed some jitter still happens if the mouse is on the edge of the corners, is it part of how this kind of interaction works or can it be reduced?