10 Best Scroll-triggered Animation Plugins With JavaScript (2020 Update)

by jQueryScript,

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

Table of contents:

jQuery Scroll Animation Plugins:

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.

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

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

jQuery Plugin To Fade In Elements When Scrolling Down - FadeInScroll

[Demo] [Download]


Cool Slide-In On Scroll Effect with jQuery

A Cool Slide-In On Scroll Effect with jQuery that can help you create amazing timeline for your website.

Cool Slide-In On Scroll Effect with jQuery

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

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

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

jQuery Plugin To Create Elements Fly-in Effects On Scroll

[Demo] [Download]


Vanilla JS Scroll Animation Libraries:

Declarative On-scroll Reveal Animations – scrollReveal.js

scrollReveal.js is 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.

Declarative On-scroll Reveal Animations – scrollReveal.js

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

Animate Html Elements On Scroll – WOW.js

[Demo] [Download]


Awesome JavaScript Library For Magical Scroll Interactions - ScrollMagic

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

Awesome JavaScript Library For Magical Scroll Interactions - ScrollMagic

[Demo] [Download]


Awesome Scroll Effects In JavaScript – laxxx

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

Awesome Scroll Effects In JavaScript – laxxx

[Demo] [Download]


Creating Scroll Based Animations With Pure JavaScript – ScrollTrigger

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

Creating Scroll Based Animations With Pure JavaScript – ScrollTrigger

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