anime.js - Controls

[Acorn]

In Pro+, I have a collection of shapes grouped and flagged with htmlclass="acorn".

I created a JavaScript object, initial, that produces random values for the animation.
The animation is fired up on page load and will animate differently on each page load.

The Links hook into the animation with javascript calls like javascript: animation.play();
Pause only works during an animation. Play resume it. Restart goes back to the beginning.
Reverse only works when animating.

There is an input range control that shows where the animation is.
It can also be used to set the animation to any step.

There is one further control - page scrolling.

Remix is experimental in that I was trying to dial up and keep a different animation. It doesn't keep.

Demo: https://shared.xara.com/3XfHoMiZSt
Design file: anime.js - Controls.xar

Acorn