/** * Base animate type. This is extended by {@link @microsoft/fast-animation#AnimateTo} and {@link @microsoft/fast-animation#AnimateFrom}. * * @public */ export declare abstract class Animate { /** * A mapping between animation options and the css property names they apply to */ private static propertyMap; /** * Stores animation options */ options: AnimateConfig; /** * Stores animation timing functions */ effectTiming: EffectTiming; /** * Callback to call when the animation is canceled */ onCancel: () => void; /** * Tracks if the animation should animate toward an elements natural position or away from it */ protected mode: AnimationMode; /** * Stores the HTML element to be animated */ private animationTarget; /** * Stores the WAAPI object for manipulation by our API */ private animation; /** * Callback to call when the animation finishes playing */ private _onFinish; /** * Stores animation keyframe sets and is accessed by a getter */ private _keyframes; get onFinish(): () => void; set onFinish(callback: () => void); constructor(element: HTMLElement, options?: AnimateConfig, effectTiming?: EffectTiming); /** * plays the animation */ play: () => void; /** * pauses the animation */ pause: () => void; /** * finishes the animation */ finish: () => void; /** * cancels the animation */ cancel: () => void; /** * reverses an animation */ reverse: () => void; /** * adds a set of keyframes to set of animation keyframes the animation should execute */ addKeyframes: (keyframes: Array>) => void; /** * Ensure animation object */ private ensureAnimationObjectExists; /** * Creates the animation object */ private createAnimationObject; /** * Returns a list of properties that will be animated based options */ private getPropertiesToAnimate; /** * Current implmentations of web animations seem to have trouble animating both scale and opacity * from a starting value of 0. This method detects when those values are 0 and alters them slightly * to known-working starting values */ private normalizeInitialValue; /** * Returns the initial values for all properties being animated */ private getInitialKeyframeValues; /** * Formats a config option into a transform function */ private formatTransformFunction; /** * Converts a number to a pixel string */ private pixelify; /** * Returns keyframe values based on option configuration */ private getOptionKeyframeValues; /** * Gets all keyframes configured by options */ private getOptionKeyframes; /** * Sorts an array of offset keys in ascending order */ private sortOffsets; /** * Consolidates all keyframe arrays into a single keyframe array */ private consolidateKeyframes; /** * Returns the animation's keyframes */ get keyframes(): Keyframe[]; /** * Returns the key frame effect object */ get keyframeEffect(): KeyframeEffect; } /** * Describes the animation properties * @public */ declare interface AnimateConfig { /** * The x position change of the animation */ x?: number | string; /** * The y position change of the animation */ y?: number | string; /** * The top property */ top?: number | string; /** * The right property */ right?: number | string; /** * The bottom proper */ bottom?: number | string; /** * The left property */ left?: number | string; /** * The rotation of the animation in degrees */ rotate?: number; /** * The scale factor of the animation */ scale?: number | [number, number]; /** * The opacity after the animation */ opacity?: number; /** * The transform-origin for the element */ transformOrigin?: string; /** * The transform-style for the element */ transformStyle?: string; } /** * An animation from provided property values to the element's current values. * Extends {@link @microsoft/fast-animation#Animate}. * * @public */ export declare class AnimateFrom extends Animate { protected mode: AnimationMode; } /** * Groups {@link @microsoft/fast-animation#AnimateTo} and {@link @microsoft/fast-animation#AnimateFrom} instances, providing a single API to operate on all of them. * @public */ export declare class AnimateGroup { /** * Stores the onFinish callback */ private _onFinish; /** * Stores the group effect object */ private animations; constructor(animations: Array); /** * The onFinish callback. */ get onFinish(): () => void; set onFinish(callback: () => void); /** * Play the group of animations */ play(): void; /** * Reverses all animations in the group */ reverse(): void; /** * Pauses all animations in the group */ pause: () => void; /** * Finishes all animations in the group */ finish: () => void; /** * Cancels all animations in the group */ cancel: () => void; /** * Returns the longest running animation in the group */ private getLongestAnimation; /** * Returns the cumulative time it will take to complete an animation */ private getAnimationDuration; } /** * Animate a collection of {@link @microsoft/fast-animation#AnimateTo} and {@link @microsoft/fast-animation#AnimateFrom} in sequence. * @public */ export declare class AnimateSequence { /** * onFinish callback method */ onFinish: () => void; private animations; constructor(animations: Array); /** * Play the sequence of animations */ play: () => void; /** * Play the sequence in reverse */ reverse: () => void; /** * Pauses all animations in the sequence */ pause: () => void; /** * Finishes all animations in the sequence */ finish: () => void; /** * Cancels all animations in the sequence */ cancel: () => void; /** * Sequences a set of animations and calls the specified method */ private applySequencedCallback; } /** * An animation to provided property values from the element's current values. * Extends {@link @microsoft/fast-animation#Animate}. * @public */ export declare class AnimateTo extends Animate { protected mode: AnimationMode; } /** * Animation mode describes if an animation should animate toward an elements natural position or away from it * * @internal */ declare enum AnimationMode { animateTo = 0, animateFrom = 1 } /** * Get a cubic bezier curve, formatted as a string, by name. * @param name - the name of the bezier curve to use. * * @public */ export declare function cubicBezier(name: "linear" | "easeOut" | "easeOutSmooth" | "easeIn" | "drillIn" | "backToApp" | "appToApp" | "fastIn" | "fastOut" | "fastInOut" | "exponential" | "fastInFortySevenPercent" | "exponentialReversed" | "navPane" | /* @deprecated */ string): string; /** * Creates an animation to fade an element into view * * @public */ export declare function fadeIn(element: HTMLElement, effectTiming?: EffectTiming): AnimateTo; /** * Creates an animation to fade an element out of view * * @public */ export declare function fadeOut(element: HTMLElement, effectTiming?: EffectTiming): AnimateTo; /** * Utility for registering element/callback pairs where the callback will be called on scroll while the element is in view. * * @public */ export declare class ScrollTrigger extends ScrollTrigger_2 { /** * Check if elements are in view-port and apply scroll method if they are */ protected update(): void; } /** * Scroll trigger base-class that handles event binding and element/callback registration. */ declare abstract class ScrollTrigger_2 { protected subscriptions: ScrollTriggerSubscription[]; protected scrollDistance: number; private requestedFrame; private lastScrollY; constructor(); /** * Subscribe an element and callback for scroll triggers */ subscribe(element: HTMLElement, callback: ScrollTriggerCallback): void; /** * Unsubscribe an element and callback for scroll triggers */ unsubscribe(element: HTMLElement, callback: ScrollTriggerCallback): void; /** * Make any arbitrary updates to UI */ protected update(): void; /** * Checks to see if element/callback pairs have been registered so we don't duplicate registration. */ private isSubscribed; /** * Request's an animation frame if there are currently no open animation frame requests */ private requestFrame; } /** * AnimationTrigger callback contract */ declare type ScrollTriggerCallback = (distance: any) => void; /** * Export subscription interface */ declare interface ScrollTriggerSubscription { element: HTMLElement; callback: ScrollTriggerCallback; inView: boolean; } /** * Utility for registering element/callback pairs where the callback will be called when the element enters the view-port * * @public */ export declare class ViewEnterTrigger extends ScrollTrigger_2 { /** * Check if elements are in view-port and apply scroll method if they are */ protected update(): void; } /** * Utility for registering element/callback pairs where the callback will be invoked when the element exits the view-port * * @public */ export declare class ViewExitTrigger extends ScrollTrigger_2 { /** * Check if elements are in view-port and apply scroll method if they are */ protected update(): void; } export { }