On the home page and each of the series pages, we wanted to animate the dotted line that connects the books in the series.
The first challenge was coming up with the yellow dotted line itself. I could have used an image, but that would mean creating a new image for every page, and every time a new book is added or the length of a book’s description changes, we would have to make a new line image, not to mention having different images for different screen sizes. It was clear that the best thing to do was to draw the curved line on the fly. That way, the line could change shape to accommodate the books it needed to connect.
So my goal was to draw a curved line that would connect several points on the screen. On the home page, those points were the “View Series” buttons, and on the series page, the points were the map markers.
For instance, at first I thought GreenSock’s animation library would be useful, but the weakness there is that the animation isn’t triggered by scrolling, so I was going to need to use something like ScrollMagic along with it. I also looked at SnapSVG, but found it to be overwhelmingly complicated. JS Plumb seemed really promising, since it is designed to draw lines between things, but I needed a single long line to animate on scroll, not several short lines.
Here is where SVG comes in. SVG stands for “scalable vector graphics.” SVGs are images, but instead of consisting of a collection of pixels like a JPG or PNG image, an SVG is a set of instructions for drawing an image. Simple SVGs are actually human-readable: for instance, straight lines are simple pairs of coordinates stating where the line should begin and end. For example, here’s a really simple demonstration of how to draw a line with SVG:
Getting a line to curve is a little more complex, but once you understand how Bezier curves work, this is fairly simple too. With Bezier curves, you define a line, and then you define a point outside that line, and the line acts like it is getting pulled toward that point. Rachel Smith has a wonderful illustration of this:
Another great thing about SVG is that it gives you a lot of flexibility. You can embed an SVG image just like you would a JPG with the <img> tag. Or you can put the SVG code directly into your HTML, like I did in first example above. When you do that, you can use CSS to change the appearance of your SVG:
Here is a simplified demonstration of how I connected several HTML elements with a curved line:
The next step was animating the dark line that overlays the dotted line as you scroll down the page.
Fortunately, some people who are more clever than I have come up with a neat little trick for animating an SVG while you scroll. This animation technique takes advantage of the fact that you can create a dashed line with SVG, and you can determine the length of the dashes and the length of the gaps between the dashes. To animate a line as you scroll, you simply make a dashed line, where both the dash and the space between the dash are the same length as the total line. When the page first loads, the empty space between the dash is all that is displayed: in other words, nothing. But as you scroll down the page, you calculate the percentage you have scrolled, and offset the dash by that same percentage. As you scroll, the dashed part of the line moves with you, so that by the time you get to the bottom of the page, the entire line has been drawn.
- Bezier curves: http://codepen.io/rachsmith/post/grokking-quadratic-bezier-curves-in-svg
- Scrolling animation: https://css-tricks.com/scroll-drawing/
- Comprehensive SVG tutorial: http://tutorials.jenkov.com/svg/index.html
- SVG sandbox: http://infoheap.com/svg-online-rendering/
Read the full case study on creative collaboration!