• Version 0.0.40
  • Published
  • 7.75 kB
  • 1 dependency
  • MIT license


npm i @types/react-motion
yarn add @types/react-motion
pnpm add @types/react-motion


TypeScript definitions for react-motion



variable presets

const presets: Presets;


    function spring

    spring: (val: number, config?: SpringHelperConfig) => OpaqueConfig;
    • Used in conjunction with the components below. Specifies the how to animate to the destination value, e.g. spring(10, {stiffness: 120, damping: 17}) means "animate to value 10, with a spring of stiffness 120 and damping 17".


    class Motion

    class Motion extends Component<MotionProps> {}

      class Presets

      class Presets {}

        property gentle

        gentle: OpaqueConfig;

          property noWobble

          noWobble: OpaqueConfig;

            property stiff

            stiff: OpaqueConfig;

              property wobbly

              wobbly: OpaqueConfig;

                class StaggeredMotion

                class StaggeredMotion extends Component<StaggeredMotionProps> {}

                  class TransitionMotion

                  class TransitionMotion extends Component<TransitionProps> {}


                    interface MotionProps

                    interface MotionProps {}
                    • properties

                    property children

                    children?: ((interpolatedStyle: PlainStyle) => JSX.Element) | undefined;
                    • Callback with your interpolated styles. Must return one react element to render

                      Parameter interpolatedStyle

                    property defaultStyle

                    defaultStyle?: PlainStyle | undefined;
                    • The default style. Being ignored on subsequent renders Object with same keys as in style whose values are the initial numbers you're interpolating on

                    property onRest

                    onRest?: (() => void) | undefined;
                    • The callback that fires when the animation comes to a rest.

                    property style

                    style: Style;
                    • Object that maps to either number or opaque config returned by spring(). Must keep same keys throughout component's existence

                    interface OpaqueConfig

                    interface OpaqueConfig {}

                      property damping

                      damping: number;

                        property precision

                        precision: number;

                          property stiffness

                          stiffness: number;

                            property val

                            val: number;

                              interface SpringHelperConfig

                              interface SpringHelperConfig {}
                              • Spring additional configuration

                              property damping

                              damping?: number | undefined;
                              • Specifies damping 26

                              property precision

                              precision?: number | undefined;
                              • Specifies both the rounding of the interpolated value and the speed (internal). 0.01

                              property stiffness

                              stiffness?: number | undefined;
                              • Specified stiffness 170

                              interface StaggeredMotionProps

                              interface StaggeredMotionProps {}

                                property children

                                children: (interpolatedStyles: any) => React.ReactElement;

                                  property defaultStyles

                                  defaultStyles?: PlainStyle[] | undefined;
                                  • Default styles

                                  property styles

                                  styles: (previousInterpolatedStyles?: PlainStyle[]) => Style[];
                                  • Styles to interpolate

                                    Parameter previousInterpolatedStyles

                                    The previously interpolating (array of) styles (undefined at first render, unless defaultStyles is provided).

                                  interface TransitionPlainStyle

                                  interface TransitionPlainStyle {}
                                  • Default style for transition

                                  property data

                                  data?: any;

                                    property key

                                    key: string;

                                      property style

                                      style: PlainStyle;

                                        interface TransitionProps

                                        interface TransitionProps {}
                                        • Transition properties

                                        property children

                                        | ((interpolatedStyles: TransitionPlainStyle[]) => JSX.Element)
                                        | undefined;

                                          property defaultStyles

                                          defaultStyles?: TransitionPlainStyle[] | undefined;
                                          • Default styles on first render

                                          property didLeave

                                          didLeave?: ((styleThatLeft: TransitionStyle) => void) | undefined;
                                          • Triggers when an element has disappeared

                                            Parameter styleThatLeft

                                          property styles

                                          styles: TransitionStyle[] | InterpolateFunction;
                                          • Styles to interpolate. Accepts array of TransitionStyle objects or interpolated function similar as for

                                          property willEnter

                                          willEnter?: ((styleThatEntered: TransitionStyle) => PlainStyle) | undefined;
                                          • Triggers when a new element will appear

                                            Parameter styleThatEntered

                                          property willLeave

                                          willLeave?: ((styleThatLeft: TransitionStyle) => Style | void) | undefined;
                                          • Triggers when an element will disappear

                                            Parameter styleThatLeft

                                          interface TransitionStyle

                                          interface TransitionStyle {}

                                            property data

                                            data?: any;
                                            • Anything you'd like to carry along. Will be preserved on re-renders until key off

                                            property key

                                            key: string;
                                            • The ID that TransitionMotion uses to track which configuration is which across renders, even when things are reordered. Typically reused as the component key when you map over the interpolated styles.

                                            property style

                                            style: Style;
                                            • Actual starting style configuration

                                            Type Aliases

                                            type InterpolateFunction

                                            type InterpolateFunction = (
                                            previousInterpolatedStyles?: TransitionPlainStyle[]
                                            ) => TransitionStyle[];

                                              type PlainStyle

                                              type PlainStyle = { [key: string]: number };

                                                type Style

                                                type Style = { [key: string]: number | OpaqueConfig };

                                                  type Velocity

                                                  type Velocity = { [key: string]: number };

                                                    Package Files (1)

                                                    Dependencies (1)

                                                    Dev Dependencies (0)

                                                    No dev dependencies.

                                                    Peer Dependencies (0)

                                                    No peer dependencies.


                                                    To add a badge like this onejsDocs.io badgeto your package's README, use the codes available below.

                                                    You may also use Shields.io to create a custom badge linking to https://www.jsdocs.io/package/@types/react-motion.

                                                    • Markdown
                                                    • HTML
                                                      <a href="https://www.jsdocs.io/package/@types/react-motion"><img src="https://img.shields.io/badge/jsDocs.io-reference-blue" alt="jsDocs.io"></a>