Egg, I understand.


I look at the code and read it as a set of instructions:

The object 'flbDown' is affecting the shape with a ClassName label 'fl-barrier', which, on the design is vertical and is acting as the Front-Left Barrier.
Over a 5-second period rotate the barrier just over a quarter of a turn so it has a slight overshoot.
In doing so give it a slight turbulence through its arc to make it look ratchety, in need of maintenance.
Finally, try and give it some physical weight by including a bounce off the end buffer.

I started off with:

var flbDown = {
targets: '.fl-barrier',
rotate: '90deg',
duration: 5000,
};

The rest was me trying to make it more realistic and discovering what was possible.

For the Easing, I used https://cubic-bezier.com/.

The signage, I lifted as SVG, I thought, from the Govt website.
Easy to change.

I also mucked up the Sun.
I had corrected the fencing scaling but forgot I used the same function for the Sun.

I'll republish later on.

Acorn