Read Also: 10 CSS3 Animation Tools You Should Bookmark
By default, the first page loads a continual animation demo with a linear animation. You can play with this by editing the default settings in the Motion tab or by editing the Keyframes tab.
In the keyframes list, you can add new keyframes, edit their total duration, and change the animation styles, including movements based on the X/Y axis.
First, this will look extremely confusing, especially if you’ve never done keyframe animation before. However, the more you play with this application the more it makes sense.
By default, you’ll have a ton of different easing options to mess with and they’re all super easy to customize.
The Motion graph is a lot tougher to learn but it gives you far more control over your animation easing. Stylie even lets you save custom motion effects and reuse these in the Keyframes tab for other animations.
If I could complain about one thing it’s the web app’s lack of responsive design.
I couldn’t get the entire app to fit onto my 13″ MacBook Pro screen even with the browser fully maximized. This can be an issue since the page does not have a vertical scrollbar and many of the options (like exported code) are found lower in the settings pane.
But aside from this minor annoyance, I got it working just fine on my larger monitor. And, the export quality is like nothing else you’ll find on the web.
If you’re having trouble learning the interface you can also watch this brief tutorial spanning about 9 minutes long and covering all the major features.