Now That’s Magic: Implementing ScrollMagic

Now that our new website has launched we thought it would be a great idea to share our experience with the ScrollMagic. ScrollMagic is an open-source jQuery Plugin that makes it easy for developers to create animations that are triggered on scroll. For example, on our homepage, we use ScrollMagic to animate-in the next section of hidden content when the user scrolls to a certain point of the page. ScrollMagic is easy to implement and provides a wide variety of uses and options. Most importantly, ScrollMagic utilizes the lightweight GreenSock animation library, so you won’t have to worry about inefficient animations causing browser lag.

All you need to start using ScrollMagic is jQuery and GreenSock TweenMax. Import these libraries like so:

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
<script src="/js/lib/scrollmagic/jquery.scrollmagic.min.js"></script>
(Your directory paths may differ)

Now we’re ready to start writing our first ScrollMagic animation. First, we initialize the ScrollMagic controller. All of the Scenes on this page will be added to this controller.

var controller = new ScrollMagic();

Then we create our first tween using TweenMax.to(). The first parameter this function takes in is a jQuery selector to choose the element we want to animate. The second parameter is the duration of the animation, and lastly, an array of CSS attributes to manipulate the selected element.

var tween = TweenMax.to("#animate1", 0.5, {opacity:1, top:0});

Finally, we create the Scene by setting the triggerElement, again using a jQuery selector. Then we set our previously created tween to this scene, and finally, add the scene to the master controller.

var scene = new ScrollScene({triggerElement: "#trigger1"})
.setTween(tween)
.addTo(controller);

To see a working version of this example visit here.

So this is a basic version of how we at The Buddy Group used ScrollMagic to add a little animation to our website, but there’s still a wide array of use cases for ScrollMagic such as the ability to pin and parallax elements and much more.

After using ScrollMagic for a few months we’ve come up with a list of helpful tips to keep in mind while developing your own ScrollMagic application.

• ScrollMagic works great for Desktop animations but doesn’t translate to iOS. You’ll want to disable your scroll animations on iPad and iPhone because of the way Mobile Safari delays animations until after the user has finished scrolling.
• If you need to run a function after your animations have completed, take advantage of TimeLineMax’s onComplete callback.
• If you don’t want your animations to reverse themselves when the user scrolls back up, use scene.reverse(false).
• If you need to set options for all your scenes, take advantage of the globalSceneOptions like this

  ScrollMagic({globalSceneOptions: {triggerHook: .75} }).

• When repositioning an element remember that the position of the element will also change your trigger point. Use scene.offset() to normalize the trigger points or use a placeholder element as the trigger point.
• Don’t forget you can always enable visible trigger markers by including the jquery.scrollmagic.debug.js and calling scene.addIndicators().