I am having trouble an element flickering when adding an interaction. This element is also inside of a a DIV that has a 3D transform on it. This is happening across Chrome and Safari (latest versions). Hoping someone might be able to offer some help or simply tell me not to do this haha. I tried to explain everything in detail with images. Thank you for any help. I am exhausted from trying to figure it out
So, I have Div Block 142. This Div Block has a 3D transform to it.
Inside of Div Block 142, I have two images. The first one is an image of the dashboard, or Image 30. Not much to this element as far as styling goes that would cause an issue, just a drop shadow and a radius.
Then I have second image inside of Div Block 142 (the Div with the 3D transform for itself and all of its children). This second image is named Image 45. It’s just a component of the dashboard image that I want to animate on scroll. I have a drop shadow applied to this element.
So that’s my layout. Now I jump to the interactions panel. For my scrolling interaction, I am basically telling Webflow to move Image 45 (the dashboard component) vertically as Image 30 (the dashboard image) scrolls into view.
Cool, seems pretty straightforward to me (but what do I really know haha). But when I go to play my animation or try it out on the published site, it basically disappears. Sometimes if I am lucky it will flicker.
Here is a quick screenshare of it flickering/sort of working?
If anyone can offer some help here, I would really appreciate it.
Here is the published link: https://mapauth.webflow.io/