Copyright © Brave Digital 2018
Getting started with ScrollMagic

Getting started with ScrollMagic

1*nu8or6qPEi58Z2BCvOs3hg

What is ScrollMagic? Well here’s what it says on the tin:

“The javascript library for magical scroll interactions. ScrollMagic helps you to easily react to the user’s current scroll position…”

I used this recently to build a few parallax effects into some case studies for Brave, and got bit stuck because of the documentation and example files being set up differently. After playing with this library for about a week, I feel confident to condense my learnings and pass them on to whomever feels like making use of this witchcraft.

1. Getting set up.

Download all the necessary files and include them in your html:

<script src=’..//jquery.min.js'></script>
<script src=’..//TweenMax.min.js'></script>
<script src=’..//ScrollMagic.js'></script>
<script src=’..//animation.gsap.min.js'></script>
<script src=’..///debug.addIndicators.min.js'></script>

2. Initialising a Controller

Initialise a ScrollMagic controller, you can have multiple controllers but you can also make use of only one controller if you prefer.

var yourControllerName = new ScrollMagic.Controller();

3. Setting up the Scene

Set up a scene and assign a trigger element to it, set a duration for the animation (Note: if you dont include the duration it would assume that the duration is 0). You can also include a offset to delay your animation like (offset: 200).

var scene = new ScrollMagic.Scene({
 triggerElement: “#trigger1”,
 duration: 500, 
 })

4. Animations

Now for the fun bit: tell the .setTween fuction what element to animate then define the duration and start telling it what to do, e.g:

  • backgroundColor: “red”
  •  left: 300
  •  scale: 1.2

For the purpose of keeping this simple I’m just adding a simple background color fade…

.setTween(“#animate”, 0.5, {backgroundColor: “red”})

…after you’ve defined all the animations use the .addTo funtion and add the Scene to the controller, like so:

.addTo(yourControllerName);

5. Adding Helpers

If you’re trying to debug or tweak your animation, then the following line can be pretty darn useful, what it does is add little markers (key frames) where your animations begin and end.

.addIndicators({name: “#animate”})

And that’s it, all together now 🙂

var yourControllerName= new ScrollMagic.Controller();
var scene = new ScrollMagic.Scene({
  triggerElement: “#trigger1”,
  duration: 500, 
  })
    .setTween(“#animate”, 0.5, {backgroundColor: “red”})
    .addTo(yourControllerName);
    .addIndicators({name: “#animate”})

Taking it a little further

Multiple triggers and animations…

So now that you know now how to set up a controller and scene, you may want to start creating complex animation. There are a few ways of creating complex animation: you can trigger a few animations with one trigger and play with offsets, or you can make use of multiple triggers for your animations.

Tip: When manipulating elements to move in the dom it helps to set your elements positioning to absolute and their parent to relative. This way, you can highlight the parent and see exactly how your elements are moving within it.

So just like before, you would set up your controller and scene, but this time you can create a extra scene and just add the new trigger and animation

var controller = new ScrollMagic.Controller();
var scene = new ScrollMagic.Scene({
  triggerElement: "#trigger1",
  duration: 100,
  tweenChanges: true
  })
  .setTween("#animate1", 0.5, {width: "200px", left: "100px"})
  .addIndicators({name: "Animate 1"})
  .addTo(controller);
var scene = new ScrollMagic.Scene({
  triggerElement: "#trigger2",
  duration: 100,
  tweenChanges: true
  })
  .setTween("#animate2", 0.5, {backgroundColor: "#FFE9CC", width:    
  "300px", right: "200px", top: "200px"})
  .addIndicators({name: "Animate 2"})
  .addTo(controller);

1*aptBvhdwk1HeYW_YV7GqxQNow I know how I hate it when someone posts a tutorial and doesn’t include any code for me to just test with locally, so here you go, now go be sexy…

1*C0w2atcYPg_TvGZI3OH0Mw

<!DOCTYPE html>
<html>
<head>
 <title>Test 1</title>
 <meta charset="UTF-8">
 <link rel="stylesheet" href="css/normalize.css">
 
<style media="screen">
 .demo{max-width: 900px; margin: auto;}
 .s1{height: 100px; background: #FFCCCC;}
 .s2{height: 400px; position: relative; display: block;}
 .demo{background:#FFDADA;}
 .box1{
 height: 100px;
 width: 100%;
 background: red;
 margin: 0;
 left: 0;
 display: block;
 position: absolute;
 opacity: 0;
 }
 .box2{
 height: 100px;
 width: 10%;
 background: red;
 margin: 0;
 right: 0;
 display: block;
 position: absolute;
 opacity: 0;
 }
 p{margin: 0;}
 .part{width: 50%; display: block; float:left; padding: 20px 0;}
 </style>

</head>
<body>

<section class="demo">

 <div class="s2"></div>

 <div id="trigger1" class="s1">Trigger1</div>
 
 <div class="s2">
 <div id="animate1" class="box1"><p>Change</p></div>
 <div id="animate2" class="box2"><p>Change</p></div>
 </div>

 <div id="trigger2" class="s1">Trigger2</div>

 <div class="slideScene">
 <div id="animate3" class="part"><p>Part1</p></div>
 </div>

 <div class="s2"></div>

</section>

<script src=’http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src=’https://cdnjs.cloudflare.com/ajax/libs/gsap/1.16.0/TweenMax.min.js'></script>
<script src=’https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.3/ScrollMagic.js'></script>
<script src=’https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.3/plugins/animation.gsap.min.js'></script>
<script src=’https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.2/plugins/debug.addIndicators.min.js'></script>

<script>

function percentage(p){
 return $( document ).width() / 100 * p;
 }

var controller = new ScrollMagic.Controller();

var scene = new ScrollMagic.Scene({
 triggerElement: “#trigger1",
 duration: 100,
 tweenChanges: true
 })
 .setTween(“#animate1", 0.5, {backgroundColor: “black", width: percentage(40), left: percentage(20), opacity: 1})
 .addIndicators({name: “1 (duration: 0)"})
 .addTo(controller);

var scene = new ScrollMagic.Scene({
 triggerElement: “#trigger1",
 duration: 100,
 tweenChanges: true
 })
 .setTween(“#animate2", 0.5, {backgroundColor: “#FFE9CC", width: percentage(25), right: percentage(10), top: “200px", opacity: 1})
 .addIndicators({name: “1 (duration: 0)"})
 .addTo(controller);

var scene = new ScrollMagic.Scene({
 triggerElement: “#trigger2",
 duration: 200
 })
 .setTween(“#animate3", 0.5, {backgroundColor: “purple", })
 .addIndicators({name: “1 (duration: 0)"})
 .addTo(controller);
</script>

</body>
</html>

Save

Save

Save

Save

Save

Save

Save

Save

Save

Save

Save

×
Brave Enquiry
Hi there!

Before we kick off, we would like to get
to know you a little better.

* these fields are required

Great thanks,

Please tell us about your project:

Worried about keeping your idea safe?

No problem! Check out our standard NDA here and then select agree below to sign the NDA.

No problem! Tell us more about your .

What are you hoping to achieve with it? What is its purpose?

We need some more info…

Can you tell us more about your project?

Ok that's great!

Typically our website projects range from R150k - R750k depending on the project complexity.

Ok that's great!

Typically our app projects range from R350k - R1.5m depending on the project complexity.

Ok that's great!

Typically our custom solution projects range from R350k+ depending on the scope of the project.

Not sure? Not to worry...

Don't worry, we'll discover what you're looking for in no time.

Let’s talk budget

What is your budget for this project?