/*
* velocity-animate (C) 2014-2018 Julian Shapiro.
*
* Licensed under the MIT license. See LICENSE file in the project root for details.
*
* Velocity typings.
*/
/**************
* Interfaces *
**************/
/**
* A single animation for a single element. This extends the strict options (ie,
* after processing) to allow per-element options. Anything that is shared
* between all elements in an animation will be under the `options` member.
*/
export interface AnimationCall extends StrictVelocityOptions {
/**
* Used to store the next AnimationCell in this list.
*
* @private
*/
_next?: AnimationCall;
/**
* Used to store the previous AnimationCell in this list. Used to make
* removing items from the list significantly easier.
*
* @private
*/
_prev?: AnimationCall;
/**
* A number of flags for use in tracking an animation.
*/
_flags: number;
/**
* Properties to be tweened
*/
tweens?: {[property: string]: VelocityTween};
/**
* The current value for the "tween" property, defaults to a percentage if
* not used.
*/
tween?: string;
/**
* The element this specific animation is for. If there is more than one in
* the elements list then this will be duplicated when it is pulled off a
* queue.
*/
element?: HTMLorSVGElement;
/**
* The list of elements associated with this specific animation.
* TODO: This should be removed so we're not trying to lock an element.
* Without this entry, any removed elements will simply not exist in Data
* (a WeakMap) and then can be removed from the list of animations.
* @deprecated
*/
elements?: VelocityResult;
/**
* Shared options for the entire set of elements.
*/
options?: StrictVelocityOptions;
/**
* The time this animation started according to whichever clock we are
* using.
*/
timeStart?: number;
/**
* The time (in ms) that this animation has already run. Used with the
* duration and easing to provide the exact tween needed.
*/
ellapsedTime?: number;
/**
* The percentage complete as a number 0 <= n <= 1
*/
percentComplete?: number;
}
/**
* AnimationFlags are used internally. These are subject to change as they are
* only valid for the internal state of the current version of Velocity.
*
* To get these values use the "option" action with a key of "isReady" etc. All
* of these are gettable with the same pattern of keyname.
*
* @private
*/
export declare const enum AnimationFlags {
/**
* When the tweens are expanded this is set to save future processing.
*/
EXPANDED = 1 << 0, // tslint:disable-line:no-bitwise
/**
* Set once the animation is ready to start - after any delay (and possible
* pause).
*/
READY = 1 << 1, // tslint:disable-line:no-bitwise
/**
* Set once the animation has started.
*/
STARTED = 1 << 2, // tslint:disable-line:no-bitwise
/**
* Set when an animation is manually stopped.
*/
STOPPED = 1 << 3, // tslint:disable-line:no-bitwise
/**
* The pause state of this animation. If true it is paused, if false it was
* paused and needs to be resumed, and if undefined / null then not either.
*/
PAUSED = 1 << 4, // tslint:disable-line:no-bitwise
/**
* Set when the animation is a sync animation.
*/
SYNC = 1 << 5, // tslint:disable-line:no-bitwise
/**
* When the animation is running in reverse, such as for a loop.
*/
REVERSE = 1 << 6, // tslint:disable-line:no-bitwise
}
/**
* Global per-Element data. This is persistent between animations, and freed
* when the garbage collector removes the Element because it is no longer being
* used.
*/
export interface ElementData {
/**
* A generated enum of types of this element, used for Normalizations.
*/
types: number;
/**
* A local cache of the current style values we're using, this is 80x faster
* than element.style access.
*
* Empty strings are set to null to get the value from getComputedStyle
* instead. If getComputedStyle returns an empty string then that is saved.
*/
cache: Properties;
/**
* A cached copy of getComputedStyle, this is 50% the speed of
* element.style access.
*/
computedStyle?: CSSStyleDeclaration;
/**
* Changed as animations start and finish on an element. This allows us to
* keep track of exactly how many are running at a given time.
*/
count: number;
/**
* Animations to be run for each queue. The animations are linked lists,
* but treated as a FIFO queue (new ones are added to the end). When the
* queue is empty (but still running) the key will still exist with a value
* of "null". When the queue is empty and the next entry is pulled from it
* then it will be set to "undefined".
*
* The default queue is an empty string - ""
*/
queueList: {[name: string]: AnimationCall};
/**
* Last properties tweened per each queue. Used for both "reverse" and
* "repeat" methods.
*/
lastAnimationList: {[name: string]: AnimationCall};
/**
* The time the last animation on an element finished. This is used for
* starting a new animation and making sure it follows directly if possible,
* otherwise it will start as if one frame in already.
*/
lastFinishList: {[name: string]: number};
/**
* The window used for this element.
*/
window: Window;
}
/**
* Internal Sequence property value.
*/
export interface Sequence extends ReadonlyArray {
/**
* Pattern to use for tweening.
*/
pattern: ReadonlyArray;
/**
* Step value.
*/
[index: number]: TweenStep;
}
export interface SequenceList {
duration: number;
tweens: Properties;
}
/**
* After correcting the options so they are usable internally, they will be of
* this type. The base VelocityOptions includes human readable and shortcuts,
* which this doesn't.
*/
export interface StrictVelocityOptions extends VelocityOptions, VelocityPromise {
/**
* Begin handler. Only the first element to check this callback gets to use
* it. Cleared after calling
*
* @private
*/
begin?: VelocityCallbackFn;
/**
* Complete handler (only the last element in a set gets this)
*
* @private
*/
complete?: VelocityCallbackFn;
/**
* The amount of delay before this animation can start doing anything.
*/
delay?: number;
/**
* The length of time this animation will run for.
*/
duration?: number;
/**
* Easing for this animation while running.
*/
easing?: VelocityEasingFn;
/**
* Loop, calls 2n-1 times reversing it each iteration
*/
loop?: true | number;
/**
* TODO: Remove this so it's a normal property
*/
mobileHA?: boolean;
/**
* Progress handler (only the last element in a set gets this)
*
* @private
*/
progress?: VelocityProgressFn;
/**
* Queue
*/
queue?: false | string;
/**
* Repeat this number of times. If looped then each iteration of the loop
* is actually repeated this number of times.
*/
repeat?: true | number;
/**
* This is a cache of the repeat value. When looping and repeating work
* together, the repeat is looped, so it needs to remember how many repeats
* to perform for each loop.
*/
repeatAgain?: true | number;
/**
* The first AnimationCall to get this - used for the progress callback.
*
* @private
*/
_first?: AnimationCall;
/**
* The total number of AnimationCalls that are pointing at this.
*
* @private
*/
_total?: number;
/**
* The number of AnimationCalls that are ready to start.
*
* @private
*/
_ready?: number;
/**
* The number of AnimationCalls that have started.
*
* @private
*/
_started?: number;
/**
* The number of AnimationCalls that have finished.
*
* @private
*/
_completed?: number;
}
/**
* Internal list of values for a single Sequence data point.
*/
export interface TweenStep extends ReadonlyArray {
/**
* Percent of animation.
*/
percent?: number;
/**
* Easing function.
*/
easing?: VelocityEasingFn | null;
/**
* Values to tween and insert into pattern.
*/
[index: number]: string | number;
}
/**
* Direct Velocity access.
*/
export interface Velocity {
/**
* Available to be able to check what version you're running against.
*/
readonly version: string;
/**
* Velocity option defaults, which can be overriden by the user.
*/
readonly defaults: VelocityOptions & {
/**
* Provided in order to reset Velocity defaults back to their initial
* state.
*/
readonly reset: () => void;
};
/**
* Current internal state of Velocity.
*/
readonly State: VelocityState;
/**
* Actions cannot be replaced if they are internal (hasOwnProperty is false
* but they still exist). Otherwise they can be replaced by users.
*
* All external method calls should be using actions rather than sub-calls
* of Velocity itself.
*/
readonly Actions: {[name: string]: VelocityActionFn};
/**
* Our known easing functions.
*/
readonly Easings: {[name: string]: VelocityEasingFn};
/**
* The currently registered sequences.
*/
readonly Sequences: {[name: string]: SequenceList};
/**
* Used to patch any object to allow Velocity chaining. In order to chain an
* object must either be treatable as an array - with a .length
* property, and each member a Node, or a Node directly.
*
* By default Velocity will try to patch window,
* jQuery, Zepto, and several classes that return
* Nodes or lists of Nodes.
*/
patch(proto: any, global?: boolean): void;
/**
* Set to true, 1 or 2 (most verbose) to output debug info to console.
*/
debug: boolean | 1 | 2;
/**
* In mock mode, all animations are forced to complete immediately upon the
* next rAF tick. If there are further animations queued then they will each
* take one single frame in turn. Loops and repeats will be disabled while
* mock = true.
*/
mock: boolean;
/********************
* Calling Velocity *
********************/
/**
* Finish the running animations on the elements selected.
*
* @param elements An `Element`, or an array-like list of `Elements` to
* process.
* @param queue The queue to finish.
* @param finishAll Should this stop all queued animations too?
*/
(elements: T, action: "finish", queue?: string | false, finishAll?: true): VelocityResult;
/**
* Finish the running animations on the elements selected.
*
* @param elements An `Element`, or an array-like list of `Elements` to
* process.
* @param finishAll Should this stop all queued animations too?
*/
(elements: T, action: "finish", finishAll?: true): VelocityResult;
/**
* Finish the running animations on this VelocityResult or on the elements
* selected.
*
* @param queue The queue to finish.
* @param finishAll Should this stop all queued animations too?
*/
(this: T, action: "finish", queue?: string | false, finishAll?: true): VelocityResult;
/**
* Finish the running animations on this VelocityResult or on the elements
* selected.
*
* @param finishAll Should this stop all queued animations too?
*/
(this: T, action: "finish", finishAll?: true): VelocityResult;
/**
* Finish any running animations.
*
* @param queue The queue to finish.
* @param finishAll Should this stop all queued animations too?
*/
(action: "finish", queue?: string | false, finishAll?: true): VelocityResult;
/**
* Finish any running animations.
*
* @param finishAll Should this stop all queued animations too?
*/
(action: "finish", finishAll?: true): VelocityResult;
/**
* Check if there is a normalisation handler for the named type of `Element`
* and the named property.
*/
(this: T, action: "hasNormalization", constructor: {new: () => Element} | string, name: string): boolean;
/**
* Set the value of an option on a running animation. This performs some
* validation on the named option as only some are available to set at
* runtime.
*
* @param elements An `Element`, or an array-like list of `Elements` to
* process.
* @param option The name of the option to get.
* @param value The value to set it to.
*/
(elements: T, action: "option", option: string, value: any): VelocityResult;
/**
* Get the value of an option on a running animation.
*
* @param elements An `Element`, or an array-like list of `Elements` to
* process.
* @param option The name of the option to get.
*/
(elements: T, action: "option", option: string): any;
/**
* Set the value of an option on a running animation. This performs some
* validation on the named option as only some are available to set at
* runtime.
*
* @param option The name of the option to get.
* @param value The value to set it to.
*/
(this: T, action: "option", option: string, value: any): VelocityResult;
/**
* Get the value of an option on a running animation.
*
* @param option The name of the option to get.
*/
(this: T, action: "option", option: string): any;
/**
* Pause a currently running animation.
*
* @param elements An `Element`, or an array-like list of `Elements` to
* process.
* @param queue The name of the queue to pause on it.
*/
(elements: T, action: "pause", queue?: string): VelocityResult;
/**
* Pause a currently running animation.
*
* @param queue The name of the queue to pause on it.
*/
(this: T, action: "pause", queue?: string): VelocityResult;
/**
* Pause all currently running animations.
*
* @param queue The name of the queue to pause on them.
*/
(action: "pause", queue?: string): VelocityResult;
/**
* Resume a currently paused animation.
*
* @param elements An `Element`, or an array-like list of `Elements` to
* process.
* @param queue The name of the queue to resume on it.
*/
(elements: T, action: "resume", queue?: string): VelocityResult;
/**
* Resume a currently paused animation.
*
* @param queue The name of the queue to resume on it.
*/
(this: T, action: "resume", queue?: string): VelocityResult;
/**
* Resume all currently paused animations.
*
* @param queue The name of the queue to resume on them.
*/
(action: "resume", queue?: string): VelocityResult;
/**
* Register a new easing handler.
*
* @param name The name of the easing to add.
* @param easing The function to call when this easing is used.
*/
(action: "registerEasing", name: string, easing: VelocityEasingFn): void;
/**
* Register a new normalization handler. This is the interface between
* Velocity and the actual properties, so is responsible for reading and
* writing any values on the `Element`.
*
* @param constructor The type of `Element`. If using ia string it will work
* across iframe boundaries.
* @param name The name of the property to provide.
* @param normalization The function to call whenever this property is
* accessed.
* @param unit An optional unit string to add to any numeric values passed.
* @param cache Set to false to prevent this property from being cached.
*/
(action: "registerNormalization", constructor: {new: () => Element} | string, name: string, normalization: VelocityNormalizationsFn, unit?: string, cache?: boolean): void;
/**
* Register a new normalization handler. This is the interface between
* Velocity and the actual properties, so is responsible for reading and
* writing any values on the `Element`.
*
* @param constructor The type of `Element`. If using ia string it will work
* across iframe boundaries.
* @param name The name of the property to provide.
* @param normalization The function to call whenever this property is
* accessed.
* @param cache Set to false to prevent this property from being cached.
*/
(action: "registerNormalization", constructor: {new: () => Element} | string, name: string, normalization: VelocityNormalizationsFn, cache?: boolean): void;
/**
* Register a named animation sequence to be used elsewhere.
*
* @param name The sequence name.
* @param sequence The animation steps to perform.
*/
(action: "registerSequence", name: string, sequence: VelocitySequence): void;
/**
* Register a named animation sequence to be used elsewhere.
*
* @param sequences Multiple named sequences to add.
*/
(action: "registerSequence", sequences: {[name: string]: VelocitySequence}): void;
/**
* Reverse the most recent animations on the supplied elements.
*
* @param elements An `Element`, or an array-like list of `Elements` to
* process.
*/
(elements: T, action: "reverse", complete?: () => void): VelocityResult;
/**
* Reverse the most recent animations on the supplied elements.
*
* @param elements An `Element`, or an array-like list of `Elements` to
* process.
* @param duration How long the animation should run in ms.
* @param complete A function to call when finished.
*/
(elements: T, action: "reverse", duration?: number | "fast" | "normal" | "slow", complete?: () => void): VelocityResult;
/**
* Reverse the most recent animations on the supplied elements.
*
* @param elements An `Element`, or an array-like list of `Elements` to
* process.
* @param duration How long the animation should run in ms.
* @param easing The default easing to apply.
* @param complete A function to call when finished.
*/
(elements: T, action: "reverse", duration?: number | "fast" | "normal" | "slow", easing?: string | number[], complete?: () => void): VelocityResult;
/**
* Reverse the most recent animations on the supplied elements.
*
* @param elements An `Element`, or an array-like list of `Elements` to
* process.
* @param easing The default easing to apply.
* @param complete A function to call when finished.
*/
(elements: T, action: "reverse", easing?: string | number[], complete?: () => void): VelocityResult;
/**
* Reverse the most recent animations on the supplied elements.
*
* @param elements An `Element`, or an array-like list of `Elements` to
* process.
* @param options The options to apply.
*/
(elements: T, action: "reverse", options?: VelocityOptions): VelocityResult;
/**
* Stop without finishing the running animations on this VelocityResult or
* on the elements selected.
*
* @param elements An `Element`, or an array-like list of `Elements` to
* process.
* @param queue The queue to stop.
* @param stopAll Should this stop all queued animations too?
*/
(elements: T, action: "stop", queue?: string | false, stopAll?: true): VelocityResult;
/**
* Stop without finishing the running animations on this VelocityResult or
* on the elements selected.
*
* @param elements An `Element`, or an array-like list of `Elements` to
* process.
* @param stopAll Should this stop all queued animations too?
*/
(elements: T, action: "stop", stopAll?: true): VelocityResult;
/**
* Stop without finishing the running animations on this VelocityResult or
* on the elements selected.
*
* @param queue The queue to stop.
* @param stopAll Should this stop all queued animations too?
*/
(this: T, action: "stop", queue?: string | false, stopAll?: true): VelocityResult;
/**
* Stop without finishing the running animations on this VelocityResult or
* on the elements selected.
*
* @param stopAll Should this stop all queued animations too?
*/
(this: T, action: "stop", stopAll?: true): VelocityResult;
/**
* Get or set the value for a property that Velocity understands how to
* access.
*
* @param elements An `Element`, or an array-like list of `Elements` to
* process.
* @param property The name of the property to access.
*/
(elements: HTMLorSVGElement, action: "style" | "property", property: string): string;
/**
* Get or set the value for a property that Velocity understands how to
* access.
*
* @param elements An `Element`, or an array-like list of `Elements` to
* process.
* @param property The name of the property to access, or an object with
* `name: value` pairs for setting.
*/
(elements: HTMLorSVGElement, action: "style" | "property", property: string[]): {[property: string]: string}[] | {[property: string]: string};
/**
* Get or set the value for a property that Velocity understands how to
* access.
*
* @param property The name of the property to access.
*/
(this: T, action: "style" | "property", property: string): string | string[];
/**
* Get or set the value for a property that Velocity understands how to
* access.
*
* @param elements An `Element`, or an array-like list of `Elements` to
* process.
* @param property The name of the property to access.
*/
(elements: T, action: "style" | "property", property: string): string[];
/**
* Get or set the value for a property that Velocity understands how to
* access.
*
* @param elements An `Element`, or an array-like list of `Elements` to
* process.
* @param property The name of the property to access, or an object with
* `name: value` pairs for setting.
*/
(elements: T, action: "style" | "property", property: string[]): {[property: string]: string}[] | {[property: string]: string}[];
/**
* Get or set the value for a property that Velocity understands how to
* access.
*
* @param property The name of the property to access.
* @param value The value to set the property to.
*/
(this: T, action: "style" | "property", property: string, value: string): VelocityResult;
/**
* Get or set the value for a property that Velocity understands how to
* access.
*
* @param elements An `Element`, or an array-like list of `Elements` to
* process.
* @param property The name of the property to access.
* @param value The value to set the property to.
*/
(elements: T, action: "style" | "property", property: string, value: string): VelocityResult;
/**
* Get or set the value for a property that Velocity understands how to
* access.
*
* @param property An object with `name: value` pairs for setting.
*/
(this: T, action: "style" | "property", property: {[property: string]: string}): VelocityResult;
/**
* Get or set the value for a property that Velocity understands how to
* access.
*
* @param elements An `Element`, or an array-like list of `Elements` to
* process.
* @param property An object with `name: value` pairs for setting.
*/
(elements: T, action: "style" | "property", property: {[property: string]: string}): VelocityResult;
/**
* Get the tween value for one or more elements using an animation at a
* specific percentage complete. This does not animate the elements, just
* obtains the values based on the current properties.
*
* @param percentComplete What specific percentage is needed (0 <= x <= 1)
* @param property The property to animate.
* @param value The end value or forcefed value.
* @param easing The easing to use.
*/
(this: T, action: "tween", percentComplete: number, property: string, value: VelocityPropertyValue, easing?: VelocityEasingType): string;
/**
* Get the tween value for one or more elements using an animation at a
* specific percentage complete. This does not animate the elements, just
* obtains the values based on the current properties.
*
* @param elements An `Element`, or an array-like list of `Elements` to
* process.
* @param percentComplete What specific percentage is needed (0 <= x <= 1)
* @param property The property to animate.
* @param value The end value or forcefed value.
* @param easing The easing to use.
*/
(elements: T, action: "tween", percentComplete: number, property: string, value: VelocityPropertyValue, easing?: VelocityEasingType): string;
/**
* Get the tween value for one or more elements using an animation at a
* specific percentage complete. This does not animate the elements, just
* obtains the values based on the current properties.
*
* @param percentComplete What specific percentage is needed (0 <= x <= 1)
* @param propertyMap The `key: value` property map to animate to.
* @param easing The easing to use.
*/
(this: T, action: "tween", percentComplete: number, propertyMap: Properties, easing?: VelocityEasingType): Properties;
/**
* Get the tween value for one or more elements using an animation at a
* specific percentage complete. This does not animate the elements, just
* obtains the values based on the current properties.
*
* @param elements An `Element`, or an array-like list of `Elements` to
* process.
* @param percentComplete What specific percentage is needed (0 <= x <= 1)
* @param propertyMap The `key: value` property map to animate to.
* @param easing The easing to use.
*/
(elements: T, action: "tween", percentComplete: number, propertyMap: Properties, easing?: VelocityEasingType): Properties;
/**
* Get the tween value for one or more elements using an animation at a
* specific percentage complete. This does not animate the elements, just
* obtains the values based on the current properties.
*
* When called on Velocity directly without any supplied elements, then the
* values will be based on the `document.body` element. This can be useful
* for simply finding the value for a forcefed animation.
*
* @param percentComplete What specific percentage is needed (0 <= x <= 1)
* @param property The property to animate.
* @param value The end value or forcefed value.
* @param easing The easing to use.
*/
(action: "tween", percentComplete: number, property: string, value: VelocityPropertyValue, easing?: VelocityEasingType): string;
/**
* Get the tween value for one or more elements using an animation at a
* specific percentage complete. This does not animate the elements, just
* obtains the values based on the current properties.
*
* When called on Velocity directly without any supplied elements, then the
* values will be based on the `document.body` element. This can be useful
* for simply finding the value for a forcefed animation.
*
* @param percentComplete What specific percentage is needed (0 <= x <= 1)
* @param propertyMap The `key: value` property map to animate to.
* @param easing The easing to use.
*/
(action: "tween", percentComplete: number, propertyMap: Properties, easing?: VelocityEasingType): Properties;
/**
* Call Velocity with a single object containing all the necessary options.
*
* @param options An object containing the `elements`, `options`, and
* `properties` to use.
*/
(options: VelocityObjectArgs): VelocityResult;
/**
* Call velocity on one or more elements.
*
* @param elements An `Element`, or an array-like list of `Elements` to
* process.
* @param propertyMap The `key: value` property map to animate to, or a
* named sequence to use.
* @param options The options to apply to the animation. This overrides the
* default and any supplied in a sequence.
*/
(elements: T, propertyMap: string | Properties, options?: VelocityOptions): VelocityResult;
/**
* Call velocity on one or more elements.
*
* @param elements An `Element`, or an array-like list of `Elements` to
* process.
* @param propertyMap The `key: value` property map to animate to, or a
* named sequence to use.
* @param duration The length of time to run animation in ms (1000/s).
* @param complete A function to call when the animation is finished.
*/
(elements: T, propertyMap: string | Properties, duration?: number | "fast" | "normal" | "slow", complete?: () => void): VelocityResult;
/**
* Call velocity on one or more elements.
*
* @param elements An `Element`, or an array-like list of `Elements` to
* process.
* @param propertyMap The `key: value` property map to animate to, or a
* named sequence to use.
* @param complete A function to call when the animation is finished.
*/
(elements: T, propertyMap: string | Properties, complete?: () => void): VelocityResult;
/**
* Call velocity on one or more elements.
*
* @param elements An `Element`, or an array-like list of `Elements` to
* process.
* @param propertyMap The `key: value` property map to animate to, or a
* named sequence to use.
* @param easing The easing to use for this animation.
* @param complete A function to call when the animation is finished.
*/
(elements: T, propertyMap: string | Properties, easing?: string | number[], complete?: () => void): VelocityResult;
/**
* Call velocity on one or more elements.
*
* @param elements An `Element`, or an array-like list of `Elements` to
* process.
* @param propertyMap The `key: value` property map to animate to, or a
* named sequence to use.
* @param duration The length of time to run animation in ms (1000/s).
* @param easing The easing to use for this animation.
* @param complete A function to call when the animation is finished.
*/
(elements: T, propertyMap: string | Properties, duration?: number | "fast" | "normal" | "slow", easing?: string | number[], complete?: () => void): VelocityResult;
/**
* Call velocity on one or more elements.
*
* @param propertyMap The `key: value` property map to animate to, or a
* named sequence to use.
* @param options The options to apply to the animation. This overrides the
* default and any supplied in a sequence.
*/
(this: T, propertyMap: string | Properties, options?: VelocityOptions): VelocityResult;
/**
* Call velocity on one or more elements.
*
* @param propertyMap The `key: value` property map to animate to, or a
* named sequence to use.
* @param duration The length of time to run animation in ms (1000/s).
* @param complete A function to call when the animation is finished.
*/
(this: T, propertyMap: string | Properties, duration?: number | "fast" | "normal" | "slow", complete?: () => void): VelocityResult;
/**
* Call velocity on one or more elements.
*
* @param propertyMap The `key: value` property map to animate to, or a
* named sequence to use.
* @param complete A function to call when the animation is finished.
*/
(this: T, propertyMap: string | Properties, complete?: () => void): VelocityResult;
/**
* Call velocity on one or more elements.
*
* @param propertyMap The `key: value` property map to animate to, or a
* named sequence to use.
* @param easing The easing to use for this animation.
* @param complete A function to call when the animation is finished.
*/
(this: T, propertyMap: string | Properties, easing?: string | number[], complete?: () => void): VelocityResult;
/**
* Call velocity on one or more elements.
*
* @param propertyMap The `key: value` property map to animate to, or a
* named sequence to use.
* @param duration The length of time to run animation in ms (1000/s).
* @param easing The easing to use for this animation.
* @param complete A function to call when the animation is finished.
*/
(this: T, propertyMap: string | Properties, duration?: number | "fast" | "normal" | "slow", easing?: string | number[], complete?: () => void): VelocityResult;
}
/**
* Add any easings to this interface to have them picked up by the Easings type.
*/
export interface VelocityEasings {
"at-end": true;
"at-start": true;
"during": true;
"ease": true;
"ease-in": true;
"ease-in-out": true;
"ease-out": true;
"easeIn": true;
"easeInBack": true;
"easeInBounce": true;
"easeInCirc": true;
"easeInCubic": true;
"easeInElastic": true;
"easeInExpo": true;
"easeInOut": true;
"easeInOutBack": true;
"easeInOutBounce": true;
"easeInOutCirc": true;
"easeInOutCubic": true;
"easeInOutElastic": true;
"easeInOutExpo": true;
"easeInOutQuad": true;
"easeInOutQuart": true;
"easeInOutQuint": true;
"easeInOutSine": true;
"easeInQuad": true;
"easeInQuart": true;
"easeInQuint": true;
"easeInSine": true;
"easeOut": true;
"easeOutBack": true;
"easeOutBounce": true;
"easeOutCirc": true;
"easeOutCubic": true;
"easeOutElastic": true;
"easeOutExpo": true;
"easeOutQuad": true;
"easeOutQuart": true;
"easeOutQuint": true;
"easeOutSine": true;
"linear": true;
"spring": true;
"swing": true;
}
/**
* Chaining Velocity calls from various sources.
*/
export interface VelocityExtended {
/**
* This is the Velocity chaining method. It is functionally equivalent to
* the normal Velocity call, but allows chaining on the elements it is
* attached to.
*/
readonly velocity: Velocity;
}
/**
* This is used for CoffeeScript shortcuts apparently. Kept for legacy reasons.
*
* TODO: I don't like having two of these - need to merge into a type or similar
*/
export interface VelocityObjectArgs {
elements?: HTMLorSVGElement[];
properties?: Properties;
options?: VelocityOptions;
e?: HTMLorSVGElement[];
p?: Properties;
o?: VelocityOptions;
}
/**
* Options passed to a new Velocity animation. These are validated and copied
* into a StrictVelocityOptions object.
*/
export interface VelocityOptions {
backwards?: boolean;
/**
* Begin handler. Only the first element to check this callback gets to use
* it.
*
* default: undefined
*/
begin?: VelocityCallbackFn;
/**
* Complete handler (only the last element in a set gets this).
*
* default: undefined
*/
complete?: VelocityCallbackFn;
/**
* How long the animation should delay after becoming active and before it
* actually starts to animate. This is a millisecond timer, but
* can handle some string values.
* "fast" = 200ms
* "normal" = 400ms
* "slow" = 600ms
* NOTE: If passing a negative number then this will allow you to start with
* the animation partially complete from the start.
*
* default 0
*/
delay?: "fast" | "normal" | "slow" | number;
/**
* Reduce the duration of each successive element so they drag into final
* state. The first quarter of the elements will get a reduced duration (ie.
* they will finish faster) in a smooth way.
*/
drag?: boolean;
/**
* How long the animation should run for. This is a millisecond timer, but
* can handle some string values.
* "fast" = 200ms
* "normal" = 400ms (default)
* "slow" = 600ms
*
* default 400
*/
duration?: "fast" | "normal" | "slow" | number;
/**
* Easing is the rate of change over time for an animation. A linear easing
* would simply be 1% of the time to 1% of the animation. This allows you
* to specify how that rate of change should be. There are various named
* easings, but you can also supply your own.
*
* TODO: Copy more of the original description
*
* default "swing"
*/
easing?: VelocityEasingType;
/**
* Maximum number of frames to render on each second for all animations
*
* default 60
*/
fpsLimit?: number;
/**
* How many times should this option loop. A loop is defined as a "return to
* start values", so it will run, then reverse. This counts as a single
* loop. Setting loop:4 will cause the animation to take the
* same time as 4n+1 iterations.
*
* default 0
*/
loop?: boolean | number;
/**
* The minimum frame time to achieve, the value is calculated based on fpsLimit
*
* default 16.33333333 (1000ms / 60fps)
*/
minFrameTime?: number;
/**
* Not currently implemented.
*
* @deprecated
*/
mobileHA?: boolean;
/**
* Progress handler (only the last element in a set gets this)
*
* default: undefined
*/
progress?: VelocityProgressFn;
/**
* If this should return a Promise with everything else. If promises are not
* required at all, then simply setting it globally will turn them off.
*
* default true
*/
promise?: boolean;
/**
* If promises are turned on, then the promise can reject if there are no
* elements supplied (an empty array is still valid).
*
* default false
*/
promiseRejectEmpty?: boolean;
/**
* The name of the queue to use. If this is set to false then
* it will be added immediately ignoring any other queues running. Queues
* start playing automatically (unlike jQuery, this doesn't need a queue to
* be manually started).
*
* default ""
*/
queue?: false | string;
/**
* How many times should this animation repeat. A repeat will restart at
* initial values and animate once. This is most useful for rotating
* animations where 0deg === 360deg. If you are after a more
* "bounce" effect then look at loop.
*
* default 0
*/
repeat?: boolean | number;
/**
* The speed to play the animation back at. This number can change while
* running, in order to vary the playback rate.
*
* default 0
*/
speed?: number;
/**
* Supply a delay in ms, and every element in the animation will get this
* delay multiplied by its index added to it.
*/
stagger?: number | VelocityOptionFn;
/**
* When adding animations to elements each element has its own queue of
* pending animations. This ensures that when adding a single animation to
* multiple elements, they all begin at the same time.
*
* default true
*/
sync?: boolean;
/**
* Should the cache be used for the tweens. Turning this off can improve
* memory usage slightly, but will also make things slower when creating
* animations.
*
* @private
* default true
*/
cache?: boolean;
}
/**
* Used internally for storing the Promise if used.
*/
export interface VelocityPromise {
/**
* A saved copy of the Promise.
*
* @private
*/
_promise?: Promise;
/**
* This method is called at most once to signify that the animation has
* completed. Currently a loop:true animation will never complete. This
* allows .then(fn) to run (see Promise support).
*
* @private
*/
_resolver?: (value?: (VelocityResult) | PromiseLike) => void;
/**
* This method is called at most once to signify that the animation has
* completed. Currently a loop:true animation will never complete. This
* allows .then(fn) to run (see Promise support).
*
* @private
*/
_rejecter?: (reason?: any) => void;
}
/**
* The return type of any velocity call. If this is called via a "utility"
* function (such a jQuery $(elements).velocity(...)) then it will
* be based on the array-like list of elements supplied, otherwise it will
* create a plain array. The extra values for Promises and Velocity are inserted
* into the array in such a way as to not interfere with other methods unless
* they are specifically overwriting them.
*/
export interface VelocityResult extends Array, Partial>> {
/**
* This is the actual Promise used by Velocity. If using Promise.all() or
* similar methods then you may need to use this instead of the Velocity
* result itself.
*/
readonly promise?: Promise>;
/**
* This is the Velocity chaining method. It is functionally equivalent to
* the normal Velocity call, but allows chaining on the elements it is
* attached to.
*/
readonly velocity?: Velocity & {
/**
* These are the animation objects attached to this specific chain. This
* is used in some actions to allow the call to only touch the specific
* animations called rather than just the animations on the linked
* elements.
*
* TODO: Decide if this should be public
* @private
*/
readonly animations?: AnimationCall[];
};
}
/**
* Container for page-wide Velocity state data.
*/
export interface VelocityState {
/**
* Detect if this is a NodeJS or web browser
*/
readonly isClient: boolean;
/**
* Detect mobile devices to determine if mobileHA should be turned
* on.
*/
readonly isMobile: boolean;
/**
* The mobileHA option's behavior changes on older Android devices
* (Gingerbread, versions 2.3.3-2.3.7).
*/
readonly isGingerbread: boolean;
/**
* Create a cached element for re-use when checking for CSS property
* prefixes.
*/
readonly prefixElement?: HTMLDivElement;
/**
* Retrieve the appropriate scroll anchor and property name for the
* browser: https://developer.mozilla.org/en-US/docs/Web/API/Window.scrollY
*/
readonly windowScrollAnchor: boolean;
/**
* Cache the anchor used for animating window scrolling.
*/
readonly scrollAnchor: Window | HTMLElement | Node | boolean;
/**
* Cache the browser-specific property names associated with the
* scroll anchor.
*/
readonly scrollPropertyLeft: string;
/**
* Cache the browser-specific property names associated with the
* scroll anchor.
*/
readonly scrollPropertyTop: string;
/**
* The className we add / remove when animating.
*/
readonly className: string;
/**
* Keep track of whether our RAF tick is running.
*
* @private
*/
isTicking: boolean;
/**
* Container for every in-progress call to Velocity.
*
* @private
*/
first?: AnimationCall;
/**
* Container for every in-progress call to Velocity.
*
* @private
*/
last?: AnimationCall;
/**
* First new animation - to shortcut starting them all up and push
* any css reads to the start of the tick.
*
* @private
*/
firstNew?: AnimationCall;
}
/**
* Internal Sequence per property.
*/
export interface VelocityTween {
/**
* Normalization function - cached at animation creation time.
*/
fn: VelocityNormalizationsFn;
/**
* Sequence to use for tweening (excludes pattern).
*/
sequence?: Sequence;
/**
* Easing function to use for entire tween.
*/
easing?: VelocityEasingFn;
/**
* Start value.
*/
start?: string;
/**
* End value.
*/
end?: string;
}
/*********
* Types *
*********/
/**
* Velocity can run on both HTML and SVG elements.
*/
export type HTMLorSVGElement = HTMLElement | SVGElement;
/**
* The properties that are permitted to be animated.
* TODO: Add SVG and "Tween" properties. Should (can?) this get html / svg specifics later
*/
export type Properties = {
"clientHeight"?: T;
"clientWidth"?: T;
"innerHeight"?: T;
"innerWidth"?: T;
"outerHeight"?: T;
"outerWidth"?: T;
"scroll"?: T;
"scrollHeight"?: T;
"scrollLeft"?: T;
"scrollTop"?: T;
"scrollWidth"?: T;
"tween"?: T;
} & {
// "style" normalizations
[property in keyof CSSStyleDeclaration]?: T;
};
/**
* Used for action callbacks. These are the commands such as `"pause"` and
* `"stop"`
*
* @param args The arguments passed to Velocity when calling this action. They
* start as the first argument passed after the name of the action.
* @param elements Any elements this action is being called on. This may be
* null, in which case it is being called without any.
* @param promiseHandler The action should resolve or reject the promise as
* needed.
* @param action The name of the action before any dot (used for sub-actions).
*/
export type VelocityActionFn = (
args?: any[],
elements?: VelocityResult,
promiseHandler?: VelocityPromise,
action?: string) => any;
/**
* A callback used for the `begin` or `complete` callbacks of an animation.
*
* @param elements The elements being animated.
* @param activeCall The animation being performed.
*/
export type VelocityCallbackFn = (
this: VelocityResult,
elements?: VelocityResult,
activeCall?: AnimationCall) => void;
/**
* All easings must return the current value given the start and end values, and
* a percentage complete. The property name is also passed in case that makes a
* difference to how values are used.
*
* @param percentComplete Between 0 and 1 inclusive.
* @param startValue The value at 0.
* @param endValue The value at 1.
* @param property The property name.
*/
export type VelocityEasingFn = (
percentComplete: number,
startValue: number,
endValue: number,
property?: string) => number;
/**
* List of all easing types for easy code completion in TypeScript
*/
export type VelocityEasingType = VelocityEasingFn
| keyof VelocityEasings
| string // Need to leave in to prevent errors.
| [number] | [number, number] | [number, number, number, number]
| number[]; // Need to leave in to prevent errors.
/**
* The various formats of Element argument for Velocity. Some libraries such as
* jQuery and Zepto provide an array-like
*/
export type VelocityElements = HTMLorSVGElement | HTMLorSVGElement[];
/**
* Used for normalization callbacks.
*
* @param element The element to be called on.
* @param propertyValue The value to set. If undefined then this is
* a get action and must return a string value for that element.
*
* @returns When getting a value it must return a string, otherwise the return
* value is ignored.
*/
export type VelocityNormalizationsFn =
((
element: HTMLorSVGElement,
propertyValue: string) => void)
& ((
element: HTMLorSVGElement) => string);
/**
* A callback to allow us to generate an option value.
*/
export type VelocityOptionFn = (
this: HTMLorSVGElement,
index?: number,
total?: number,
elements?: VelocityElements,
option?: string) => T;
/**
* A callback used for progress tracking.
*/
export type VelocityProgressFn = (
this: VelocityResult,
elements?: VelocityResult,
percentComplete?: number,
remaining?: number,
tweenValue?: number,
activeCall?: AnimationCall) => void;
/**
* Shortcut property type for HTML Elements.
*/
export type VelocityProperties = Properties;
/**
* A property value can be a string or a number. If it is a number then it will
* get the correct unit added to it depending on the property name if required.
*/
export type VelocityProperty = VelocityPropertyValue | VelocityPropertyFn;
/**
* A callback to allow us to generate a property value for a property name.
*/
export type VelocityPropertyFn = (
this: HTMLorSVGElement,
index?: number,
total?: number,
elements?: VelocityElements) => VelocityPropertyValue;
/**
* A property value can be a string or a number. If it is a number then it will
* get the correct unit added to it depending on the property name if required.
*/
export type VelocityPropertyValue = number
| string
| [number | string]
| [number | string, VelocityEasingType | number | string]
| [number | string, VelocityEasingType, number | string];
/**
* A callback to allow us to generate a property start / end value.
*/
export type VelocityPropertyValueFn = (
this: HTMLorSVGElement,
index?: number,
total?: number,
propertyName?: string) => number | string;
/**
* Public Sequence definition.
*/
export type VelocitySequence = {
duration?: number;
easing?: VelocityEasingType;
[percent: number]: Properties;
} | {
[percent: string]: Properties;
}; // Needs to be like this to prevent warnings.
/**
* Public property value for a Sequence.
*/
export type VelocitySequenceProperty = string | [string] | [string, VelocityEasingType];
/******************
* Global extends *
******************/
declare global {
/**
* Extend the return value from document.querySelectorAll().
*/
export interface NodeListOf extends VelocityExtended> {}
/**
* Extend Element directly.
*/
export interface Element extends VelocityExtended {}
/**
* Extend Element directly.
*/
export interface HTMLCollection extends VelocityExtended {}
}
/*****************
* Global access *
*****************/
export default Velocity;
export declare const Velocity: Velocity;