Web/API/Animation/timeline

From Get docs

This is an experimental technologyCheck the Browser compatibility table carefully before using this in production.


The Animation.timeline property of the Animation interface returns or sets the timeline associated with this animation. A timeline is a source of time values for synchronization purposes, and is an AnimationTimeline-based object. By default, the animation's timeline and the Document's timeline are the same.

Syntax

var animationsTimeline = Animation.timeline;

Animation.timeline = newTimeline;

Value

timeline object to use as the timing source for the animation, or null to use the default, which is the Document's timeline.

Examples

Here we set the animation's timeline to be the same as the document's timeline (this is the default timeline for all animations, by the way):

animation.timeline = document.timeline;

Specifications

Specification Status Comment
Web AnimationsThe definition of 'Animation.timeline' in that specification. Working Draft Editor's draft.

Browser compatibility

Update compatibility data on GitHub

Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari Android webview Chrome for Android Firefox for Android Opera for Android Safari on iOS Samsung Internet

timeline

Experimental'

Chrome No support No

Notes'

No support No

Notes'

Notes' Currently Chrome Canary only

Edge

No support No

Firefox Full support 75

Notes'

Full support 75

Notes'

Notes' Currently only the getter is supported Full support 63

Disabled'

Disabled' From version 63: this feature is behind the dom.animations-api.timelines.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config. No support 48 — 63

Notes' Disabled'

Notes' This property is supported in Firefox 48 but is read-only. It became writable in Firefox 49. Disabled' From version 48 until version 63 (exclusive): this feature is behind the dom.animations-api.core.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.

IE

No support No

Opera

No support No

Safari Full support 13.1

Notes'

Full support 13.1

Notes'

Notes' Currently only the getter is supported

WebView Android

No support No

Chrome Android No support No

Notes'

No support No

Notes'

Notes' Currently Chrome Canary only

Firefox Android Full support 63

Disabled'

Full support 63

Disabled'

Disabled' From version 63: this feature is behind the dom.animations-api.timelines.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config. No support 48 — 63

Notes' Disabled'

Notes' This property is supported in Firefox 48 but is read-only. It became writable in Firefox 49. Disabled' From version 48 until version 63 (exclusive): this feature is behind the dom.animations-api.core.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.

Opera Android

No support No

Safari iOS Full support 13.4

Notes'

Full support 13.4

Notes'

Notes' Currently only the getter is supported

Samsung Internet Android

No support No

Legend

Full support  
Full support
No support  
No support
Experimental. Expect behavior to change in the future.'
Experimental. Expect behavior to change in the future.
See implementation notes.'
See implementation notes.
User must explicitly enable this feature.'
User must explicitly enable this feature.


See also