Using anime.js in a Xara Web Design

[Acorn]

anime.js is a JavaScript animation library that works with CSS selectors , DOM nodes & JavaScript objects & arrays as targets of manipulation of any or all of their CSS properties, SVG & DOM attributes.
Any CSS property that handles a number can be manipulated. It allows a collection of JavaScript objects to be arranged along a timeline, making it very powerful for notable effects.

It can be integrated with jQuery and Animate.css but needs neither. It shoes in nicely with Xara designs.

This is a file that explains how to add anime.js into your design or as a Template: Add anime.js for XDA Use.xar.

To enable anime.js, you can simply link to a CDN source; the <script> tag is put into the Website Code Head and so can be turned into a Template, ready to go.
The payload is a small 18kB.

I prefer using a local copy in case I am running or end up disconnected to the Internet.
This is similar to the special Name UsesJQuery that Xara employs for the same purpose.
When you do this you create a Support Folder that is married to the design filename: <filename>.xar <==> <filename>_xar_files (folder).

Animations are of the form:
var animationName = { ... };
and are called with:
anime(animationName);
or added into a timeline as:
var tl = anime.timeline({ ... });
tl.add(animationName);
Other animations are chained:
tl.add(...).add(...).add(...);
each animation follows the next or they can be told to fire up at a given time of run at an offset to the preceding ones.

I have included a simple animation script in this file to prove anime.js is enabled.
Feel free to play around with it.

Here is the demo: https://shared.xara.com/WLa8lJdn1N

Acorn

[Egg Bramhill]

Egg says this is no way to treat a chick!

[Acorn]

Egg says this is no way to treat a chick!

Egg, I think you're stretching it a bit!

Acorn