Homage to Egg's Recent Railway Animation

[Acorn]

I have never much been interested in animations but Egg's train was fun.
Egg has used SVGator a lot of graft to achieve his masterpiece.

I am lazy and I have always suggested Xara license Greensock, which allows animations of any DOM, array or SVG in wizard fashion.

My attempt uses straight Xara with one JavaScript library (anime.js) that is all of 16kB.
My animation script is genuinely a first go and this is a text file edited in Notepad++ that is only 5.6kB.

Here is my attempt: https://shared.xara.com/ZNhW2YIyNJ. UPDATED: https://shared.xara.com/7WjyzQiqkw.

To publish, I have had to shoehorn in the anime.js animation library into the Website > HTML Code (head) section as the Xara site does not handle external assets.

I have found that the design cycle is a delight.
STEP 1
I have a template with anime.js included and a <script> call to my animation file.
STEP 2
All I have to do is design as normal and add a special Name of ' htmlclass="<objectClassName>" ' for every item that has an animation effect.
anime.js comes with a timeline command where you add a sequence of animation calls with start times.

STEP 3 (Partial)
My script is like this:

var story = anime.timeline({loop: true,}); //repeat when finished


story
.add(quiet) //do nothing for 5 seconds
.add(warn) // flash on & off for 500ms
...
.add(stop, '+=150') //blinks in a 500ms cycle
.add(flbDown, '-=5000') // lower a barrier



The actual animation effect is a JS object (a collection of variables & values (and functions)). For 'flbDown', we have:

var flbDown = {
targets: '.fl-barrier',
rotate: '91deg',
scale: [1, 1.02, 1.01, 0.98, 1, 0.97, 1],
duration: 5000,
easing: 'cubicBezier(1.00, 1.42, 0.84, 0.93)',
};

I have 20 animations acting across 33 stages for my engine run.
STEP 4
I change and save the animation file externally (with a <script> link) and Preview Website without ever having to resave the design file.

I will deconstruct the engine run that I've made in a separate thread.

It doesn't have to be a full length cartoon, it can be applied to rollovers with different in and out effects, something Xara has failed in to date.

Look at https://animejs.com and https://greensock.com. Both do similar.
Greensock is slick, anime.js is edgy. I think both top SVGator as the payload is minimal and readily editable, even after delivery. I am sure Egg will advise otherwise.

Acorn