Web Player API - 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: window.bar }  // add bar mapping
]

In Spirit Studio, we can now use expressions with these mappings for this timeline object, for example:

window.bar = { 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">
  ...
</div>

We could create a mapping for ghost as follow:

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

And use it in Spirit Studio:

Setup global mappings through spirit.setup is on the roadmap.

results matching ""

    No results matching ""