Aos: Elements not appearing / appearing with delay at the bottom.

[insejn]

This is:

• Bug

Specifications

• AOS version: 2.2.0 and 2.3.4
• OS: Windows/iOS
• Browser: Any

Expected Behavior

Bottom elements should appear without delays.
Last element( contact form ) should appear when scrolled to bottom.

Actual Behavior

Bottom elements appear with delay
Last element not appearing

Page

Steps to Reproduce the Problem

Everything here:
https://newconfig.com/salesforce-newbies-sap-novices-and-big-data-beginners-need-experience-not-more-classes/

Detailed Description

We tried modify offset values, throttleDelay and refreshing on load, nothing works. Problem still persists as mentioned above. Looks like an issue with longer pages or something.

Possible Solution

[Chousse]

I have the same problem on full page in a 1080p screen (mac, windows) But when I resize the windows it work (no problem on mobile only desktop).

[Kubitomakita]

Same here, even opening the dev tools cause the section to appear.

[Chousse]

Ok, find out why (for me) it's because
body, html { overflow-x:hidden }
I remove this line for desktop and it's ok.

[shammi78]

The slider is causing the issue. AOS is considering the height if the slider before it is being applied. Try loading AOS inside load() function . this solved my issue. hope it work for you.
jQuery(window).load(function(){
AOS.init({
duration: 1200,
});
});

[markmadedesign]

Hi. I'm having this same issue it appears but after trying the latest fix from @shammi78 it's still stalling when trying to load the content below my header slider. Link and latest code below. Thanks for any help provided!

https://regentpointmarina.com/news/

<script>
        jQuery(window).load(function(){
            AOS.init({
              disable: false, 
.....

});
        }); 
      </script>

[gabriel-lima96]

I'm also having this bug.

The elements which won't work are positioned after a slider made with Slick.
Tried without loading Slick:

• Page is 'bigger' because divs that were in the slider are now one bellow the other
• Still won't work (animation happens way before i scroll to element position)

Tried without the whole slider div ('smaller' page):

• Now it works

Tried without loading Slick ('bigger' page) and used AOS.init() after 100ms (setTimeout):

• The animation is happening a little before i get to the element

Tried without loading Slick ('bigger' page) and used AOS.init() after 1000ms (setTimeout):

• It works! At least for me and in the localhost.

[a-barbieri]

Had the same issue and @shammi78's answer gave me the right hint.

I was changing the height of some elements after AOS.init(). Therefore the solution was to trigger AOS.refresh() as a callback after the height (and the consequent animation) was applied.