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.

[cc lang=”javascript”][/cc]

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

[cc lang=”javascript”]// init controller
var controller = new ScrollMagic();

// assign handler “scene” and add it to Controller
var scene = new ScrollScene({duration: 100})

// add multiple scenes at once
var scene2;
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:

[cc lang=”javascript”]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

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

// build tween
var tween = new TimelineMax()
.add($word, 0.9, {strokeDashoffset: 0, ease:Linear.easeNone})) // draw word for 0.9
.add($dot, 0.1, {strokeDashoffset: 0, ease:Linear.easeNone})) // draw dot for 0.1
.add(“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})
.addIndicators() // add indicators (requires plugin)

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.

Recent Articles

5 tips for effective remote pair programming

Home office is a challenge where people work and communicate closely together. Pair programming, i.e. working together on a source code, also lives from...

What are the Reasons You Should Play Online Bingo?

Online bingo is fast becoming popular among the masses. It uses unique bingo software to bring fun to you without you having to go somewhere to...

Most in-demand IT jobs from last decade

Uber for travel, Netflix for leisure and Google for everything is the ideal routine that we all wish to follow, of course with Instagram...

The finest text editor for professional bloggers

It is a fact that blogs have replaced books and magazines due to increasing popularity of the online world. Serious readers subscribe to blogs...

Angular 9 final release released

Angular 9 final is here! The new version was released a little late. Ivy is of course one of the new features, but that's...

Related Stories

Leave A Reply

Please enter your comment!
Please enter your name here