Side effects of overlapping jsx components?

[ryuzakithe3rd]

Hi new to react spring, and was trying to create a simple fade in/out transition on a background image, but there were side effects on non-animated components.

Here is a sandbox replicating the problem.

Also tried searching and testing a lot of stuff and it seems the CSS position property might be the cause, so tried a non background image and it works as expected.

Here is a sandbox showing the working non background image.

Any help on what is causing this behaviour and solutions will be greatly appreciated thanks :D

[joshuaellis]

This is just a CSS zindex-ing issue, see a resolution to the issue here – https://codesandbox.io/s/react-spring-animation-side-effects-forked-h0jyg?file=/src/App.js

[ryuzakithe3rd]

ah I see sorry for the misunderstanding and thanks you so much for the help :)