ScrollMagic.js Explained: Combining Parallax and Scroll Animations

This guide provides a practical tutorial on how to implement engaging parallax effects and scroll-based animations on a webpage using ScrollMagic.js.
This technology enhances website engagement by providing visitors with an interactive experience.
The content is designed to be easy to understand for beginners while also useful for experienced developers.

What is ScrollMagic.js?

ScrollMagic.js is a powerful JavaScript library that makes it easy to create interactive animations triggered by scrolling actions on a website.
By using this library, you can control the movement of elements on the page according to the scroll position.
It’s especially effective for achieving parallax effects.

Environment Setup

Before using ScrollMagic.js, you need to include several essential files in your project. These include:

• jQuery
• GreenSock Animation Platform (GSAP)
• The main ScrollMagic.js file
• The ScrollMagic GSAP plugin

By using these libraries together, even complex animations can be implemented smoothly.

Basic CSS Setup

When using ScrollMagic, it’s important to apply appropriate styles to the target elements of your animations.
Load the normalize.css file. Below is the CSS code for the parallax and scroll animation area (.box1).
Here’s an example of the basic CSS configuration:

<link rel="stylesheet" href="normalize.css" type="text/css">
<style>
body {
  padding: 0;
  height: 2000px;
  width: 2200px;
}
h1{
  text-align: left;
  font-size: 20px;
  line-height: 1.8em;
  padding: 15px 50px;
}
.box1 {
  display: inline-block;
  position: relative;
  border-radius: 8px;
  border: 0px solid white;
  text-align: center;
  vertical-align: middle;
  padding: 0 5px;
  min-width: 100px;
  height: 100px;
  margin: 0 auto 0 -60px;
  background-color: #8ED2DD;
  left: 50vw;
  top: 200px;
}
.box1 p{
  margin: 20px 15px 5px 15px;
  font-size: 13px;
  font-weight: lighter;
  color: white;
}
</style>

HTML Markup

Prepare the parallax and scroll animation area (class=”box1″).

<h1>Display parallax and scroll-linked animations using ScrollMagic.js.<br>Try scrolling down or to the right.</h1>

<section id="multiDirect">
<div id="animate" class="box1">
  <p>
    Scroll down to enlarge<br>
    Scroll right to rotate
  </p>
</div>
</section>

Setting the ScrollMagic Controller and Scene with JavaScript

Load the jquery.min.js (v3.3 series), gsap.min.js, ScrollMagic.js, and animation.gsap.js files.
Then, initialize ScrollMagic.Controller().
Since we’re loading additional JS plugins besides ScrollMagic.js, you can add animations and rotations using the following script:

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="gsap.min.js"></script>
<script type="text/javascript" src="ScrollMagic.js"></script>
<script type="text/javascript" src="animation.gsap.js"></script>

<script>
$(function () {
    // init controller
    var controller = new ScrollMagic.Controller();

    // build tween
    var tween = TweenMax.to("#animate", 0.5, {scale: 3, ease: Linear.easeNone});

    // build scene
    var scene = new ScrollMagic.Scene({triggerElement: "#multiDirect", duration: 400, offset: 250})
  .setTween(tween)
  .setPin("#animate")
  .addIndicators({name: "resize"}) // add indicators (requires plugin)
  .addTo(controller);

    // init controller horizontal
    var controller_h = new ScrollMagic.Controller({vertical: false});

    // build tween horizontal
    var tween_h = TweenMax.to("#animate", 0.5, {rotation: 360, ease: Linear.easeNone});

    // build scene
    var scene_h = new ScrollMagic.Scene({duration: 700})
  .setTween(tween_h)
  .setPin("#animate")
  .addIndicators({name: "rotate"}) // add indicators (requires plugin)
  .addTo(controller_h);
});
</script>

ScrollMagic.js Parallax and Scroll-Linked Animation Demo Page

To see the actual effect in action, visit the demo page via the link below.

ScrollMagic.js Parallax and Scroll-Linked Animation Demo Page

Source: ScrollMagic Demo

For more information and examples of ScrollMagic.js, visit the official site.

ScrollMagic Demo

Conclusion

By using ScrollMagic.js, you can easily add innovative and interactive elements to your web pages.
We hope this article provides useful information for your projects—from basic setup to practical implementation.
As a next step, try incorporating this powerful library into your own projects.

*Please use this material at your own discretion.
Do not reuse the Google Analytics tag found in the demo page’s head section.*