Smooth Scroll-controlled Animations With TweenMax – Scrollissimo

Scrollissimo.js is a JavaScript library that triggers TweenMax.js based smooth animations on the element when scrolling towards it.

Basic usage:

Add GSAP’s TweenMax.js and Scrollissimo.js to your html page.

<script src="/path/to/TweenMax.min.js"></script>
<script src="/path/to/scrollissimo.js"></script>

Include the scrollissimo.touch.min.js for touch devices support.

<script src="/path/to/scrollissimo.touch.min.js"></script>

Initialize the Scrollissimo.

$(window).scroll(function(){
  Scrollissimo.knock();
});

Animate elements as you scroll down the page.

TweenLite.to(element:object, durationInPixels: number, params: object);

Add this tween to Scrollissimo.

Scrollissimo.add(<Tween|Timeline>, <StartPixels>, <MaxSpeed>);