aos animation manual seting code example

Example 1: aos js

CSS
<link href="https://unpkg.com/[email protected]/dist/aos.css" rel="stylesheet">

JS
<script src="https://unpkg.com/[email protected]/dist/aos.js"></script>

INITIALIZE AOS:
<script>
  AOS.init();
</script>

Example 2: aos animate install

//install
npm install aos --save


//initialize in react

import AOS from 'aos'
import 'aos/dist/aos.css';
AOS.init();

Example 3: aos animate

<script src="https://unpkg.com/[email protected]/dist/aos.js"></script>

Example 4: aos animate

<link href="https://unpkg.com/[email protected]/dist/aos.css" rel="stylesheet">

Example 5: aos animation manual seting

<div data-aos="new-animation"></div>

Example 6: aos animation manual seting

[data-aos="new-animation"] {
  opacity: 0;
  transition-property: transform, opacity;

  &.aos-animate {
    opacity: 1;
  }

  @media screen and (min-width: 768px) {
    transform: translateX(100px);

    &.aos-animate {
      transform: translateX(0);
    }
  }
}