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

Frontend Tools 2019 survey: jQuery Threatened

Frontend Tools 2019 survey showed that React is voted the most important as well as the most widely used JavaScript tool. For the first...

PHP 8.0: Vote on Union Types ended

PHP 8.0 is scheduled for 2020. Recently, the PHP development team in PHP Internals voted on Union Types as a new feature for PHP....

Angular 9 Next versions: Bazel Schematics switched to Ivy

With Angular 9 next versions, the upcoming major version of the JavaScript framework has again received a number of feature updates, notably the innovations...

HP enters strategic partnership with ExpressVPN to increase security offerings on consumer laptops

In light of the recent challenges faced by the cryptocurrency space and the technological sphere at large, security has become a serious issue among...

Node.js 12.12: New flag for easier electron integration

Node.js 12.12 is here to bring a new flag to help work with embedders like Electron. In addition, source maps are now available for...

Related Stories

Leave A Reply

Please enter your comment!
Please enter your name here