Create Scroll-triggered Animations Using CSS - jQuery ScrollOnReveal.js

File Size: 4.89 KB
Views Total: 405
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Create Scroll-triggered Animations Using CSS - jQuery ScrollOnReveal.js

ScrollOnReveal.js is a tiny yet customizable jQuery plugin for animating elements as they enter the viewport.

It works by detecting the element's position and applying custom CSS-powered animations to it when scrolling down. Great for storytelling, interactive one page scroll website, parallax scroll effects, product showcases, and more.

How to use it:

1. Insert the ScrollOnReveal.js script after jQuery.

<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/js/ScrollOnReveal.js"></script>

2. Apply the default fadeIn animation to the target element as it's scrolled into view.

<div class="example">
  <h2>I'm just fading ...</h2>

3. Override the default CSS rules to create your own scroll animations.

  beforeCss: {
    'transform': 'rotate(360deg)' 
  animatedCss: {
    transform: 'rotate(0deg)'

4. Override the default options to customize the scroll animations.


  // detect scroll events in this container
  container: $(window),

  // animation speed
  speed: 1000,

  // reset the animation when the element enters the viewport again
  reset: true,

  // animation delay
  delay: 80,

  // offset in px
  viewFactor: 20,

  // extra easing functions
  easing: 'ease-in-out',

This awesome jQuery plugin is developed by dorultan. For more Advanced Usages, please check the demo page or visit the official website.