Cross-browser Javascript Scroll Up Animation – ScrollAnimate

The ScrollAnimate.js is another cool Javascript tiny library to add smooth scroll up animation. When a user scrolls down to the page, the hidden element will show up with a nice and slow fade in animation.

This library comes up with dual licensed under MIT and GPL. It uses the of Animate.css to animate any HTML element including Div, P, H, and other tags as you scroll down the page.

If you are already using animate on your webpage then you don’t need to add it. Simply add javascript files and add the HTML and you are done.

Features of Scroll up Animation

• It Supports the animation in both horizontal and vertical directions.
• It is responsive and allows to disable scroll transition on certain devices.

How to use Scroll Animate.Js

You need to add Js and CSS file before closing header tag and as I said if you are already using animate. CSS then you don’t need to add it.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css"/>
<script src="js/scrollAnimate.js"></script>

To apply it on any HTML element you need to define class .animated to the element to target the element.

<div class="initial amber darken-4 animated"></div>
<div class="block amber darken-3 animated"></div>
<div class="block amber darken-2 animated"></div>
<div class="block amber darken-1 animated"></div>

Finally, you need to apply the ScrollAnimate to the target elements. Also, you can customize it by specifying the type of animation you want to use it.

ScrollAnimate.add({

  // target elements
  selector: '.animated',

  // animation class
  animationClassName: 'fadeInUp',

  // offset
  offset: '10%',

  // or 'horizontal'
  scroll: 'vertical',

  // only trigger once
  triggerOnce: false,

  // disable on tablet and mobile
  disabled: ['tablet', 'mobile'],

  // delay in ms
  delay: 0,

  // duration in ms
  duration: '1000',

  // iteration count
  iterationCount: '1'
  
})

In our case, you can notice that we have added the class animated to trigger the element and then we have animation class fadeInUp to achieve the Scroll Up Animation.

You can also use the scroll position and in our case, we have set vertical. Next, if you can see we have set the tablet and mobile disabled so the animation should not work on these devices.

Similar you can set the delay, duration, and iteration count. That’s it.

It’s simple and very easy to use the plugin and allow you to easily customize it without having too much knowledge of javascript.