Enhanced Animate-on-Scroll

Enhanced Animate-on-Scroll

Animate your website's elements with style! This library builds upon the foundation of the popular Animate-on-Scroll (AOS) library but adds an extra layer of flair, customization, and detailed guidance.

Check it out here! | GitHub







  • 🌈 Rich animations with extended easing functions.
  • πŸ•° Adjustable durations, delays, and offsets for precise control.
  • πŸ’‘ Enhanced documentation with in-depth explanations.
  • πŸš€ Support for modern browsers with smooth scrolling and customized scrollbars.
  • πŸ”§ Vanilla JavaScript, no additional dependencies.


Getting Started

  1. Include the Library

    Link the enhanced AOS library in your HTML:

    <link rel="stylesheet" href="path-to-your-enhanced-aos.css" />
    <script src="path-to-your-enhanced-aos.js"></script>
  2. Initialize

    After including the library, initialize it:

    document.addEventListener("DOMContentLoaded", function () {
  3. Add Data Attributes to Elements

    Use data-aos attributes on elements to specify the animation type:

    <div data-aos="fade-up">I will fade up when scrolled into view!</div>
  4. Customize!

    Make use of the additional attributes like data-aos-easing, data-aos-duration, data-aos-offset, and data-aos-delay for fine-tuned control.

Detailed Attributes

  • data-aos: The animation type (e.g., fade-up, fade-right, etc.)
  • data-aos-easing: Speed curve of the animation.
  • data-aos-duration: How long the animation effect lasts (in milliseconds).
  • data-aos-offset: Adjusts the animation trigger point.
  • data-aos-delay: Adds a delay before the animation starts.

Custom Scrollbars

Give your website a consistent and stylish look with customized scrollbars. Follow our guide on integrating our enhanced scrollbars, tailored for both Webkit and Firefox browsers.


Enhanced Animate-on-Scroll provides web developers with a powerful toolkit to breathe life into their websites. With a rich set of animations, combined with the flair and extensive documentation, making your website elements pop has never been easier!


This project is licensed under the MIT License.