AOS.js animation problem hides dropdown in boostrap 5 navbar

Question

I am developing a Drupal website with a nav menu using Bootstrap 5 and one of the requirement was to add some animation.

For the animation I have used AOS.js library and the problem happens after adding the effect with data-aos="fade-up all the Bootstrap dropdown became invisible.

After some investigation, I've tried to play with z-index, because the menu is present using the inspector and the content after the menu overlaps the dropdown menu in absolute position.

The problem is fixed removing the AOS animation from the menu and there is no way to fix using z-index property, that make me conclude that it is a transform-3d problem.

<header id="header" data-aos="fade-down">
... Bootstrap 5 nav menu with dropdown
</header>
...
<div class="..." data-aos="fade-up">
...
</div>

Answer 1

I have found a solution after some investigation and experiments.

I have added this code in my general stylesheet and it worked.

.aos-init[data-aos].aos-animate {
   transform: unset;
}

The problem seems that the transform property change the effect of the z-index and the content overlapping.

The transform: unset reset the transform property, giving to the element a consistent state.

Source: https://github.com/michalsnik/aos/issues/104