Animation happens when the element is scrolled into view. If you enable Advanced settings -> Mirror, then reverse animation will happen when scrolling past it.
To animate out while the element is still in view you would need to manually remove the aos-animate class from the element with JavaScript.
All the animation are made to appears, unfortunately, none to disappears.
That is true, for example this is the CSS for the fade animation:
html:not(.no-js) [data-aos^=fade][data-aos^=fade] {
opacity: 0;
transition-property: opacity, transform;
}
html:not(.no-js) [data-aos^=fade][data-aos^=fade].aos-animate {
opacity: 1;
transform: none;
}
If you were to add custom CSS to reverse the opacity:
html:not(.no-js):not(#_) [data-aos^=fade][data-aos^=fade] {
opacity: 1;
}
html:not(.no-js):not(#_) [data-aos^=fade][data-aos^=fade].aos-animate {
opacity: 0;
}
then I it would animate and disappear, but overall the AOS library is not well suited for it. But what it essentially does is add the aos-animate class to the element when it’s in view and remove it when it’s no longer in view (with “mirror” enabled), so with custom CSS you technically can target specific elements to animate however you like based on that. At that point it’s probably better to use GSAP or something though.
