anime.js - Motion Path Animation

[Acorn]

For XDAs that handle SVGs (XPro+ only) [Not yet released for Magix XWD(P) & XDPX v19+], most shapes are rendered as SVG.
IMPORTANT
If you Preview this animation with Shapes as SVG unticked , you will not see any animation.

The Animation Path has a special Name htmlclass="curve"
Anything you want to move along this path has a special Name htmlclass="shape".

anime.js is called from the Website Code (head).
The Animation script is in the Page code (body).

You can make changes:
The numbers her are all milliseconds.
The object action's parameters all are on separate line ending with a comma.
I would avoid messing with any part of the path() ones unless you are comfortable with anonymous JS functions.

anime.js - Soaring.xar

Adding a stagger makes something that is quite regular appear more natural.
Drag on the butterflies or the blobs. You CPU may start to chug if you add too many.
Change the shape; I added a rounded corner box to swap in.
anime.js documentation is https://animejs.com/documentation/#motionPath.

Acorn