The best html5 Animation tool – Saola Animate Version 1.0.1 reviews by elearning supporter team in 2017. Free trial in 30 days – Free Download for Windows and Mac
The massive rise of HTML5 has provoked the development of numerous HTML5 authoring tools, of which Saola Animate is an emerging desktop application full of promise. The tool has been developed and released by Atomi Systems Inc. in this summer.
Saola Animate is a cross-platform application (Windows and MacOS) for HTML5 animations and interactive web content. It is a great tool for creating CSS-based animations with a rich visual editor, friendly to those new to the world of HTML5 animation. But don’t get me wrong, the tool can still please those demanding users who expect a more fully-featured development environment.
Saola Animate license cost is $59 perpetual and $49 per year. At that price, definitely you get your money’s worth. It also offers a 30-day trial will all the features, so you can download and check out the tool for free.
Learn More About Saola Animate Here
Saola Animate Version 1.0.1 full reviews 2017
User Interface
Saola Animate has a one-window interface featuring a work area – the Canvas – in the middle with a timeline below, a toolbar above, and a set of docked panes. Properties are divided into a number of different sections in the Properties pane to the right. Everything can be shown, hidden, or rearranged to suit oneself, even on a trial period of 30 days. The dark theme with orange outline highlight on focus looks very professional, but if you want it bright or else, you may have to wait for the next update.
Keyframe-based Animation
The Canvas, acting like a canvas for painting, shows the scene onto which you place, modify, and arrange all elements ranging from created ones (e.g. text, shapes, buttons) to imported ones (e.g. images, audio, video, HTML widgets). Scenes in Saola Animate are used to split up separate animations. The concept of scenes is similar to that of slides in MS PowerPoint, so scenes are of help when you have distinct sets of elements and you want to put them indistinct places. You can create transition effects between scenes, making animated storybooks, for example. Scenes are also effective when it comes to interactivity as you can jump from this scene to that scene in a matter of clicks.
Now back to the keyframe-based animation. Elements have so many properties, of which most can be animated (while some others are just editable). In the Timeline, just add at least two keyframes to a property, change the property value over time, and an animation is created. One nice touch is that each element together with its animation bars are labeled with a certain color, so it’s very easy to identify and work with animations in the intuitive Timeline.
Saola Animate also offers some timeline-editing features that help out a lot such as keyframe keyboard shortcuts, timeline snapping, and a big one: Auto-Keyframe Mode. The name tells it all. Basically, this feature allows automatically adding new keyframes when you change the property value. Definitely a time-saver! Check out the Auto-Keyframe Mode on Saola Animate official YouTube channel. This channel also has many valuable tutorials to explain the basics, so give it a look if you have time.
Interactivity
Any item in Saola Animate from elements, scenes to timelines, documents, or even preloaders can be made interactive. Many events are available such as clicking/tapping, mouse enter, mouse leave, etc. For the actions, there is a list of various built-in actions that can be triggered for each event. Most of the time, you can access the Event Handlers to find what you need and then select appropriate events/actions from lists. Occasionally, for more advanced interactivity, you have to delve into JavaScript and write your own custom functions and trigger it here.
The JavaScript editor is a powerful editor for sure. It supports many useful features such as auto suggestion, text highlighting, bracket matching and so on, helping you deal with your code more efficiently and save time. Right inside the editor, a wide variety of JavaScript APIs is published to perform different tasks. So, if you are a tech guru who wants to create amazing animations with cool effects, it’s time to hand code. A good addition is that you can export, store, and reuse your functions across documents straightforwardly.
One more thing to mention is the multiple timelines feature. This feature allows creating additional timelines to a scene. Let me explain. A scene has a main timeline that starts automatically when the scene loads. Apart from the main timeline, you can create many other timelines that are triggered by events. For example, you have two different animations lying in two different timelines of the same scene. You can control which animation plays depending on which button you press.
Preview and Export
Preview in Saola Animate is a breeze. Just drag the Playhead along the Timeline or click the button to play the animation on the Canvas. The tool supports previewing scenes or documents in default browser. When you’re done creating your document, you can export it to a folder with an HTML file and other support files. Generally speaking, there is not much to comment on these areas, except the fact that it’d be better if there were something like “Export to video” or “Export to animated GIF” features added to the tool. Sometimes, you want to convert your HTML5 animation to video or GIF so you can share your animations in more places and reach more viewers.
Flexible Layout
Saola Animate offers flexible layout, allowing animations to respond to the browser size. It is basically the matter of pixels (fixed unit) and percentages (relative unit). Currently, Saola Animate supports document/element scaling, that is, when the size unit is set to percentages, the animation will be responsive to the browser or viewport size changes. The position of elements can also adapt to the size changes by specifying the X, Y Motion mode of the elements (relative to the top left, top right, bottom left, or bottom right of the parent size). It works like pinning an element to an edge of the browser’s window or device’s viewport so that that element moves when the edge moves.
Fairly speaking, this flexible layout feature is easy to understand and sure to fulfil the essential need of users when it comes to responsive design. The animation can adjust itself to different screen sizes, very useful in creating web banner ads. Still, doing anything beyond this may be rather underwhelmed. It is absolutely a weak point of Saola Animate at the moment and the development team must prioritize this functionality in the near future.
Symbol
Symbols are a powerful and effective resource in Saola Animate. At first, they can be a bit intimidating, but later on, they will undoubtedly become all-important as you work with them and understand their huge benefits. So, what are symbols? Symbols are small animations within larger animations. They contain their own elements, timelines, and interactivity that are all independent of the scene. Symbols are highly practical as they are reusable and time-saving because editing a single symbol in the Resources changes all corresponding symbol elements of that symbol.
The Cons
Saola Animate is a promising new HTML5 animation tool that lets you create nice-looking animations and interactive content. That said, as a newborn tool, Saola Animate still requires a great deal of development and improvement so that it can stay ahead of the curve. For the current version, three features emerging as a must are responsive design, web fonts, and 3D transforms. Hopefully, these missing features will be included at the earliest and the tool will take more chances to become the best candidate in the race.
Download Saola Animate 30 days Trial here
Learn more visually in tutorial videos
Final words
Saola Animate is efficient and easy to use. Let’s give this feasible tool a try. Grab the trial first and you will see Saola Animate gets your job done right. Certainly recommended.
Don’t forget to +Follow us, share with your friends to receive more interesting posts on HTML5 Animation Tools in the future.
Good luck!
Elearning Supporter 
Leave a Reply