10 Best Scroll-triggered Animation Plugins With JavaScript (2026 Update)
This is the 10 best jQuery plugins and vanilla JavaScript animate on scroll (AOS) libraries that help developers to create awesome reveal animations on elements when they're scrolled into view.
Use these plugins and libraries to bring a fancy and user-friendly scroll-based element reveal experience to your long web page or single page web applications.
Originally Published May 08 2019, updated Feb 14 2026
Table of contents:
jQuery Scroll Animation Plugins:
Add Smooth Fade & Slide Effects To Elements With FadeScroll.js
A lightweight JavaScript plugin that adds subtle fade and slide effects to elements as they scroll into view.
It supports fading in from the top, bottom, left or right, which allows elements to smoothly transition onto the page. This can enhance scrolling and reveal content in a natural way.
Parallax Scrolling Effects & Scroll Animations In jQuery
A feature-rich yet easy-to-implement jQuery animation plugin that applies a subtle parallax scrolling effect to background images and animates parallax container's child elements when scrolling down the page.
Fade In Animations On Scroll Or On Page Load Using jQuery
A lightweight jQuery animation plugin that applies a fade-in animation to elements on document ready or when they become visible on the page.
Animate Elements On Scroll & Mouse Hover - jQuery dom-animation
A jQuery-powered animation library that allows you to animate elements when they become visible in the viewport or when the mouse hovers over them.
It supports various animations, including fade, slide, expand, and shrink. You can also customize the speed and directions to suit your actual needs. Great for creating engaging scroll- and mouse-triggered DOM animations that make your website or landing page more visually appealing.
Slide In Element When Scrolling Down
A really small jQuery plugin which makes use of CSS3 animations to make any elements slide in when you scroll down the webpage.
Vanilla JS Scroll Animation Libraries:
Animate Elements On Scroll With Parallax Effect – locomotive-scroll (v5)
A modern JS library that applies a smooth, subtle, configurable parallax scroll effect to elements when scrolled into view.
Version 5 represents a complete rewrite from previous versions. The library now uses dual Intersection Observer strategies to optimize performance. Simple viewport triggers use one observer while continuous animations like parallax use a separate RAF-based observer.
Zoom & Fade In Elements On Scroll
A smooth scrolling interaction concept that zooms & fades in/out elements on vertical page scrolling using the requestAnimationFrame API and CSS3 transforms.
Fade In/Out Elements On Scroll – ScrollFade.js
A JavaScript library for fading in/out elements as they’re scrolled into and out of the viewport.
Easy & High Performance Animate On Scroll Library – JOS
An open-source, easy-to-use, blazing-fast Animate On Scroll library for adding scroll animation effects to elements when they appear in the viewport.
ScrollJs: Custom Scroll Animations and Lazy Loading
A JavaScript library for creating scroll-triggered animations and lazy loading images.
It gives you full control over animation styles and works with existing CSS classes or third-party animation libraries like Animate.css.
ScrollJs works by using the Intersection Observer API to detect when elements enter or leave the viewport. This implementation allows for flexible, performant scroll-based animations and actions, with options for one-time or repeated triggers as elements enter and leave the viewport.
Conclusion:
Want more jQuery plugins or JavaScript libraries to create awesome animations on scroll? Check out the jQuery Scroll Animation and JavaScript Scroll Animation sections.
See also:
- Best Parallax Scrolling Effect Plugins
- Best Smooth Scroll Plugins
- Best JavaScript & CSS Parallax Scrolling Effects
- Best Parallax Scroll Components For React & React Native Apps
