How to Create Animations in Saola Animate

How to Create Animations in Saola Animate


Hello everyone, welcome to Saola Animate Tutorials. Today I will show you how to create animations with Saola Animate. Creating animations is the most important and exciting part of the application. Animations are composed of two keyframes which define the starting and ending values of a property animation. In Saola, there are two main ways to add keyframes: manually and automatically. First, let me show you how to manually add keyframes. When the Auto-Keyframe Mode is off, you can use a small diamond next to most of the property values in the Properties pane to add keyframes. Position the Playhead to a different point of time. Add another keyframe for the same property, and change the property value. A bar between the two keyframes appears indicating that the property is animated. The second way to add keyframes is to use the Auto-Keyframe Mode. This mode allows automatically generating keyframes when you change any property value. To turn this mode on, click the Auto-Keyframe Mode button in the Timeline pane. Let’s see how I make the balloon move across different positions. Now click the Play button to preview the animation. Note that the animation segments you’ve created automatically contain transitions that allow an element to gradually change from one state to another over the course of time. Therefore, if there is no transition in an animation segment, there will be an instant change in the property value. To remove a transition from an animation segment, right-click that segment and select Remove Transition from the context menu. As you can see, the car now instantly jumps to the new position. If you want to re-create the transition, right-click the animation segment and select Create Transition. The last option in the context menu of an animation segment is Invert Animation Segment. This option swaps the position of the starting and ending keyframes of an animation segment. You can see clearly that the car is now running backward. If you want the car to run forward, simply invert the animation segment another time. In Saola Animate, it’s always possible to copy and paste an animation segment on the Timeline of the same or of another element. To copy animation segments, select them, and press CTRL+C to copy them to the Clipboard. Then move the Playhead to the position where you want the copied animation segments to start. Press CTRL+V to paste the animation segments. Let’s see the result. If you don’t want any animation segments, select them and press the DELETE key to remove. When it comes to creating and editing animations, we also need to mention Easing methods. Easing lets you change the acceleration and deceleration of a transition to make your transition more natural.  Let’s see how I apply easing to the transition of this car. First, select an animation segment. Next, select Easing in the Timeline pane. Here I choose InOutQuart easing method. Let’s see the result. You can see that the car speeds up until halfway, and then shows down, and its movement is really natural. So that’s how to create and edit animations in Saola Animate. Thank you for watching!

Only registered users can comment.

  1. Very nice software. See this review https://elearningsupporter.com/2017/07/01/2017-best-html5-animation-tool-saola-animate/

Leave a Reply

Your email address will not be published. Required fields are marked *