Inview animation issue

I’m experiencing a strange behaviour with a div that has an image background, that is ‘absolute positioned’ with an inview animation applied. On occasion the animation gets stuck with the inline style “visibility: hidden” and the animation doesn’t proceed. then if i change the size of the browser window it appears. I’m not sure if there’s something in my CSS or the way i’m trying to use the animation is causing this.
I have another div overlapping it, that also has an image background but uses a “mix-blend-mode” with similar CSS but this one works fine. the only difference is this one has more delay.

This also happens to other divs using the same structure and position on the right side of the webpage. But with the same structures on the left side of the web page they work fine.

Here’s a screenshot of the Chrome dev.

Thanks in advance!

Can you post a screenshot of how is the animation configured in the properties panel in Wappler?

I’ve just discovered that it’s the “Right margin” that is applied to the div that is causing the problem. This is set to a “minus” value to position the div to the edge of the page. If i change it to margin left it resolves the issue.
Why would this cause a problem?

Can't really answer this question, without seeing your page in my browser. Probably something specific to it. Also you may want to play with the Start option and set it to something less than 100% visible.

1 Like

OK thanks Teodor. Ill try what you suggested. I’ve only got this in a local testing environment currently. Could possibly change my Github repository to public if this helps.

Ok so i’ve adjusted the start to 90% visible… Which appears to have resolved the issue. Why? is a different matter :stuck_out_tongue_winking_eye: … Cheers! :+1: