The JSON data below can be used as a Rekapi animation. To use it, import it and then associate the Rekapi.Actors
it creates with a rendering context. You can use this tool to test out and learn how to use the exported animation.
Please report any bugs you find. In addition to bug reports, feedback and feature requests are welcomed!
Feel free to follow this project on Github.
Mantra is distributed under a CC BY-NC-SA 4.0 license and is developed with by Jeremy Kahn.
839ms / 1000ms
Mantra is a timeline editing tool for web animations. It provides a rich UI for adding, removing, and tweaking individual keyframes of an animation, enabling the fine-grained control necessary to create stunning visual effects. The animations that Mantra generates are designed to take advantage of GPU acceleration for optimal performance, so only CSS transform
and opacity
properties can be animated.
This is where most of the work done in Mantra happens. This control allows you to add and define individual keyframe states of each animation property. To add a new property to the timeline, use the selector under the property tracks and then press the button.
You can add as many keyframes as you like for each property. To move where a keyframe is in the timeline, just drag it left and right with your mouse. You can also drag the playhead to zip around the timeline. If you make any change to the timeline that you don't want, you can use Ctrl + Z to undo it.
Clicking or dragging a keyframe property will make it "active" and turn it blue. The currently selected keyframe property can then be modified in the Detail Panel to the left.
This panel allows you to modify the attributes of the currently selected keyframe property. Here, you can manually edit the millisecond or value of the keyframe, as well as select an easing curve. The button will add a new keyframe of the same type to the timeline. The button will remove the currently selected keyframe property. The and buttons can be used to control animation playback. You can also use the space bar on your keyboard to toggle playback.
This set of controls is used to work with the timeline data and motion characteristics.
Once you've tweaked the timeline to your liking, it is time to export it to be used in your project. From the "Export" tab in the side bar, you can export your animation as either CSS @keyframes
or a Rekapi JavaScript animation. Select the format you would like from the dropdown.
You can modify the generated CSS for your specific needs, such as the name of the CSS class on the DOM element to be animated, the number of times to iterate the animation, and which browser vendors you want to support. Mantra will optimize simpler animations, but more complex animations will generate very verbose CSS, so be aware of that. You can control the size of the generated CSS for complex animations with the slider above the CSS text box. You can paste the generated CSS into this CodePen to test it.
Depending on your project, it may make more sense to have JavaScript animations than CSS. To get animation JSON that can be imported and run by Rekapi, select the "Rekapi" option from the dropdown in the "Export" Panel. You can use this tool to test out the exported data and learn how to integrate it into your project.
In addition to the standard easing curves, you can define your own custom curves in the "Motion" tab. To do this, select or create a "customEasing" from the dropdown and drag the circular handles. You can also type in the coordinates for the control points. Once you have defined your custom curve, you can select it in the Details Panel for the currently selected keyframe property.
Onion skin view allows you to see visualize the entire life cycle of the animation at once. To use it, check "Show onion skin" or press the O key on your keyboard.
You can save your animations to HTML5 Local Storage. To do this, open the panel and type in the name of your animation. You can also recall saved animations from here.
If you'd like to clear out the timeline and start over, click the Reset timeline button.
Stylie is a powerful tool for quickly and easily modifying animations, and it is embedded into Mantra as the Tween Editor. To open it, press the T key on your keyboard. When you have tweaked the animation to your liking in the Tween Editor, you can then export it for more fine-grained modification in Mantra's Timeline Editor by pressing the green button in the upper-right of the screen. You can also close Stylie by pressing the red button in the upper-left, or by pressing the Escape key.
The Stylie-based Tween Editor has many powerful features. To learn more about how to use it effectively, head over to the standalone Stylie application and check out its manual (hit the yellow ? button at the top or press the H key).
Mantra has a few keyboard-activated features:
(When no inputs are focused) | |
---|---|
H | Toggle this Help screen |
O | Toggle Onion Skin view |
T | Launch Tween Editor |
Space bar | Play/pause the animation |
Ctrl + Z | Undo last timeline change |
These shortcuts become active when the Tween Editor is open.
(When no inputs are focused) | |
---|---|
R | Toggle keyframe rotation Cubelets |
K | Add a new Keyframe |
C | Toggle the Control Pane |
T | Toggle the Timeline Scrubber |
H | Toggle this Help screen |
P | Toggle this crosshairs and path guide |
Space bar | Play/Pause the animation |
Esc | Close the Tween Editor |
Shift + crosshair click | Select multiple keyframes |
Ctrl + Z | Undo last timeline change |
Ctrl + A | Select all keyframes |
The code lives on Github. You are free to do what you please with the code - Mantra is distributed under a CC BY-NC-SA 4.0 license. Don't worry, this license does not extend to the animations you create with Mantra, just the application itself. You are free to use the animations created by Mantra however you please. If you would like to request a feature, please do so with the project's issue tracker.
Mantra is built with some very useful open source libraries:
Font icons are courtesy of: