aos not displaying content expected to to fade in

[Jayniyi]

This is:

• Bug
• Feature request
• Question
• Idea

Specifications

• AOS version:
• OS:
• Browser:

Expected Behavior

Actual Behavior

Steps to Reproduce the Problem

Detailed Description

Possible Solution

[NikkieDev]

Could you please provide any information whatsoever?

[1ncredibleM1nd]

Have the same problem, i installed with CDN links. Added data-aos, and all elements hidden

[LK-Not-Found]

For those who had the same problem the solution I found was adding data-aos-anchor-placement and instead of a simple AOS.init(); I used the code bellow and add the data-aos-offset dynamically, after this all animations started working on both mobile and desktop version of my website

<script>
  document.addEventListener("DOMContentLoaded", function () {

    // get all elements with that use data-aos animations
    const elements = document.querySelectorAll("[data-aos]");
  
    elements.forEach(el => {
    if (window.innerWidth <= 768) {

        // Mobile
        el.setAttribute("data-aos-offset", "-250");
    } else {

        // Desktop
        el.setAttribute("data-aos-offset", "-500");
    }
    });
  
    AOS.init();
  });
</script>