Adding custom animation

[Shawn (Shawn Si)]

Problem: Is there a way to add custom easing to a movement. For e.g. taking settings from http://jeremyckahn.github.io/stylie/

Here is a sample:

Dropbox - Link not found

Saola Animate version:

OS:

Notes:

[ToanLS (Toan Le)]

Hi Shawn,

Please see these tutorials:

• Creating motion path:
  https://atomisystems.com/html5-animation/animation-using-motion-paths-saola-animate/
• Changing easing:
  https://atomisystems.com/html5-animation/level-up-html5-animation-easing-functions/

Regards

[Shawn (Shawn Si)]

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 (http://jeremyckahn.github.io/stylie/) , correct?

[ToanLS (Toan Le)]

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.

Regards