Runtime EvalMap

In most cases you won't be needing to reference this keyframe instance directly. Using the spirit.create() or spirit.load() should cover most scenarios.

A Keyframe is a simple value object, containing a regular expression and a mapping:

  regex: /foo/g,
  value: 100

See also:

Custom mappings

Mappings are automatically populated to each prop and its keyframes. Change mappings to your needs.

By default the this keyword is mapped to the timeline.transformObject (Element) itself.

This is how you can add custom mappings:

Example 1.

props.mappings = [
  ...props.mappings,                 // keep the `this` mapping
  { regex: /foo/, map: 123 },        // add foo mapping
  { regex: /bar/, map: }  // add bar mapping

In the desktop app, we can now use expressions with these mappings for this timeline object, for example: = { width: 100 }

The calculated x value would be 223 (foo => 123 + bar.width => 100 = 223).

Example 2.

You're not limited to primitive values, you can map any value. For example, consider we have this html:

<img class="ghost" src="./assets/ghost.png" />

<div class="animation">

We could create a mapping for ghost as follow:

props.mappings = [{ 
  regex: /ghost/g, 
  map:   document.querySelector('.ghost') 

And use it in the desktop app:

Soon you can setup global mappings via the spirit.setup() method as well.

Work in progress!

More detailed documentation is coming soon

results matching ""

    No results matching ""