aos Aos not work!

This is:

Bug

Specifications

AOS version: 2.3.4
OS: Android 11
Browser: Chrome

Expected Behavior

I want add animation on my card while scrolling in card container, if you not understand what i means about card container, i mean like this:

km_Card-Slider_480p

Actual Behavior

But, when i implement AOS to my card, they are not working! When i scroll it, they are not appear!

Steps to Reproduce the Problem

My HTML Source Code


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <!-- fonts -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Fira+Sans:wght@200;300;400;500&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;1,100;1,200;1,300;1,400&display=swap" rel="stylesheet">

  <!-- aos -->
  <link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />

  <!-- style -->
  <link rel="stylesheet" href="style.css" type="text/css" media="all" />

  <title>Card Slider</title>
</head>
<body>

  <div class="container">
    <div class="card-container">
      <div class="card">
        <div class="img0 image-box">
          <span>No Image</span>
        </div>
        <h4>project1</h4>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque, officia.
        </p>
      </div>
      <div class="card">
        <div class="img1 image-box">
          <span>No Image</span>
        </div>
        <h4>project2</h4>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit.
        </p>
      </div>
      <div class="card">
        <div class="img2 image-box">
          <span>No Image</span>
        </div>
        <h4>project3</h4>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore.
        </p>
      </div>
      <div class="card">
        <div class="img3 image-box">
          <span>No Image</span>
        </div>
        <h4>project4</h4>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis, numquam.
        </p>
      </div>
      <div class="card">
        <div class="img4 image-box">
          <span>No Image</span>
        </div>
        <h4>project5</h4>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores, accusamus, libero.
        </p>
      </div>
      <div class="card">
        <div class="img5 image-box">
          <span>No Image</span>
        </div>
        <h4>project6</h4>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque possimus, ipsam.
        </p>
      </div>
      <div class="card">
        <div class="img6 image-box">
          <span>No Image</span>
        </div>
        <h4>project7</h4>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt.
        </p>
      </div>
      <div class="card">
        <div class="img7 image-box">
          <span>No Image</span>
        </div>
        <h4>project8</h4>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit.
        </p>
      </div>
    </div>
  </div>

  <!-- aos script -->
  <script src="https://unpkg.com/aos@next/dist/aos.js"></script>
  <script>
    AOS.init({});
  </script>
</body>
</html>

Detailed Description

Possible Solution

May 10 '22 04:05 Ryangithub10

Note: Author, i know this is looks like im not implement aos at all! But trust me! I was implement it and not working at all!

May 10 '22 04:05 Ryangithub10

@Ryangithub10 copy pasted your code and it works, did you forget to set your animations using data-aos?

      <div class="card" data-aos="fade-up">
        <div class="img2 image-box">
          <span>No Image</span>
        </div>
        <h4>project3</h4>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore.
        </p>
      </div>

May 12 '22 17:05 jwillp

No! I not forget to add data-aos to my code! But it not working

May 16 '22 03:05 Ryangithub10

I see that you have included both the CSS and JS links for AOS, but I don't see it ever used inside of your html tags. I think you need to include the animation name inside of the tag for the element you want it to work on. docs

For example:

 <div class="container">
    <div class="card-container">
      <div class="card">
        <!-- I added an attribute to the next line -->
        <div class="img0 image-box" data-aos="slide-up">
          <span>No Image</span>
        </div>
        <h4>project1</h4>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque, officia.
        </p>
      </div>
      ...