Hacker News Reader

What technology did you use for the animations? I've a bunch of itches I'd like to scratch that would be improved by having some canvas animated explainers or UI but I never clicked with anything. D3 back in the day.

A rudimentary look in the source code showed a <traffic-simulation/> element but I'm not up to date enough with web standards to guess where to look for that in your JS bundle to guess at the framework!

View on HN

It uses PixiJS (https://pixijs.com/) for the 2D rendering and GSAP3 (https://gsap.com/) for the animation. The <traffic-simulation /> blocks are custom HTMl elements (https://developer.mozilla.org/en-US/docs/Web/API/Web_compone...) which I use to encapsulate the logic.

I've been thinking about creating a separate repo to house the source code of posts I've finished so people can see it. I don't like all the bundling and minification but sadly it serves a very real purpose to the end user experience (faster load speeds on slow connections).

Until then feel free to email me (you'll find my address at the bottom of my site) and I'd be happy to share a zip of this post with you.

I've uploaded the code for all of my visualisation posts here: https://github.com/samwho/visualisations.

Enjoy! :)

Thank you so much for the detailed reply. pixijs looks amazing, and gsap looks pretty approachable!

Reply on news.ycombinator.com