Skip to main content

Animations

Animations are actually Clips (they can be either considered as Clip templates), they can be used either standalone or as Incidents inside other Clips, they take custom attributes and they dynamically render themselves accordingly.

Under the hood Animations are just pre-crafted, “smart” DOM Clips that can be easily developed, extending the “HMTLClip” Class.

When developing your custom HTMLClip (your “Animation”) you need:

  1. to define:
    • The Clip’s HTML
    • The Clip’s CSS
    • any fonts you need to load (optionally)
    • and any audio (optionally)
  2. put Incidents inside your Clip
  3. Done!

Let’s see how you can do these two steps.

get html​

You can overwrite the html getter to define your html. You can use MotorCortex Template Engine here and of course this.attrs object which holds all attributes passed to your Animation.

get css​

Does the exact same thing with the html getter only it returns the css of the HTMLClip. Here you can use just EJS, JSS or any other technology you want.

get fonts​

Overwrite it only if you want to load fonts to your Clip. If so, then just return an object with fonts compatible with the fonts object that a Clip can accept.

get audioSources​

Overwrite it only if you want to load audio sources to your Clip. If so, then just return an object with audio sources compatible with the audioSources object that a Clip can accept.

buildTree​

Once you load and define all of your context it’s time to move to the second step, put the action in. You can load any plugin you want to use and inside the “buildTree” method you can put any Incident you want into your Clip.

What you don’t need to care about​

Here is a list of things you don’t care about at all when developing an Animation:

  • duration. Your final user will set their duration when using your Animation and MotorCortex will automatically time-scale it to be that long, without not even the slightest compromise in performance and quality of execution. If the user doen’t provide duration, your Animation will be in its original duration which is automatically calculated based on the Incidents of your Clip / Animation
  • repeats
  • delay
  • hiatus
  • easing