Fork me on GitHub

Super scroll orama

The jQuery plugin for supercool scroll animation

powered by Greensock

created by John Polacek

Free jQuery Plugins, HTML5 and CSS3 Scripts - Providing tons of Jquery Plugins,Html5 and CSS3 Scripts for web developers to preview and download. By using these resources, you can create amazing effects with fancy animations of content elements like text, images and so on.

Fade It

Fly It

Spin It

Scale It

Smush It

Pin It

Slide It

Wipe It

Bounce It

Color It

Unpin It

Fling It

Move It

Parallax It

Parallax It

Parallax It

Bring It

How To Use

Please note, this is a powerful tool, and with great power comes great responsibility.
Use wisely. A little subtlety can go a long way.

★ ★ ★

Superscrollorama is powered by TweenMax and the Greensock Tweening Engine. Go to greensock.com for documentation on how to use it. Why Greensock/TweenMax? Great performance, ease-of-use, expandibility and basically because it is awesome.

First, link to the jQuery CDN and then embed TweenMax.js and Superscrollorama. Next, start up Superscrollorama. Think of it as a controller for animation. You add tweens and timelines to it, targeting when an element appears in the viewport or at a specific scroll point.

Use the addTween method to build your scroll animations.

.addTween(target, tween, duration, offset)
  • target: scroll position (number) or element (string or object)
  • tween: a Greensock animation tween object
  • duration: scroll duration of tween in pixels (0 means autoplay)
  • offset: adjust the animation start point

In the example below, the animation fades in when scrolled into view.

	$(document).ready(function() {
	  var controller = $.superscrollorama();
	  controller.addTween('#fade', 
	    TweenMax.from($('#fade'), .5, {css:{opacity:0}}));
	});

★ ★ ★

The default duration is 0, which means the tween plays through completely when its scroll point is reached. You can add a duration which will instead sync the tween progress to the scrollbar position. Instead of one tween, you can create a timeline of multiple tweens.

	// parallax example
	controller.addTween(
	  '#examples-parallax',
	  (new TimelineLite())
	    .append([
	      TweenMax.fromTo($('#parallax-it-left'), 1, 
	        {css:{top: 200}, immediateRender:true}, 
	        {css:{top: -600}}),
	      TweenMax.fromTo($('#parallax-it-right'), 1, 
	        {css:{top: 500}, immediateRender:true}, 
	        {css:{top: -1250}})
	    ]),
	  1000 // scroll duration of tween
	);

★ ★ ★

The 4th parameter is offset, which you can use to adjust the scroll point at which the animation is triggered.

controller.addTween('#fade', 
  TweenMax.from($('#fade'),.5,{
    css:{opacity:0}}),
    0, // scroll duration of tween (0 means autoplay)
    200); // offset the start of the tween by 200 pixels

★ ★ ★

Pass in a function to the tween for when the animation is complete.

controller.addTween('#fade', 
  TweenMax.from($('#fade'),.5,{
    css:{opacity:0}, 
    onComplete: function(){alert('test')}
  }));

★ ★ ★

You can use the pin method to pin an element, do a series of animations and then unpin it.

.pin(el, dur, vars)
  • el: element being pinned(string or object)
  • dur: scroll duration of pin (in pixels)
  • vars: optional properties for the pin method (object):
    • anim: tween animation object that occurs during the pin
    • offset: adjust the pin start point
    • onPin: callback function for start of pin
    • onUnpin: callback function for end of pin

Example:

	controller.pin($('#examples-2'), 3000, {
	  anim: (new TimelineLite())
	    .append(
	      TweenMax.fromTo($('#move-it'), .5, 
	        {css:{left: -200, top: 500}, immediateRender:true}, 
	        {css:{top: -400}})
	    )
	    .append(
	      TweenMax.to($('#move-it'), .5, 
	        {css:{left: 200}})
	    )
	    .append(
	      TweenMax.to($('#move-it'), .5, 
	        {css:{top: -200}})
	    )
	    .append(
	      TweenMax.to($('#move-it'), .5, 
	        {css:{left: 0}})
	    )
	})