From f6fc90c6c289d94715070e8bfd44c4ac6294a063 Mon Sep 17 00:00:00 2001 From: Jim Higson Date: Tue, 24 Sep 2024 14:09:29 +0100 Subject: [PATCH] add animations description --- content/animations.md | 17 +++++++++++++++++ content/listing | 1 + 2 files changed, 18 insertions(+) create mode 100644 content/animations.md diff --git a/content/animations.md b/content/animations.md new file mode 100644 index 0000000..7fb2d76 --- /dev/null +++ b/content/animations.md @@ -0,0 +1,17 @@ +🦄 Animations +========== + +The number one question I get asked about this site is how I made the the animations on the Why Oboe.js page. + +jQuery was common back when this site was made, but was starting to get a bad rep. The animations are all rendered +using jQuery to manipulate svgs +(like you would manipulate any other DOM), but the principles of how they're animated could apply to React, d3, or any other more modern tech. + +The crux is, there's a tiny MVC simulation engine implemented using OOP. Back in the day, es6 classes didn't exist, so +the OOP is all done via direct prototype manipulation. The code is all in the [demo](https://github.com/jimhigson/oboe.js-website/tree/master/statics/js/demo) directory. Find the simulation models in [models dir](https://github.com/jimhigson/oboe.js-website/tree/master/statics/js/demo/model) and the views in [views](https://github.com/jimhigson/oboe.js-website/tree/master/statics/js/demo/view). The models all use pub-sub to communicate with each other (when they start or end doing something) and the views also subscribe to the pubsub to know when they should render. + +There's a widespread understanding that jQuery is opposed to MVC. Sure, I wouldn't use it today, but when it was +strictly called only from the view code, it could be useful for manipulating the DOM. Today I'd use React, or call the +vanilla DOM directly. + +I think it's an interesting window into how we could still make custom things with constrained tech, and severely limited and incompatible browsers. \ No newline at end of file diff --git a/content/listing b/content/listing index 3804a1e..4aa71db 100644 --- a/content/listing +++ b/content/listing @@ -3,3 +3,4 @@ examples.md api.md download.md discuss.md +animations.md