anime.js - Motion Path Animation

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.

Attachment 132040

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

Hey Acorn,

that's cool – thank you.

http://flysolo.de/xara_ani_js/

FLy

Quote:

---

Originally Posted by Acorn

For XDAs that handle SVGs (XPro+ & 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.

Attachment 132040

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

---

Awesome Fly.

Quote:

---

Originally Posted by Acorn

IMPORTANT
If you Preview this animation with Shapes as SVG unticked , you will not see any animation.

---

Where can I find this setting in XDP 19, Acorn?

Quote:

---

Originally Posted by FLySOLO

Hey Acorn,
that's cool – thank you.
http://flysolo.de/xara_ani_js/
FLy

---

FLy, likewise.

As you have used the animation on individual letters, it is running a bit jumpy.
I suggest making the targets, the words "bring", "down" & "the" and use the letters b-i-r-d-s.

Acorn

Quote:

---

Originally Posted by Boy

Where can I find this setting in XDP 19, Acorn?

---

Boy, Web Properties > Website > Other > Shapes as SVG.

Acorn

Shapes As SVG is only an option on XDP+ at the moment.

https://parkeston.com/anime3/

Quote:

---

Originally Posted by Egg Bramhill

https://parkeston.com/anime3/

---

That's you in the middle then Egg.

Acorn :D

Quote:

---

Originally Posted by Chris M

Shapes As SVG is only an option on XDP+ at the moment.

---

No wonder I couldn't find it. This setting is not available in XDP 19 and, so, the Magix crowd will have to wait a (long) while till it can join the TG animation fest.....

@Acorn: You might want to edit your OP.

Quote:

---

Originally Posted by Boy

No wonder I couldn't find it. This setting is not available in XDP 19 and, so, the Magix crowd will have to wait a (long) while till it can join the TG animation fest.....
@Acorn: You might want to edit your OP.

---

Boy, I had assumed SVG was out for v19.0. Sorry.
At least it's something to look forward too.

anime.js still works on non-SVG objects, just not Motion Path, Morphing and Line Drawing.

Acorn

Thanks for clearing that up, Acorn.

These are fun. Here's my latest attempt:

LINK

Here is a demo of my design file: https://shared.xara.com/NUTQpRmOW4

Acorn

ACORN - I'm so sorry but I don't see the animation, I was looking for where I have "unticked" ????? Please help.

"If you Preview this animation with Shapes as SVG unticked , you will not see any animation."

Another one

Quote:

---

Originally Posted by Spamiky

ACORN - I'm so sorry but I don't see the animation, I was looking for where I have "unticked" ????? Please help.
"If you Preview this animation with Shapes as SVG unticked , you will not see any animation."

---

Spamiky, I am afraid it's not available unless you are using XPro+.

You could download the XPro+ trial or just enjoy the demo until Magix releases the capability.

Acorn