Streaming live at 10am (PST)

Move interaction removes rotate settings

Hi everyone,

I’ve noticed that when setting up a move interaction on an object which has rotation settings, the animation works but completely removes the rotation settings.

For example:

  • I have an image transformed via x: 37, y: 17, z:-29 as its usual state
  • I create a hover animation for said object and want it to move x -100
  • As soon as the animation starts the rotate config resets to 0 for x, y, and z.

It seems to relate only to Move, other types seem to work as expected without adjusting this. I have tried to specify start and end states for rotation in the animation to see if this helped but the closest I have come to a solution is setting the usual rotation state at the very start of the animation but I then get a visible bounce on the object because of the transition settings on the object - it rotates to 0 then back to the usual settings and continues with the animation. I just can’t seem to overcome this one.

Any ideas/workarounds I may be able to employ here? Have I missed something or could this be a bug/limitation?

Thanks

Hi @iratefox ,

let us see what you have done so far.
Please share a read-only link of your project:

Thanks,
Matthias

Thanks for the reply.

I worked around this temporarily and used a fade instead of a move so I went to recreate this a moment ago and I spotted something I didn’t quite expect. If I had the Rotate interaction on its own as the very first interaction, setting out the current rotate settings in the hope of not doing any further bouncing as described above - it worked. I think I was previously having this same setting combined with the move element, which didn’t work.

However… While my original issue is resolved with this workaround, this seems to have introduced another issue for me; the Hover state stops working for the affected element.

My read only link is below - it’s only on the new-home page.

I have two ‘browsers’ on the page overlapping. When you hover over the desktop browser it should shift the mobile one out the way, hide it, and change the perspective of the desktop browser to be head-on. This now works. But after that action takes place it stops the mobile browser from using its hover state and changing the perspective to be head-on. You can see this expected behaviour by hovering over the mobile browser before hovering over the desktop one.

This one really has me stumped. I haven’t had a chance to delve into the CSS yet, but any ideas would be very welcome.

Thanks

https://preview.webflow.com/preview/cursivecrew-f0f56351?utm_medium=preview_link&utm_source=dashboard&utm_content=cursivecrew-f0f56351&preview=85a49f610d8112e106cb31a2b2b2fc70&mode=preview

You are correct - applying any transform interaction to an element that already has some other transform applied will nullify that original transform. Two workarounds - include the original transform in your interaction or use nested divs to target different objects for transform. FOr example parent div will rotate your object while inner div will move your object that is going to be placed inside this innermost div.

Great shout - using parent and inner divs solved both the original and subsequent problem. I got so wrapped up in this I didn’t even consider such a thing.

Thanks

1 Like

This is how I always do it!