News

Add dynamic motion with the SuperScrollorama plug-in

Create fly, fade, spin, pin, scale, smush, slide, wipe, bounce, move and fling effects with this super-talented plug-in

scrollorama

DOWNLOAD TUTORIAL FILES

SuperScrollorama.js

Inspired by the Mindworks site, we are going to derive our own method of animating page elements on vertical scroll. To do this, we’re using a jQuery plug-in called SuperScrollorama, developed by John Polacek and built on Greensock’s TweenMax platform. Visit  for a demo.

Attach the plug-in

Download via the demo or site, or grab the .zip on GitHub. Unpack the folder and navigate to the ‘js’ folder. Here you will need to copy the ‘jquery.superscrollorama.js’ file and the ‘TweenMax.min.js’ file found in the ‘Greensock’ folder into your page root. Attach them along with the latest jQuery CDN.

Basic page elements

Our example essentially consists of four <div> elements containing transparent PNG background images. Identically diamond-shaped and with set dimensions, these layers will appear grouped together then expand out on scroll. Each must have a unique id attribute and all are nested within a container div, again with id specified.

Function call

On document load we will crucially initiate the superscrollorama() function, adding tween effects for each div via a timeline method called on our diamond-box container. Notably here we pass an option into the main function, setting the scroll trigger point as top-left rather than the default centre, based on the start position of our div elements.

Full function

Below this main call comes the good bit. Here we’re going to append TweenMax.fromTo() calls to each <div>, passing initial CSS values along with values we want them to have at the end of the tween. With immediateRender set to true, the elements should style accordingly on load, setting starter relative positions and transparency. Adjusting the Tween values and the scroll duration amount will vary the animation timing according to your requirements.

Load and scroll

Save the page and open in your browser, in our case Firefox, scrolling vertically to observe the tween effect that will also reverse by default. You will inevitably need to adjust the positioning values and our example will need further work to make responsive and fully cross-browser compatible.

×