▼
Streaming live at 10am (PST)

Rotate animation not working in Safari

Design help Animations & Interactions
#1

Hello Webflow family! I’m using Rotate animations, but they’re not working properly in Safari – they “flicker” for lack of a better word. In Chrome, they work just fine.

There are also opacity animations involved, but those seem to be working. I’ve tried a bunch of things based on other forum posts but haven’t had any luck. For example, I tried making sure the card being flipped doesn’t have a z-index, that everything is position absolute instead of flex, etc.

A published version of my site is here, and this is my share link. (Wait for a couple seconds to see the animation. It’s called Flip and triggered by page load.)

Anyone know of a fix for this? Thank you!

Here is my public share link: LINK
(how to access public share link)

#2

I don’t see it flickering on Safari, rather a part of the card disappears, and it’s a triangle section, meaning that for Safari, part of the card disappears briefly behind another element during its 3D animation.

That’s a good news because it’s not a bug, it’s just what Safari thinks it is.

From there, it’s not a bad idea to open your Webflow designer in Safari and continue to debug your Interaction from there.

First thing to try: select the whole 3D scene and add a Transform on the Z axis to it, making the scene come towards us. Try to see how much you need to move it on the Z axis for the bug to stop to happen. Then if you’re still ok with how it looks, case is closed. If not, we’ll try to find another solution.

#3

Thank you @vincent! You’re absolutely correct: the card element was disappearing behind another element.

I tried the 3D z-transform approach, but unfortunately that didn’t work because the animation initial state overrode what I set. But by setting a similar z-transform on the animation initial state (through the Move option), and then adding a Scale initial state to reduce the size so it looked like before, I was able to make it flip without disappearing behind another element.

You’re a wizard! Thanks very much for the help.

#4

Great! And yes, making sure you also had the transforms at the start of your IX was a given. For solid interactions you have to give your elements the transforms in the Designer prior to define them in the IX, even if it’s a series of transforms set to zero. This way the transforms are declared and the transitions happen better, you get less bugs.

Happy that it works for you now.

1 Like