1 Attachment(s)
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
Re: anime.js - Motion Path Animation
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
Re: anime.js - Motion Path Animation
Re: anime.js - Motion Path Animation
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?
Re: anime.js - Motion Path Animation
Quote:
Originally Posted by
FLySOLO
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
Re: anime.js - Motion Path Animation
Quote:
Originally Posted by
Boy
Where can I find this setting in XDP 19, Acorn?
Boy, Web Properties > Website > Other > Shapes as SVG.
Acorn
Re: anime.js - Motion Path Animation
Shapes As SVG is only an option on XDP+ at the moment.
Re: anime.js - Motion Path Animation
Re: anime.js - Motion Path Animation
Quote:
Originally Posted by
Egg Bramhill
That's you in the middle then Egg.
Acorn :D
Re: anime.js - Motion Path Animation
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.