Create animated scrolling website with ScrollMagic

ScrollMagic is a jQuery plugin which lets you use the scrollbar like a playback scrub control. Using this, you can build some extremely beautiful landing pages and animated scrolling websites. It’s best to think of ScrollMagic as a script that sees the scrollbar as a kind of “progress bar”. If a certain point is reached: Zack – and a function is ignited. That sounds all very abstract and not very spectacular now: but wait until you have seen the demos.

ScrollMagic is based on the Greensock Animation Platform (GSAP) but has been enhanced with the following features:

  • Increased performance
  • upport mobile devices
  • Full-responsive support
  • object oriented programing
  • Support for horizontal and vertical scrolling
  • Scroll possibility within (multiple) divisions
  • Debugging Extension

With ScrollMagic you can easily create parallax effects, fire scrollbar-dependent events, implement “Infinite Scrolling” with Ajax requests and synchronize animations with the scrolling speed, in short: ScrollMagic keeps what the name promises.

ScrollMagic: So you can use it

Before you can use ScrollMagic, you must first consider the dependencies. The jQuery plugin requires jQuery as well as GSAP. You can find tutorials on GSAP installation and demos on the official site . As already mentioned ScrollMagic has its own debugging tools you can integrate as follows.

<script type="text/javascript" src="js/jquery.scrollmagic.debug.js"></script>

The following code shows you how to initialize the script and how to handle multiple scenes:

// init controller
var controller = new ScrollMagic();

// assign handler "scene" and add it to Controller
var scene = new ScrollScene({duration: 100})
.addTo(controller);

// add multiple scenes at once
var scene2;
controller.addScene([
scene, // add above defined scene
scene2 = new ScrollScene({duration: 200}), // add scene and assign handler "scene2"
new ScrollScene({offset: 20}) // add anonymous scene
]);

For example the code to create an SVG Drawing while users scrolls on your page is:

function pathPrepare ($el) {
var lineLength = $el[0].getTotalLength();
$el.css("stroke-dasharray", lineLength);
$el.css("stroke-dashoffset", lineLength);
}

var $word = $("path#word");
var $dot = $("path#dot");

// prepare SVG
pathPrepare($word);
pathPrepare($dot);

// init controller
var controller = new ScrollMagic.Controller();

// build tween
var tween = new TimelineMax()
.add(TweenMax.to($word, 0.9, {strokeDashoffset: 0, ease:Linear.easeNone})) // draw word for 0.9
.add(TweenMax.to($dot, 0.1, {strokeDashoffset: 0, ease:Linear.easeNone})) // draw dot for 0.1
.add(TweenMax.to("path", 1, {stroke: "#33629c", ease:Linear.easeNone}), 0); // change color during the whole thing

// build scene
var scene = new ScrollMagic.Scene({triggerElement: "#trigger1", duration: 200, tweenChanges: true})
.setTween(tween)
.addIndicators() // add indicators (requires plugin)
.addTo(controller);

To see live demo of the code above about SVG Drawing visit ScrollMagic where you can see comprehensive demo collection that covers almost every scenario. In the excellent documentation you can get a good overview of all methods and classes – definitely worth a look.

LEAVE A REPLY

Please enter your comment!
Please enter your name here