Aos: Bottom elements wont appear.

[Dsmol1]

This is:

• Bug
  
  

Specifications

• AOS version:
• Browser:

Expected Behavior

Bottom element should start animation with less scroll downs.

Actual Behavior

If you put data-aos (for example: fade-in) at the bottom elements, they won't appear because you need to scroll a little bit more, but there is nowhere to scroll, if you give some margin-bottom to your container, you can scroll down little bit more and fade in animation happens.

Steps to Reproduce the Problem

Just create some content and try to give fade animation to bottom elements.

Detailed Description

Possible Solution

Option to choose how far you have to scroll before animation happens

[simmonsr]

Wow, just came on Github to see if there was a ticket for this... +1

[simmonsr]

So the solution to this is the anchor. If you have a section wrapper ID use that as the data-aos-anchor. And then use data-aos-anchor-placement="bottom-bottom". Here is my code:

<section id="g-copyright">

<div data-aos="fade-up" data-aos-anchor="#g-copyright" data-aos-anchor-placement="bottom-bottom">Reggie</div>

</section>

[michalsnik]

Hey @Dsmol1 @simmonsr !

It's because of the default 120px offset. You can however override it on per element basis:

<div class="copyright" data-aos="fade-up" data-aos-offset="0"></div>