<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>
data-srto an element, and it will reveal as it enters the viewport. The
data-srattribute is waiting for you to describe the type of animation you want. It’s as simple as using a few keywords and natural language.
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.