Adding custom animation

Problem: Is there a way to add custom easing to a movement. For e.g. taking settings from

Here is a sample:

Saola Animate version:



Hi Shawn,

Please see these tutorials:


Yes, you guys have some amazing easings!

However, just to be clear, it would not be possible to incorporate a custom easing per the link I provided ( , correct?

Hi Shawn,

That page uses CSS animation. As you know, Saola Animate allows adding custom CSS with just few steps, so the answer is Yes

  1. Set Class Name property for elements in Properties > General tab (stylie class name for your sample)
  2. In Document pane, click Edit CSS and add your custom CSS for class names in step 1. (For your sample, just copy and paste your CSS here)

Just wonder why you don’t create such animation in Saola Animate? Creating them in Saola Animate is much more easier. Moreover, you can control them easily with built-in actions.

P/S: What you said custom easing in your sample is actually not easing. It just approximates easing functions by adding many keyframe values.