Runtime 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

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

/**
* 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 the desktop app.

Work in progress!

More detailed documentation is coming soon

results matching ""

    No results matching ""