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 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.
Check out our new timeline, and while you’re there, why not send us a postcard?