Typescript definition file for the web animations api, in progress.

web-animations.d.ts

// UPDATE: The types is ready. npm install @types/web-animation-js
// I leave this as an refference for the w3c specs
// I coldn't find any definition file. This is a work in progress and it's my first d.ts file so the gist will be updated.
// The latest spec and the latest web-animations-js polyfill isn't compatible, so I will try to make it more web-animations-js compatible.

interface DocumentTimelineOptions {
	originTime: DOMHighResTimeStamp;
}
declare type FillMode = "none" | "forwards" | "backwards" | "both" | "auto";
declare type IterationCompositeOperation = "replace" | "accumulate";

declare type PlaybackDirection = "normal" | "reverse" | "alternate" | "alternate-reverse";
declare type AnimationPlayState = "idle" | "pending" | "running" | "paused" | "finished";
declare type CompositeOperation = "replace" | "add" | "accumulate";
declare type DOMHighResTimeStamp = number;

interface AnimationEffectTimingProperties {
	delay?: number;
	endDelay?: number;
	fill?: FillMode;
	iterationStart?: number;
	iterations?: number;
	duration?: number;
	direction?: PlaybackDirection;
	easing?: string;
}

interface ComputedTimingProperties extends AnimationEffectTimingProperties {
	endTime: number;
	activeDuration: number;
	localTime: number;
	progress: number;
	currentIteration: number;
}

interface BaseComputedKeyframe {
	offset: number;
	computedOffset: number;
	easing: string;
	composite: number;
}

interface BasePropertyIndexedKeyframe {
	easing: string;
	composite: number;
}

interface BaseKeyframe {
	offset: number;
	easing: string;
	composite: CompositeOperation;
}

interface KeyframeEffectOptions extends AnimationEffectTimingProperties {
	iterationComposite?: IterationCompositeOperation;
	composite?: CompositeOperation;
	spacing?: string;
}

interface KeyframeAnimationOptions extends KeyframeEffectOptions {
	id: string;
}

interface AnimationPlaybackEventInit extends EventInit {
	currentTime: number;
	timelineTime: number;
}

interface AnimationTimeline {
	currentTime: number;
}

interface DocumentTimeline extends AnimationTimeline {
	$__dummyprop__DocumentTimeline: any;
}

interface Animation extends EventTarget {
	id: string;
	effect: AnimationEffectReadOnly;
	timeline?: AnimationTimeline;
	startTime: number;
	currentTime: number;
	playbackRate: number;
	playState: AnimationPlayState;
	ready: Promise<Animation>;
	finished: Promise<Animation>;
	onfinish: EventListener;
	oncancel: EventListener;
	cancel(): void;
	finish(): void;
	play(): void;
	pause(): void;
	reverse(): void;
}

interface AnimationEffectReadOnly {
	timing: AnimationEffectTimingReadOnly;
	getComputedTiming(): ComputedTimingProperties;
}

interface AnimationEffectTimingReadOnly {
	delay?: number;
	endDelay?: number;
	fill?: FillMode;
	iterationStart?: number;
	iterations?: number;
	duration?: number | 'auto';
	direction?: PlaybackDirection;
	easing?: string;
}

interface AnimationEffectTiming extends AnimationEffectTimingReadOnly {
}

interface KeyframeEffectReadOnly extends AnimationEffectReadOnly {
	target: Animatable;
	iterationComposite: IterationCompositeOperation;
	composite: CompositeOperation;
	spacing: string;
	getKeyframes(): any[];
	// Polyfill still use getFrames
	getFrames(): any[];
}


interface KeyframeEffect extends KeyframeEffectReadOnly {
	setKeyframes(keyframes: any): void;
}

declare class KeyframeEffect {
	constructor(keyframes: any);
}
interface SharedKeyframeList {
	$__dummyprop__SharedKeyframeList: any;
}


interface Element {
	animate(keyframes: any, options: number | KeyframeEffectOptions): Animation;
	getAnimations(): Animation[];
}
interface Animatable extends Element {

}

interface AnimationPlaybackEvent extends Event {
	currentTime: number;
	timelineTime: number;
}