[Variable fonts] Animate the headings as they scroll into view

[melanierichards]

Here's the intended behavior:

Each major section of the guide has a class l-section--timeline. Each of these has an h2 heading, and a ::before pseudo element, currently rendered as a long, vertical line. By default, these lines should actually have height: 0, as we're going to animate them.

When the user scrolls and the h2 element is within the top-most third of the viewport, or the user has reached the end of the doc:

1. Transition the height of l-section--timeline::before to 14em.
2. At the end of this transition, transition one axis on the font of the heading. Final font is unknown, let's use Bahnschrift for now. We can animate the weight from a lighter weight to the boldest available. (This can be updated later).

Not sure of timings on the transitions, after the functionality is in, we can pair program to tweak the timings.

[melanierichards]

Closing because it's completed!