Motion.js is a lightweight plugin for PlayCanvas that allows you to create simple animations with timeline functionality. With Motion.js, you can easily move boxes or objects around in your scene, loop them nicely, and control their playback speed and direction.
Features
Timeline editor: Motion.js includes a simple timeline editor that lets you create and edit animations by adding keyframes and adjusting their properties (such as position, rotation, scale, and opacity).
Flexible interpolation: Motion.js supports various interpolation methods (such as linear, quadratic, cubic, and elastic) to smoothly transition between keyframes and create realistic motion.
Looping options: Motion.js provides several looping options (such as loop, ping-pong, and yoyo) to control how the animation repeats and plays.
14 Likes
That’s really cool @commention ! I had something similar in the tutorials section but looks like you’ve turned the dial to 11 
Thanks for sharing this, Cem! It’s a powerful and versatile tool.
Hello
I see you added support for “events”.
I am already a little familiar with Playcanvas events system but for some reason I can’t figure out how to make it work with your tool.
For example if I have an animation I call “rotate” and an event named “goRotate” how can I fire the rotate animation from an other script ?
I tried the “normal way” ; basically with a script in my root entity saying :
this.app.fire("motion:goRotate");
But it doesn’t work…Is there a way to achieve it ?
Thanks for sharing your tool anyway, it is really great and convenient !
It’s the opposite. The motion.js fires the events as part of the animation so you can hook some logic or other behaviour when the animation reaches time. Similar to animation events in PlayCanvas Anim Events | Learn PlayCanvas
1 Like
From what I can see in the source, to trigger a motion by event you call the event Motion and pass the motion name and true if you want to force play the animation on the app or entity object.
eg
this.app.fire('Motion', 'rotate', true);
// or
this.entity.fire('Motion', 'rotate', true);
1 Like
thank you much for this detailed answer Yasutar !
How would I fire a function when the animation is over or when it starts?
1 Like
