scrollReveal.js – Easily reveal elements as they enter the viewport

<div data-sr="enter left please, and hustle 20px"> Foo </div>
<div data-sr="wait 2.5s and then ease-in-out 100px"> Bar </div>
<div data-sr="enter bottom and scale up 20% over 2s"> Baz </div>

<script src='/js/scrollReveal.min.js'></script>
<script>
  window.sr = new scrollReveal();
</script>

Just add data-sr to an element, and it will reveal as it enters the viewport. The data-sr attribute is waiting for you to describe the type of animation you want. It’s as simple as using a few keywords and natural language.

scrollReveal.js →

Related: the aforementioned Skrollr allows you to define CSS changes linked to the current scroll position. It doesn’t use natural language, but allows you to manipulate each CSS property individually. Must say I prefer that way of working more.

Published by Bramus!

Bramus is a frontend web developer from Belgium, working as a Chrome Developer Relations Engineer at Google. From the moment he discovered view-source at the age of 14 (way back in 1997), he fell in love with the web and has been tinkering with it ever since (more …)

Join the Conversation

2 Comments

  1. is it possible to animate elements when they are about to leave viewport?
    i.e. triggered with “leave” besides “enter”

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.