Since I started at Clearleft, I’ve had my eye on our timeline…

It’s great for our purpose though, as now anyone at Clearleft can update the timeline, just by adding an event to a spreadsheet!
The one minor little hiccup in this plan is that the “static” in static site generator means that you have to rebuild the site when content changes.
Luckily Netlify allows you to trigger a build via a post to a webhook – we can do this via slack integrations! My colleague Trys wrote about this
I love this bit. It feels like magic! Plus, it’s a tool everyone at Clearleft uses, so no more waiting for one of the devs to press the magic button.

The fun bit
I don’t know if you’re aware, but I really like SVG animation.
The bit I enjoyed making the most was this little hover interaction, it’s using an SVG mask and Greensock’s quickSetter to performantly update the mask position as you move your mouse.

The rest of the animation is largely handled with a new Greensock plugin called scrollTrigger. It was announced a few weeks before starting the timeline rebuild, and I knew this would be the perfect place to try it out.
ScrollTrigger has great browser support, plays nicely with Greensock timelines (obviously) and can do all sorts of things that would be tricky and time-consuming to handroll yourself.
Here’s a little reduced test case showing how I was animating the background graphics on scroll.
See the Pen Timeline scroll by Cassie Evans (@cassie-codes) on CodePen.
Check out our new timeline, and while you’re there, why not send us a postcard?