search

awesome-reveal / react-awesome-reveal

React components to add reveal animations using the Intersection Observer API and CSS Animations.
https://react-awesome-reveal.morello.dev
MIT License
1.13k stars 43 forks source link

Z-index problem #90

Open ghost opened 3 years ago

ghost commented 3 years ago

When working with sections that have z-index applied to them the animation messes up the z-index.

It can be solved by adding animation-fill-mode: backwards !important; but there is not general class name for animations so we can add it to all.

jpatterson933 commented 3 years ago

@cZeaushe which element are you adding animation-fill-mode: backwards !important; to? I have a fixed element that has a z-index of 99 and an banner element that is supposed to be behind the fixed element but the z-index on the fixed element is no longer working - I've tried it both ways but maybe I am missing something.

EDIT: I actually figured it out. By assigning the className to the Fade object that I was using as the same className that had the z-index, I fixed the issue and the z-index started working again.

inapeace0 commented 2 years ago

Hi, @jpatterson933. I had the same issue during the development. According to your comment, I tried and some sections were success, but some sections were failed. So, I unwrapped the fade effect from the header section(fixed on top), and then it run well. Why is such issue happened?

morellodev commented 1 year ago

Could you please make a reproducible CodeSandbox example starting from this template?