Streaming live at 10am (PST)

Animtation is blurred on rotation


#1

I’m trying to create a similiar animation to this https://codepen.io/BjornRombaut/pen/mOLGgX using Webflow. When my div/cube rotates it’s slightly blurred, and then becomes un-blurred at the end of the animation.

Does anybody know why the cube is blurred during the animation?


Here is my public share link: https://preview.webflow.com/preview/portfolio-version2-10f0c6acc093e6410fb6?preview=f9f39449e83890f4cb59654fbe80cc4f
(how to access public share link)


#2

Hi @Darius3311

Can you edit your share link please - won’t open :slightly_smiling_face:


#3

https://preview.webflow.com/preview/portfolio-version2-10f0c6acc093e6410fb6?preview=f9f39449e83890f4cb59654fbe80cc4f

Does this work?


#4

Yep, that works, but strange why that blur is happening. I can’t see any blur that’s been added in the styles panel.

Is there a chance the custom code may be affecting it either at page level or if you have some in project settings?


#5

I don’t think there is anything that could affect the blur. It’s very unusual .


#6

I’ve had the same issue and researched it. I came across this article: A fix for when your elements move up and/or blur during animations/interactions on Chrome

I haven’t gotten around to trying it it yet… let me know if it works out!


#7

Not sure how to completely fix this issue but you can alleviate it somewhat by making the interactive element as large as it is going to be at its largest in your animation and then using initial scale to reduce it to the necessary size to start expanding it. It won’t blur this way.