10 Best Scroll-triggered Animation Plugins With jQuery And Pure JavaScript

This is the 10 best jQuery plugins and vanilla JavaScript libraries 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.

Table of contents:

• jQuery Scroll Animation Plugins
• Vanilla JS Scroll Animation Libraries

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

inview is 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]

Awesome JavaScript Library For Magical Scroll Interactions - ScrollMagic

ScrollMagic is an awesome jQuery animation plugin that allows you to do lots of cool stuffs when scrolling down/up your web & mobile page.

[Demo] [Download]

jQuery Plugin To Fade In Elements When Scrolling Down - FadeInScroll

FadeInScroll is a minimal jQuery plugin that applies a fade-in animation on your Html elements when they're scrolled into view, similar to the lazy load effect.

[Demo] [Download]

jQuery Plugin To Add CSS3 Scrolling Effects On Your Web Page - Smoove

Smoove is a lightweight jQuery plugin for adding amazing CSS3 based scrolling effects to Html elements as you scroll down the page.

[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:

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]

Animate Elements On Scroll – AOS

AOS is a standalone JavaScript library which uses CSS3 animations to animate elements on vertical page scrolling.

[Demo] [Download]

Animating Visible Elements On Scroll – Animate.js

Animate.js is a JavaScript library that applies custom animations to elements as they become visible in the viewport when scrolling.

[Demo] [Download]

Smooth Scroll-controlled Animations With TweenMax – Scrollissimo

Scrollissimo.js is a JavaScript library that triggers TweenMax.js based smooth animations on the element when scrolling towards it.

[Demo] [Download]

Smooth On-scroll Animation with JavaScript and CSS – Rock’n’Roll

A pure JavaScript & CSS implementation of smooth scrolling effects for background images.

[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: