Timeline events

Wilderness has an event system built in that allows us to hook into the Timeline lifecycle.

One use case for events can be to trigger an action when an animation reaches a certain position.

import { shape, render, timeline, play } from 'wilderness'

const morph = shape(
  { el: document.querySelector('circle') },
  { el: document.querySelector('rect') },
)

const animation = timeline(morph, {
  events: [
    [ 'timeline.finish', () => alert('timeline finished') ]
  ]
})

render(document.querySelector('svg'), animation)

play(animation)
    

Timeline events are defined by passing an events property to the options argument of the timeline function.

The events property value takes the form of an array of events. Each event is itself an array, where the first item is the event name, and the second argument is the callback function to run when the event occurs.

The timeline.start event

Published when playback hits the start of a Timeline.

The timeline.finish event

Published when playback hits the end of a Timeline.

The shape.start event

Published when playback hits the start of a Shape.

The callback function will be passed a single argument – shapeName.

The shape.finish event

Published when playback hits the end of a Shape.

The callback function will be passed a single argument – shapeName.

The keyframe event

Published when playback hits a Shape Keyframe.

The callback function will be passed two arguments – shapeName and keyframeName.

The frame event

Published on every tick of an animation.