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})
.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
]);[/cc]

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
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);[/cc]

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

Best Programming Languages for Blockchain

Which are these the best programming languages for blockchain? Developers are presently utilizing prevalent programming languages like C++ and Java to manufacture custom blockchain...

Social VR world: Facebook Horizon should start in 2020

Facebook has announced with Horizon a new social VR world. This should allow users to create their own virtual reality worlds. The stop, however,...

Angular 9 Next Versions: Ivy, Bazel and more

Angular 9 next versions are here. Besides updates to Ivy, the update includes three features for the Language Service and Service Worker and changes...

Google Releases Dart 2.5: Code Completion through Machine Learning

The latest version of Googles C-Alternative, Go 1.13, is barely released, as the JavaScript derivative of the Internet giant follows: Dart 2.5 is here!...

Laravel 6.0 is here: Support for Serverless Platform Laravel Vapor

A new update is available for the framework Laravel. Laravel 6.0 is compatible with Laravel Vapor, a serverless deployment platform. The development team has...

Related Stories

Leave A Reply

Please enter your comment!
Please enter your name here