AOS - Animate.css Integration

Animate.css Integration

1. Include Animate.css and AOS:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/animate.css@4.1.1/animate.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@reimujs/aos@latest/dist/aos.css" />

2. Initialize AOS with custom settings:

AOS.init({
  useClassNames: true,
  initClassName: false,
  animatedClassName: 'animate__animated',
});

Bounce In Left

data-aos="animate__bounceInLeft"

<div data-aos="animate__bounceInLeft"></div>

Bounce In Right

data-aos="animate__bounceInRight"

<div data-aos="animate__bounceInRight"></div>

Flip In X

data-aos="animate__flipInX"

<div data-aos="animate__flipInX"></div>

Flip In Y

data-aos="animate__flipInY"

<div data-aos="animate__flipInY"></div>

Rotate In

data-aos="animate__rotateIn"

<div data-aos="animate__rotateIn"></div>

Zoom In

data-aos="animate__zoomIn"

<div data-aos="animate__zoomIn"></div>

Jack In The Box

data-aos="animate__jackInTheBox"

<div data-aos="animate__jackInTheBox"></div>

Roll In

data-aos="animate__rollIn"

<div data-aos="animate__rollIn"></div>