Web Player API - Timeline

Each group holds a timelines instance. This is a collection of internal timeline data as referenced here.

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

API

/**
 * Type.
 * Default is 'dom'
 * 
 * @type {string} 'dom' or 'object'
 */
type

/**
 * Object to apply transforms on.
 * If type is 'dom' it refers to an Element else just a plain javascript object.
 *
 * @type {Element|object}
 */
transformObject

/**
 * Descriptive label representing this timeline
 *
 * @type {string}
 */
label

/**
 * XPath to transformObject, relative to group element.
 *
 * @type {string}
 */
path

/**
 * Identifier to select element. Override the path for resolving transformObject.
 * By default the id is set on element attribute [data-spirit-id].
 *
 * @type {string}
 */
id

/**
 * Properties for this timeline
 *
 * @type {Props}
 */
props

/**
 * Validate this timeline instance on valid transformObject
 * @throw Error when not valid
 * @returns {void}
 */
validate()

/**
 * Convert to a readable and interchangeable javascript object
 *
 * @type    {Function}
 * @param   {boolean} ignoreEval
 * @returns {object}
 */
toObject(ignoreEval = false)

/**
 * Destroy this timeline
 *
 * @type {Function}
 */
destroy()

type

Currently, only dom is supported.

Right now, you can only animate elements in your Document Object Model. In the future you can animate javascript objects as well. 🤘 Giving you more power to animate whatever possible.

toObject(ignoreEval = false)

This is extremely useful for debugging. For example let's go to https://spiritapp.io and open the Chrome Devtools (Command+Alt+I). Type in the following and hit ENTER:

spirit.groups.get('ghost').timelines.at(0).toObject()

You'll see something like:

{
  id: "ghost",
  label: "#ghost",
  type: "dom",
  path: "div[1]/*[local-name()='svg'][1]",
  transformObject: svg,
  props: {
    opacity: { ... },
    x: { ... },
    y: { ... }
  }
}

The props entry gives you a good insight into how it animates over time.

When passing in true as argument => toObject(true), javascript expressions don't get evaluated and it returns the raw data as it appears in Spirit Studio.

results matching ""

    No results matching ""