Step 1 in the graphic. It triggers in the middle of the viewport. For this graphic, it is the same as the initial state so the reader doesn’t miss anything.
79 |
Step 2 arrives. The graphic should be locking into a fixed position right about now. We could have a whole bunch of these “fixed” steps.
80 |
Step 3 concludes our brief tour. The graphic should now go back to its original in-flow position, elegantly snapping back into place.
Step 1 in the graphic. It triggers in the middle of the viewport. For this graphic, it is the same as the initial state so the reader doesn’t miss anything.
78 |
Step 2 arrives. The graphic should be locking into a fixed position right about now. We could have a whole bunch of these “fixed” steps.
79 |
Step 3 concludes our brief tour. The graphic should now go back to its original in-flow position, elegantly snapping back into place.
Step 1 in the graphic. It triggers in the middle of the viewport. For this graphic, it is the same as the initial state so the reader doesn’t miss anything.
78 |
Step 2 arrives. The graphic should be locking into a fixed position right about now. We could have a whole bunch of these “fixed” steps.
79 |
Step 3 concludes our brief tour. The graphic should now go back to its original in-flow position, elegantly snapping back into place.
Step 1 in the graphic. It triggers in the middle of the viewport. For this graphic, it is the same as the initial state so the reader doesn’t miss anything.
78 |
Step 2 arrives. The graphic should be locking into a fixed position right about now. We could have a whole bunch of these “fixed” steps.
79 |
Step 3 concludes our brief tour. The graphic should now go back to its original in-flow position, elegantly snapping back into place.
Step 1 in the graphic. It triggers in the middle of the viewport. For this graphic, it is the same as the initial state so the reader doesn’t miss anything.
78 |
Step 2 arrives. The graphic should be locking into a fixed position right about now. We could have a whole bunch of these “fixed” steps.
79 |
Step 3 concludes our brief tour. The graphic should now go back to its original in-flow position, elegantly snapping back into place.
Step 1 in the graphic. It triggers in the middle of the viewport. For this graphic, it is the same as the initial state so the reader doesn’t miss anything.
78 |
Step 2 arrives. The graphic should be locking into a fixed position right about now. We could have a whole bunch of these “fixed” steps.
79 |
Step 3 concludes our brief tour. The graphic should now go back to its original in-flow position, elegantly snapping back into place.
72 | Scrollytelling is the best (or the worst depending on your
73 | point of view). We love it here at
74 | The Pudding. But creating a scroll-driven story is hardly a standardized practice, and there are many libraries
75 | out there that can help make it happen.
76 | Check out my
77 | follow-up post, where we look at mobile solutions.
78 |
79 |
80 | “Scrollytelling” is when content (e.g., a graphic) is revealed or changed as the user scrolls. It does not alter scroll behavior,
81 | but simply monitors it. As Martha Stewart would say, “It’s a good thing.” Do not confuse this will scrolljacking, which
82 | manipulates the browser’s scroll mechanics with JavaScript, which is generally considered bad practice. Here are a few
83 | examples of the good stuff in action:
84 |
100 | In this post, I look at how to tackle a simple scroll-driven chart using six different libraries and share
101 | my thoughts on each implementation. It is inspired by Lisa Charlotte Rost’s
102 | great post comparing charting libraries.
103 |
104 |
105 | I'm not going to get into the different types of scrollytelling, or debate the serious moral and ethical implications of
106 | the practice. I defer to
107 | these
108 | posts for scrollytelling primers.
109 |
110 |
We want to make something like this:
111 |
112 |
113 | There are two goals here:
114 | 1. Use the "scroll-to-trigger" pattern where the trigger element (in our case a block of text) tells the chart to update
115 | to a new state.
116 | 2. We want the chart to stay fixed while the text moves and have it snap back into place as it enters and exits, because
117 | often the scrollytelling portion is not the entire story.
118 |
119 |
120 |
121 | Disclaimer:
122 | this post does not cover responsive solutions (though you should do it, and most libraries make it pretty painless).
123 | If you have the audacity to resize your browser, refresh the page. For mobile and responsive solutions, check out my
124 | follow-up post,
125 |
126 |
127 |
128 | Update (November 2017): I created my own scrollytelling library,
129 | scrollama.js. The goal of this library is to provide a simple interface for creating scroll-driven interactives.
130 | Scrollama is focused on perfomance by using IntersectionObserver in favor of scroll events.
131 | Check it out.
132 |
143 | Waypoints is a very solid choice. It has been around for a while, and supports both vanilla JS and jQuery integration. It
144 | has an easy to understand API, and good documentation. It has a lot of add-ons, like a debugger extension to reduce
145 | some head-scratching, inview detection, and sticky elements. Below is the core code used to implement this library.
146 | See the demo for the full code with comments.
147 |
202 | ScrollStory is a jQuery-based library used for some projects at The New York Times. It has a super clear API and supports
203 | tons of options. The two big drawbacks that I found were that it depends on jQuery (which is not a problem if you use
204 | it by default) and it requires some additional code to get the fixed graphic part working properly. If those two things
205 | are not important to you, I recommend exploring this one since it is setup to handle a variety of use cases.
206 |
257 | ScrollMagic is based on Superscrollorama, a previously popular library. Like Waypoints, it is quite robust, well-documented,
258 | and totally customizable. It has a great add-on for debugging. It also has no dependencies, which is nice. I do sometimes
259 | notice that the scroll events get a bit janky and won’t fire immediately, which is a built-in function the library has
260 | to deal with the scroll events.
261 |
324 | graph-scroll.js is a d3 plugin, so only consider it if you are familiar with and using d3. It is really lightweight, and
325 | it was created by
326 | Adam Pearce who knows a thing or two about scroll-driven graphics. It is very singularly focused though, so it will
327 | likely require you to customize the library a bit to get what you want. That being said, it is only the library that
328 | specifically implements the transition to and from a fixed position graphic, which is great.
329 |
359 | in-view.js is a great library in general, and I tried to adapt it to my scrollytelling needs. While one of its features is
360 | performance optimization, that comes with the downside of only having a single global offset for triggering an enter/exit.
361 | I had to use a
362 | modified version that allows for creating multiple instances to make it work for this scenario. Also, the offsets
363 | are a bit confusing to use in this context. In short, this library is amazingly simple to use for just triggering, but
364 | definitely not designed for customized scrollytelling.
365 |
444 | When in doubt, roll your own. There will be a bit more coding involved (and some fun math!), but you get to familiarize yourself
445 | with the core concepts of how scroll-driven libraries are created. It is all custom, so you can have it do whatever
446 | you want. You will want to consider performance optimizations like throttling and such.
447 |