@atlaskit/motion/dist/types-ts4.5/entering/keyframes-motion.d.ts

A set of utilities to apply motion in your application.

import React, { type Ref } from 'react';
import { type Durations } from '../utils/durations';
import { type AnimationCurve, type Direction, type MotionProps } from './types';
export type Animations = 'fade-in' | 'fade-out' | 'zoom-in' | 'zoom-out' | `slide-${'in' | 'out'}-from-${Direction}` | `slide-${'in' | 'out'}-from-${Direction}` | `fade-${'in' | 'out'}-from-${Direction}` | `fade-${'in' | 'out'}-from-${Direction}-constant`;
/**
 * These are props that motions should use as their external props for consumers.
 * See [FadeIn](packages/helpers/motion/src/entering/fade-in.tsx) for an example usage.
 */
export interface KeyframesMotionProps extends MotionProps<{
    className: string;
    style: Record<string, any>;
    ref: Ref<any>;
}> {
    /**
     * Can be used to pause the animation before it has finished.
     */
    isPaused?: boolean;
}
interface InternalKeyframesMotionProps extends KeyframesMotionProps {
    /**
     * Timing function to be used with the animation.
     * Useful if you want a different curve when entering vs. exiting.
     */
    animationTimingFunction: AnimationCurve;
    /**
     * Timing function to be used with the animation when exiting.
     * If not provided, it will default to the entering animation timing function.
     */
    animationTimingFunctionExiting?: AnimationCurve;
    /**
     * CSS keyframes for the entering animation.
     */
    enteringAnimation: Animations;
    /**
     * CSS keyframes for the exiting animation.
     */
    exitingAnimation?: Animations;
    /**.
     * How long the motion will take.
     */
    duration: Durations;
}
/**
 * This is the base INTERNAL component used for all other entering motions.
 * This does not need Javascript to execute on the client so it will run immediately
 * for any SSR rendered React apps before the JS has executed.
 */
declare const EnteringMotion: ({ children, animationTimingFunction, animationTimingFunctionExiting, enteringAnimation, exitingAnimation, isPaused, onFinish: onFinishMotion, duration, }: InternalKeyframesMotionProps) => React.JSX.Element;
export default EnteringMotion;