How to setup AOS on the main html page?

As per the name suggests, AOS allows to apply various animations to HTML elements while you scroll the web page.

Animating elements on scroll is a popular technique used in web design to create engaging and dynamic user experiences. By triggering animations when elements come into view during scrolling, you can add visual interest and interactivity to your website.

The animation you are experiencing on this website is also because of AOS.

CSS setup

CDN method

  • Visit the website, scroll down, locate CSS under CDN SOURCES.
  • Copy the whole line as below and paste inside <header> tag as you do for Bootstrap CSS.
    <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">

JavaScript plugin setup

CDN method

  • Visit the website, scroll down, locate JS under CDN SOURCES.
  • Copy the whole line as below and paste inside <header> tag as you do for Bootstrap CSS.
    <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>

General approach to implementing scroll-based animations:

  • Select a JavaScript Library: Choose a JavaScript library that simplifies the process of animating elements on scroll. Some popular libraries for scroll animations include AOS (Animate On Scroll), ScrollMagic, and WOW.js. These libraries provide easy-to-use functionalities for creating scroll-based animations.
  • Include the Library: Incorporate the JavaScript library into your project either by downloading the library files and linking them in your HTML file or by using a content delivery network (CDN) link.
  • Apply Animation Classes: Add classes to the HTML elements you want to animate. These classes specify the animation type, duration, delay, and other parameters. Configure the classes according to the specific animations you want to apply when the elements come into view during scrolling.
  • Initialize the Library: Utilize the JavaScript functions provided by the library to initialize the scroll-based animations. Customize the scroll offset, animation options, and other settings to control when and how the animations are triggered based on the user's scrolling behavior.
  • Test and Optimize: Test the scroll-based animations on different devices and screen sizes to ensure they function smoothly and provide a pleasant user experience. Make any necessary adjustments to the animation parameters and settings to optimize performance and visual appeal.

Explore

Navigate

Recently added