Animations

Animations are visual effects that bring elements to life by gradually changing their properties over time to enhance user experience.

This project uses the AOS (Animate On Scroll) library to animate elements as they scroll into view.

The AOS library was added using the following CDN links:

Stylesheet:

<link href="https://cdn.jsdelivr.net/npm/aos@2.3.1/dist/aos.css" rel="stylesheet" />

Script:

<script src="https://cdn.jsdelivr.net/npm/aos@2.3.1/dist/aos.js"></script>

Initialization

AOS is initialized with the following configuration:

AOS.init();

The following prevents animations from re-triggering every time the user scrolls back up.

AOS.init({
  once: true
});

Fade-in animation

The fade-in animation gradually changes an element's opacity from 0 to 1, making it smoothly appear on the screen, typically used to create a soft, gradual entrance effect.

HTML JS

<img src="https://placehold.co/220x220/31343C/EEE" class="m-1 rounded-3" data-aos="fade-in" data-aos-duration="1000" alt="Fade-in Example" />

<img src="https://placehold.co/220x220/31343C/EEE" class="m-1 rounded-3" data-aos="fade-in" data-aos-duration="1000" alt="Fade-in Example" />

document.addEventListener('DOMContentLoaded', function () {
  AOS.init({
    once: true
  });
});

document.addEventListener('DOMContentLoaded', function () { AOS.init({ once: true }); });

Zoom animations

The zoom animation gradually changes the scale of an element, making it appear to zoom in or out, typically used to emphasize an object by increasing its size or to create a shrinking effect for a smoother transition.

HTML

<img src="https://placehold.co/220x220/31343C/EEE" class="m-1 rounded-3" data-aos="zoom-in" data-aos-duration="1000" alt="Zoom-in Example" />
<img src="https://placehold.co/220x220/31343C/EEE" class="m-1 rounded-3" data-aos="zoom-out" data-aos-delay="200" data-aos-duration="1000" alt="Zoom-out Example" />

<img src="https://placehold.co/220x220/31343C/EEE" class="m-1 rounded-3" data-aos="zoom-in" data-aos-duration="1000" alt="Zoom-in Example" /> <img src="https://placehold.co/220x220/31343C/EEE" class="m-1 rounded-3" data-aos="zoom-out" data-aos-delay="200" data-aos-duration="1000" alt="Zoom-out Example" />

Directional fade animations

Directional fade animations gradually change an element's opacity while moving it in a specific direction (left, right, up, or down), creating a subtle yet smooth transition effect. These animations are commonly used to bring elements into view in a more elegant and less abrupt way.

HTML

<img src="https://placehold.co/220x220/31343C/EEE" class="m-1 rounded-3" data-aos="fade-left" data-aos-duration="1000" alt="Fade-left Example" />
<img src="https://placehold.co/220x220/31343C/EEE" class="m-1 rounded-3" data-aos="fade-right" data-aos-delay="100" data-aos-duration="1000" alt="Fade-right Example" />
<img src="https://placehold.co/220x220/31343C/EEE" class="m-1 rounded-3" data-aos="fade-up" data-aos-delay="200" data-aos-duration="1000" alt="Fade-up Example" />
<img src="https://placehold.co/220x220/31343C/EEE" class="m-1 rounded-3" data-aos="fade-down" data-aos-delay="300" data-aos-duration="1000" alt="Fade-down Example" />

<img src="https://placehold.co/220x220/31343C/EEE" class="m-1 rounded-3" data-aos="fade-left" data-aos-duration="1000" alt="Fade-left Example" /> <img src="https://placehold.co/220x220/31343C/EEE" class="m-1 rounded-3" data-aos="fade-right" data-aos-delay="100" data-aos-duration="1000" alt="Fade-right Example" /> <img src="https://placehold.co/220x220/31343C/EEE" class="m-1 rounded-3" data-aos="fade-up" data-aos-delay="200" data-aos-duration="1000" alt="Fade-up Example" /> <img src="https://placehold.co/220x220/31343C/EEE" class="m-1 rounded-3" data-aos="fade-down" data-aos-delay="300" data-aos-duration="1000" alt="Fade-down Example" />

Using data-aos Attributes in Markup

To animate elements with AOS (Animate On Scroll), simply add the data-aos attribute to any HTML element and specify the animation type.

<div data-aos="fade-up">This element will fade in and move up as you scroll.</div>

Here are a few commonly used AOS animation values:

• fade-up
• fade-down
• fade-left
• fade-right
• zoom-in
• zoom-out

You can see the full list of supported animations on the AOS site.