Runtime Prop

Each timeline instance holds a props collection with Prop data as referenced here.

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

A prop represent a single property with keyframes:

{
  x: {
    '0s': 0,
    '2s': {
      value: 100,
      ease: 'Power2.easeInOut'
    },
    '10s': {
      value: '{ window.innerWidth }',
      ease: 'Quint.easeOut'
    }
  }
}

API

/**
* Collection of keyframes
* Getter/setter
*
* @type {Keyframes}
*/
keyframes

/**
* Access the parent list (props)
*
* @type {Props}
*/
list

/**
* Get previous property from (linked) list
*
* @type    {Function}
* @returns {Prop|null}
*/
prev()

/**
* Get next property from (linked) list
*
* @type    {Function}
* @returns {Prop|null}
*/
next()

/**
* Is this property a CSS transform?
*
* @type    {Function}
* @returns {boolean}
*/
isCSSTransform()

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

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

Keyframes

This property contains keyframes which describe how it animates over time.

Override keyframes:

prop.keyframes = {
  x: { ... },
  y: { ... },
  z: { ... }
}

List

Once a prop is added to the props collection, prop.list is set. This way you can always access collection props:

prop.list // [Props]

// remove from props
props.remove(prop)

prop.list // null

Get previous / next property

Once a prop is added to the props collection, you can easily retrieve the previous and next property:

// existing props
{
  x: { ... },
  y: { ... },
  z: { ... }
}

let prop = props.get('x')

prop = prop.next() // get prop y
prop = prop.next() // get prop z
prop = prop.next() // null

Is CSS transform?

Some properties are part of the CSS Transform Spec. This handy utility tells you whether the current property is a CSS transform or not (based on the property name):

props.get('left').isCSSTransform() // false
props.get('border-left').isCSSTransform() // false

props.get('x').isCSSTransform() // true
props.get('scale').isCSSTransform() // true

Events

You can listen to the following events:

prop.on('change', () => {})
prop.on('change:name', () => {})

prop.on('change:keyframes', () => {})
prop.on('change:keyframes:list', () => {})

prop.on('change:keyframe', () => {})
prop.on('change:keyframe:time', () => {})
prop.on('change:keyframe:value', () => {})
prop.on('change:keyframe:ease', () => {})

prop.on('add:keyframe', () => {})
prop.on('remove:keyframe', () => {})

Work in progress!

More detailed documentation is coming soon

results matching ""

    No results matching ""