Streaming live at 10am (PST)

Resting position not correct for Rotation on Mouseover


#1

I was following along with the video for Rotation on Mouseover (https://university.webflow.com/lesson/rotation-on-mouseover-interactions) to familiarize myself with some of the newer interactions available. However, despite following along, the resting position is slightly off kilter.

The page I was testing is here: http://clientdemo.webflow.io/animation

It’s not SUPER noticeable but is off nonetheless. When I inspect the element, I see that the rotateY starting position is 3.6912deg and when I change it to 0 it looks correct. How do I correct this within Webflow? Is it something I’m doing wrong or a bug?

Thanks!!!


Here is my public share link: https://preview.webflow.com/preview/clientdemo?preview=cdf39309e0ede82455135cd79144f0a5
(It’s the Animation page)


#2

The image is fine, just change the width to Auto. Next, in the interaction settings, change all to Linear (none) for easing. Then add smoothing to 85%. This will produce a smoother effect which will return to square image. :grinning:


#3

Thanks! So was changing the width to ‘auto’ the alignment issue or was it the easing? I didn’t think the easing would affect anything until mouseover. Regardless it’s perfectly aligned now so thanks!


#4

The auto unlocks the image dimensions. The easing to none allows the interaction to default to use the smoothing, which is why it needs to be high.

Glad to help ya! Have fun!