framer-motion-animations/dist/index.d.ts

A comprehensive collection of 90+ animations for React using Framer Motion, inspired by animate.css

import * as react from 'react';
import { ReactNode } from 'react';
import { HTMLMotionProps } from 'framer-motion';

declare const Bounce: react.ForwardRefExoticComponent<Omit<BaseAnimationProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
declare const Flash: react.ForwardRefExoticComponent<Omit<BaseAnimationProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
declare const Pulse: react.ForwardRefExoticComponent<Omit<BaseAnimationProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
declare const RubberBand: react.ForwardRefExoticComponent<Omit<BaseAnimationProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
declare const ShakeX: react.ForwardRefExoticComponent<Omit<BaseAnimationProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
declare const ShakeY: react.ForwardRefExoticComponent<Omit<BaseAnimationProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
declare const HeadShake: react.ForwardRefExoticComponent<Omit<BaseAnimationProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
declare const Swing: react.ForwardRefExoticComponent<Omit<BaseAnimationProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
declare const Tada: react.ForwardRefExoticComponent<Omit<BaseAnimationProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
declare const Wobble: react.ForwardRefExoticComponent<Omit<BaseAnimationProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
declare const Jello: react.ForwardRefExoticComponent<Omit<BaseAnimationProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
declare const HeartBeat: react.ForwardRefExoticComponent<Omit<BaseAnimationProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
declare const BackInDown: react.ForwardRefExoticComponent<Omit<BaseAnimationProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
declare const BackInLeft: react.ForwardRefExoticComponent<Omit<BaseAnimationProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
declare const BackInRight: react.ForwardRefExoticComponent<Omit<BaseAnimationProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
declare const BackInUp: react.ForwardRefExoticComponent<Omit<BaseAnimationProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
declare const BackOutDown: react.ForwardRefExoticComponent<Omit<BaseAnimationProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
declare const BackOutLeft: react.ForwardRefExoticComponent<Omit<BaseAnimationProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
declare const BackOutRight: react.ForwardRefExoticComponent<Omit<BaseAnimationProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
declare const BackOutUp: react.ForwardRefExoticComponent<Omit<BaseAnimationProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
declare const BounceIn: react.ForwardRefExoticComponent<Omit<BaseAnimationProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
declare const BounceInDown: react.ForwardRefExoticComponent<Omit<BaseAnimationProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
declare const BounceInLeft: react.ForwardRefExoticComponent<Omit<BaseAnimationProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
declare const BounceInRight: react.ForwardRefExoticComponent<Omit<BaseAnimationProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
declare const BounceInUp: react.ForwardRefExoticComponent<Omit<BaseAnimationProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
declare const BounceOut: react.ForwardRefExoticComponent<Omit<BaseAnimationProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
declare const BounceOutDown: react.ForwardRefExoticComponent<Omit<BaseAnimationProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
declare const BounceOutLeft: react.ForwardRefExoticComponent<Omit<BaseAnimationProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
declare const BounceOutRight: react.ForwardRefExoticComponent<Omit<BaseAnimationProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
declare const BounceOutUp: react.ForwardRefExoticComponent<Omit<BaseAnimationProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
declare const FadeIn: react.ForwardRefExoticComponent<Omit<BaseAnimationProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
declare const FadeInDown: react.ForwardRefExoticComponent<Omit<BaseAnimationProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
declare const FadeInDownBig: react.ForwardRefExoticComponent<Omit<BaseAnimationProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
declare const FadeInLeft: react.ForwardRefExoticComponent<Omit<BaseAnimationProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
declare const FadeInLeftBig: react.ForwardRefExoticComponent<Omit<BaseAnimationProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
declare const FadeInRight: react.ForwardRefExoticComponent<Omit<BaseAnimationProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
declare const FadeInRightBig: react.ForwardRefExoticComponent<Omit<BaseAnimationProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
declare const FadeInUp: react.ForwardRefExoticComponent<Omit<BaseAnimationProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
declare const FadeInUpBig: react.ForwardRefExoticComponent<Omit<BaseAnimationProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
declare const FadeInTopLeft: react.ForwardRefExoticComponent<Omit<BaseAnimationProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
declare const FadeInTopRight: react.ForwardRefExoticComponent<Omit<BaseAnimationProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
declare const FadeInBottomLeft: react.ForwardRefExoticComponent<Omit<BaseAnimationProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
declare const FadeInBottomRight: react.ForwardRefExoticComponent<Omit<BaseAnimationProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
declare const FadeOut: react.ForwardRefExoticComponent<Omit<BaseAnimationProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
declare const FadeOutDown: react.ForwardRefExoticComponent<Omit<BaseAnimationProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
declare const FadeOutDownBig: react.ForwardRefExoticComponent<Omit<BaseAnimationProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
declare const FadeOutLeft: react.ForwardRefExoticComponent<Omit<BaseAnimationProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
declare const FadeOutLeftBig: react.ForwardRefExoticComponent<Omit<BaseAnimationProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
declare const FadeOutRight: react.ForwardRefExoticComponent<Omit<BaseAnimationProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
declare const FadeOutRightBig: react.ForwardRefExoticComponent<Omit<BaseAnimationProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
declare const FadeOutUp: react.ForwardRefExoticComponent<Omit<BaseAnimationProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
declare const FadeOutUpBig: react.ForwardRefExoticComponent<Omit<BaseAnimationProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
declare const FadeOutTopLeft: react.ForwardRefExoticComponent<Omit<BaseAnimationProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
declare const FadeOutTopRight: react.ForwardRefExoticComponent<Omit<BaseAnimationProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
declare const FadeOutBottomLeft: react.ForwardRefExoticComponent<Omit<BaseAnimationProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
declare const FadeOutBottomRight: react.ForwardRefExoticComponent<Omit<BaseAnimationProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
declare const Flip: react.ForwardRefExoticComponent<Omit<BaseAnimationProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
declare const FlipInX: react.ForwardRefExoticComponent<Omit<BaseAnimationProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
declare const FlipInY: react.ForwardRefExoticComponent<Omit<BaseAnimationProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
declare const FlipOutX: react.ForwardRefExoticComponent<Omit<BaseAnimationProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
declare const FlipOutY: react.ForwardRefExoticComponent<Omit<BaseAnimationProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
declare const LightSpeedInLeft: react.ForwardRefExoticComponent<Omit<BaseAnimationProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
declare const LightSpeedInRight: react.ForwardRefExoticComponent<Omit<BaseAnimationProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
declare const LightSpeedOutLeft: react.ForwardRefExoticComponent<Omit<BaseAnimationProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
declare const LightSpeedOutRight: react.ForwardRefExoticComponent<Omit<BaseAnimationProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
declare const RotateIn: react.ForwardRefExoticComponent<Omit<BaseAnimationProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
declare const RotateInDownLeft: react.ForwardRefExoticComponent<Omit<BaseAnimationProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
declare const RotateInDownRight: react.ForwardRefExoticComponent<Omit<BaseAnimationProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
declare const RotateInUpLeft: react.ForwardRefExoticComponent<Omit<BaseAnimationProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
declare const RotateInUpRight: react.ForwardRefExoticComponent<Omit<BaseAnimationProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
declare const RotateOut: react.ForwardRefExoticComponent<Omit<BaseAnimationProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
declare const RotateOutDownLeft: react.ForwardRefExoticComponent<Omit<BaseAnimationProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
declare const RotateOutDownRight: react.ForwardRefExoticComponent<Omit<BaseAnimationProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
declare const RotateOutUpLeft: react.ForwardRefExoticComponent<Omit<BaseAnimationProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
declare const RotateOutUpRight: react.ForwardRefExoticComponent<Omit<BaseAnimationProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
declare const Hinge: react.ForwardRefExoticComponent<Omit<BaseAnimationProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
declare const JackInTheBox: react.ForwardRefExoticComponent<Omit<BaseAnimationProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
declare const RollIn: react.ForwardRefExoticComponent<Omit<BaseAnimationProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
declare const RollOut: react.ForwardRefExoticComponent<Omit<BaseAnimationProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
declare const ZoomIn: react.ForwardRefExoticComponent<Omit<BaseAnimationProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
declare const ZoomInDown: react.ForwardRefExoticComponent<Omit<BaseAnimationProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
declare const ZoomInLeft: react.ForwardRefExoticComponent<Omit<BaseAnimationProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
declare const ZoomInRight: react.ForwardRefExoticComponent<Omit<BaseAnimationProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
declare const ZoomInUp: react.ForwardRefExoticComponent<Omit<BaseAnimationProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
declare const ZoomOut: react.ForwardRefExoticComponent<Omit<BaseAnimationProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
declare const ZoomOutDown: react.ForwardRefExoticComponent<Omit<BaseAnimationProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
declare const ZoomOutLeft: react.ForwardRefExoticComponent<Omit<BaseAnimationProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
declare const ZoomOutRight: react.ForwardRefExoticComponent<Omit<BaseAnimationProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
declare const ZoomOutUp: react.ForwardRefExoticComponent<Omit<BaseAnimationProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
declare const SlideInDown: react.ForwardRefExoticComponent<Omit<BaseAnimationProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
declare const SlideInLeft: react.ForwardRefExoticComponent<Omit<BaseAnimationProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
declare const SlideInRight: react.ForwardRefExoticComponent<Omit<BaseAnimationProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
declare const SlideInUp: react.ForwardRefExoticComponent<Omit<BaseAnimationProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
declare const SlideOutDown: react.ForwardRefExoticComponent<Omit<BaseAnimationProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
declare const SlideOutLeft: react.ForwardRefExoticComponent<Omit<BaseAnimationProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
declare const SlideOutRight: react.ForwardRefExoticComponent<Omit<BaseAnimationProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
declare const SlideOutUp: react.ForwardRefExoticComponent<Omit<BaseAnimationProps, "ref"> & react.RefAttributes<HTMLDivElement>>;

interface BaseAnimationProps extends Omit<HTMLMotionProps<'div'>, 'animate' | 'initial' | 'transition'> {
    children: ReactNode;
    duration?: number;
    delay?: number;
    repeat?: number | boolean;
    className?: string;
    style?: React.CSSProperties;
    onAnimationComplete?: () => void;
    faster?: boolean;
    fast?: boolean;
    slow?: boolean;
    slower?: boolean;
    infinite?: boolean;
}
type AnimationVariant = {
    initial: any;
    animate: any;
};

declare const animationVariants: Record<string, AnimationVariant>;

interface BaseAnimationComponentProps extends BaseAnimationProps {
    variant: keyof typeof animationVariants;
}
declare const BaseAnimation: react.ForwardRefExoticComponent<Omit<BaseAnimationComponentProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
declare const createAnimationComponent: (variant: keyof typeof animationVariants) => react.ForwardRefExoticComponent<Omit<BaseAnimationProps, "ref"> & react.RefAttributes<HTMLDivElement>>;

export { BackInDown, BackInLeft, BackInRight, BackInUp, BackOutDown, BackOutLeft, BackOutRight, BackOutUp, BaseAnimation, type BaseAnimationProps, Bounce, BounceIn, BounceInDown, BounceInLeft, BounceInRight, BounceInUp, BounceOut, BounceOutDown, BounceOutLeft, BounceOutRight, BounceOutUp, FadeIn, FadeInBottomLeft, FadeInBottomRight, FadeInDown, FadeInDownBig, FadeInLeft, FadeInLeftBig, FadeInRight, FadeInRightBig, FadeInTopLeft, FadeInTopRight, FadeInUp, FadeInUpBig, FadeOut, FadeOutBottomLeft, FadeOutBottomRight, FadeOutDown, FadeOutDownBig, FadeOutLeft, FadeOutLeftBig, FadeOutRight, FadeOutRightBig, FadeOutTopLeft, FadeOutTopRight, FadeOutUp, FadeOutUpBig, Flash, Flip, FlipInX, FlipInY, FlipOutX, FlipOutY, HeadShake, HeartBeat, Hinge, JackInTheBox, Jello, LightSpeedInLeft, LightSpeedInRight, LightSpeedOutLeft, LightSpeedOutRight, Pulse, RollIn, RollOut, RotateIn, RotateInDownLeft, RotateInDownRight, RotateInUpLeft, RotateInUpRight, RotateOut, RotateOutDownLeft, RotateOutDownRight, RotateOutUpLeft, RotateOutUpRight, RubberBand, ShakeX, ShakeY, SlideInDown, SlideInLeft, SlideInRight, SlideInUp, SlideOutDown, SlideOutLeft, SlideOutRight, SlideOutUp, Swing, Tada, Wobble, ZoomIn, ZoomInDown, ZoomInLeft, ZoomInRight, ZoomInUp, ZoomOut, ZoomOutDown, ZoomOutLeft, ZoomOutRight, ZoomOutUp, animationVariants, createAnimationComponent };