animate

Animate an element or multiple elements to a specific target.

Keyframes

Single keyframe

By passing a single keyframe, the element will animate from its current style to those defined in the keyframe:

Multiple keyframes

By defining a value as an array, it'll animate through each keyframe in turn:

Wildcards

null is a special wildcard. As the first keyframe, it'll be replaced by the current value as read from the DOM.

Subsequent null values will be replaced by the previous keyframe. Useful for keeping a style static for some of the animation. This way, you only have to change it in one place if you want to tweak the animation.

Custom keyframe timing

By default, each of these keyframes will be spaced evenly throughout the animation. It's also possible to specify a list of offsets, values between 0 and 1, that defines a relative point in the animation a specific keyframe should be hit:

If there are fewer keyframes than offsets defined in offset, the other keyframes will be spaced evenly:

Custom keyframe easing

It's also possible to define easing between specific keyframes by defining an easing option as any array:

Options

Options can be defined either for all values:

Or overridden for individual values:

duration

Default: 0.3

A duration, in seconds, that the animation will take to complete.

delay

Default: 0

A duration, in seconds, that the animation will be delayed before starting.

When animating multiple elements, the stagger function can be used to offset the delay by increasing amounts across each element:

endDelay

Default: 0

A duration, in seconds, that the animation will wait at the end before ending.

easing

Default: "ease"

An easing function to use, or list of easing functions to use for individual keyframes.

  • Basic function names: "linear", "ease", "ease-in", "ease-out", "ease-in-out"
  • Cubic bezier curve: e.g. [.17,.67,.83,.67]
  • Stepped easing: e.g. "steps(2, start)"

direction

Default: "normal"

The direction of animation playback. "normal", "reverse", "alternate", or "alternate-reverse".

repeat

Default: 0

The number of times the animation should repeat. Set to Infinity to repeat indefinitely.

stagger

Default: 0

A duration, in seconds, to stagger the animation of each provided element.

Note: This option cannot currently be overridden per value.

allowWebkitAcceleration

Default: false

Because of numerous timing bugs in Webkit's accelerated animations, these are disabled by default in Webkit-powered browsers.

However, if the your animation is being disrupted by heavy processing, you can allow acceleration with this setting. It's advised you test these animations thoroughly in both Safari and iOS Chrome.

If and when Webkit's implementation improves, this option will default to true.

Returns

animate returns animation controls

Stay updated with the Motion One newsletter. We don't spam, and unsubscription is instant.