Mystery opacity problem

Design help Animations & Interactions
1

I have an interaction where an element (plus symbol) fades in and out on hover, on desktop only. This works fine. On mobile, the interaction is inactive, and I would like the plus symbol opacity to remain at 100%. I have unchecked the triggers on the mobile media, but it doesn’t work. The pluses remain with an opacity of 0%.
The weird thing about this, is that it works properly on the home page, but not on the Financing page (link provided).

When I view the page in the Webflow Preview it works, but not when published in a browser. I’m getting the feeling it might be a bug. Anyone have any tips?

Thanks

Here is my public share link: [LINK](https://preview.webflow.com/preview/sencap?utm_medium=preview_link&utm_source=designer&utm_content=sencap&preview=3f45c6655bf87b80374c4b6211ca5505&pageId=61a29f8978afdd9f625164a4&workflow=preview)
(how to access public share link)

1 Like
2

I managed to fix the problem with some custom code. I reluctantly added !important to my opacity, and then it worked. I think the problem had to do with the initial state of the animation (which stated opacity be 0). Even though I disabled the mobile devices from the animation, somehow it was still affecting it.

3

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.