Flickering / Jumpy 3D Rotation

I’m a novice here with Webflow, and I couldn’t find the exact problem I was having in the forums. My 3d rotation interaction is jumpy and twitchy and anything but smooth and nice. Anyone know what I’m doing wrong? https://deer-island-studio.webflow.io/project-page

I assume it has something to do with my organization or something. What I’d like to achieve is an effect similar to this: Raoul Gaillard - Front-end developer and Ui designer

Do not add interaction that transforms your elements on these very elements otherwise at some point they will rotate out from under your cursor, then quickly go back (thinking you have left the hover area), encouenter your cursor, start the animation, leave it again… this leads to jittering. Use interaction on the parent of elements you want to transform. Parent will not move and hover ix will behave consistently.

I figured that was what was happening, but the same thing happens even if I apply it to the parent, right?

When I use the interaction on the parent element, it does move, which leads to this undesirable effect, and the same problem: https://deer-island-studio.webflow.io/another-project-page

In the first example, I had assumed what you are telling me, and had created a parent div-block and put all the elements as children inside of it.

Forgive me: I’m sure I’m misunderstanding some basic premise. I already feel preemptively stupid for the inevitable easy solution to this issue. :slight_smile:

To add this this: I want the effect to work even if your mouse cursor is in the 0,0 or 100,100 (x,y) position, which is what is causing the problem, I think?

You use parent as a trigger and children as targets.

1 Like

Oh. Yes. Of course you can do that. Silly me. I’ll try again. Thanks for your help!

1 Like