10 Best Scroll-triggered Animation Plugins With JavaScript (2023 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 Jan 21 2023

Table of contents:

• jQuery Scroll Animation Plugins
• Vanilla JS Scroll Animation Libraries

jQuery Scroll Animation Plugins:

jQuery Plugin For Element Fade/Slide Effects As You Scroll - FadeThis

A lightweight jQuery plugin used to create fade/slide animations when Html elements come in (or out of) the viewport.

[Demo] [Download]

---

jQuery Plugin To Animate Elements When They Scroll Into View - inview

A jQuery plugin used to add or remove CSS classes to Html elements when they enter or leave viewport, so that you can apply custom CSS3 animations on them as you scroll down the page.

[Demo] [Download]

---

Revealing Elements on Scroll with jQuery - scrollReveal

A jQuery plugin that detects when elements become visible in viewport so that you can apply any cool CSS3 animations to them as you scroll down the page.

[Demo] [Download]

---

jQuery Plugin To Fade In / Out Elements On Scroll - Scroll Fade

Scroll Fade is an extremely lightweight jQuery plugin that provides two methods to fade in and fade out html elements at a specified scroll position on vertical page scrolling.

[Demo] [Download]

---

jQuery Plugin To Create Elements Fly-in Effects On Scroll

Makes use of jQuery and CSS3 transitions & transforms to make Html elements as you scroll down the web page.

[Demo] [Download]

---

Vanilla JS Scroll Animation Libraries:

Declarative On-scroll Reveal Animations – scrollReveal.js

A simple yet amazing javascript library that reveals invisible HTML elements with fade-in transitions while you scroll down the page and the invisible HTML elements are in the viewport.

[Demo] [Download]

---

Animate Html Elements On Scroll – WOW.js

WOW.js is an amazing javascript script that takes advantage of CSS3 animations to animate & reveal Html elements when they’re scrolled into view.

[Demo] [Download]

---

Awesome Scroll Effects In JavaScript – lax.js

A lightweight vanilla JavaScript library that provides 20+ awesome animations for elements when scrolling down and up.

Demo Download

---

Creating Scroll Based Animations With Pure JavaScript – ScrollTrigger

A really small (~2kb minified) JavaScript library which lets you apply scroll-triggered animations to any elements.

[Demo] [Download]

---

Tiny Performant Scroll Based Animation Library – sal

A lightweight, high-performant scroll animation library used for animating elements within the document on page scroll.

[Demo] [Download]

---

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