3 - First Pin
New lesson, new topic : Pins.
With this new technique, we’ll see how to have an element stay fixed on the screen while the rest of the page scrolls.
Now that we’re getting more familiar with the basics of animations and scenes, I’ll skip the preparation, here’s the code we’ll be starting from :
<html>
<head>
<title>Learn ScrollMagic - 3 - First Pin</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.14.2/TweenMax.min.js"></script>
<script src="https://rawgit.com/janpaepke/ScrollMagic/master/js/jquery.scrollmagic.js"></script>
<script src="https://rawgit.com/janpaepke/ScrollMagic/master/js/jquery.scrollmagic.debug.js"></script>
<style>
html, body {
height: 100%;
padding: 0;
margin: 0;
font-family: Helvetica, sans-serif;
}
.scene {
margin: 200px 0;
padding: 50px;
outline: 1px dotted blue;
}
.pin {
padding: 20px;
background: orange;
color: white;
}
</style>
</head>
<body>
<div style="height: 51vh"> </div>
<div id="scene1" class="scene">
<div id="pin1" class="pin">Let's get pinning</div>
</div>
<div id="scene2" class="scene">
<div id="pin2" class="pin">Let's get pinning</div>
</div>
<div style="height: 100vh"> </div>
<script>
var controller;
$(function() {
controller = new ScrollMagic();
});
</script>
</body>
</html>
Nothing should feel new here, we’re importing ScrollMagic and its dependencies, adding some basics styles to our page, the markup is basic with 2 sets of .scene and .pin that we are about to animation, some spacers at the top and the bottom of the page so we can scroll around, and the ScrollMagic init JavaScript code.
If anything looks weird to you in there, it’s probably best to go back to the first lessons, at least to re-read evertything and come back to this lesson later when it’s all clear in your mind.
How to pin
If you look at your page now, it should contain 2 blue-bordered box containing an orange block. We’ll pin the orange blocks so they get fixed on the screen while the scroll continues.
Unlike Tweens that required a Tween Object to be created and then applied to a Scene Object, pins are much simpler, and made only by calling the .addPin(selector) method of a ScrollScene Object, it looks like this :
var scene1 = new ScrollScene({
triggerElement: '#scene1',
duration: 400
})
.setPin('#pin1')
.addTo(controller)
.addIndicators();
In this piece of code, we’re creating a new ScrollScene Object, with the triggerElement and the duration, like we’ve done before, then we’re calling the .setPin() method, passing it the selector matching the element we want to pin, in our example, '#pin1'.
If you now scroll, once the “trigger” reaches the “start”, the orange box should become fixed, while the page keeps scrolling, and then should get unfixed as the “trigger” reaches the “end”.
Note : You should see that the .scene got bigger, so it still contains the orange box by the end of the Scene, that’s the expected behaviour, which can be changed, we’ll see that later.
That’s all there is to it, really. Pins are just that simple, it’s just a matter of applying a Pin to a Scene, that’s it !
Pin forever
We’ll create a new Pin for our second example, I’ll let you write the code yourself this time, make it exactly like the first pin, but remove the duration option of that ScrollScene.
When scrolling now, you should see the “start” thick but no “end” one. That orange box will remain fixed until the end of the page is reached.
Expected Result
This was a very light lesson, as pins are really easy to use, but they’re essential in many cases. As always you can check out the demo page and compare with your result if you want.