@atlaskit/motion/report.api.md

A set of utilities to apply motion in your application.

<!-- API Report Version: 2.3 -->

## API Report File for "@atlaskit/motion"

> Do not edit this file. This report is auto-generated using
> [API Extractor](https://api-extractor.com/).
> [Learn more about API reports](https://hello.atlassian.net/wiki/spaces/UR/pages/1825484529/Package+API+Reports)

### Table of contents

- [Main Entry Types](#main-entry-types)
- [Peer Dependencies](#peer-dependencies)

### Main Entry Types

<!--SECTION START: Main Entry Types-->

```ts
/// <reference types="react" />

import { CSSObject } from '@emotion/react';
import { default as React_2 } from 'react';
import { ReactNode } from 'react';
import { Ref } from 'react';

// @public (undocumented)
type AnimationCurve =
	| 'cubic-bezier(0.15,1,0.3,1)'
	| 'cubic-bezier(0.2,0,0,1)'
	| 'cubic-bezier(0.8,0,0,0.8)';

// @public (undocumented)
type CallbackRef = (instance: Element_2) => void;

// @public
export type Direction = 'bottom' | 'left' | 'right' | 'top';

// @public
type Distance = 'constant' | 'proportional';

// @public
export const durationStep = 25;

// @public (undocumented)
export const easeIn: AnimationCurve;

// @public (undocumented)
export const easeInOut: AnimationCurve;

// @public (undocumented)
export const easeOut: AnimationCurve;

// @public (undocumented)
type Element_2 = HTMLElement | null;

// @public
interface ExitingChildContext {
	appear: boolean;
	isExiting: boolean;
	onFinish?: () => void;
}

// @public
export const ExitingPersistence: React_2.MemoExoticComponent<
	({ appear: appearFromProp, children: childs, exitThenEnter }: ExitingPersistenceProps) => any
>;

// @public (undocumented)
export interface ExitingPersistenceProps {
	appear?: boolean;
	children?: ReactNode;
	exitThenEnter?: boolean;
}

// @public
type Fade = 'in' | 'inout' | 'none' | 'out';

// @public
export const FadeIn: ({
	children,
	duration,
	entranceDirection,
	exitDirection,
	distance,
	onFinish,
	isPaused,
}: FadeKeyframesMotionProps) => JSX.Element;

// @public (undocumented)
export const fadeInAnimation: (direction?: Direction, distance?: Distance) => CSSObject;

// @public
export interface FadeKeyframesMotionProps extends KeyframesMotionProps {
	distance?: Distance;
	entranceDirection?: Direction;
	exitDirection?: Direction;
}

// @public
export const isReducedMotion: () => boolean;

// @public
interface KeyframesMotionProps
	extends MotionProps<{
		className: string;
		ref: Ref<any>;
	}> {
	isPaused?: boolean;
}

// @public (undocumented)
export const largeDurationMs: number;

// @public (undocumented)
export const mediumDurationMs: number;

// @public
interface MotionProps<TProps extends {}> {
	children: (opts: TProps, state: Transition) => React.ReactNode;
	duration?: number;
	onFinish?: (state: Transition) => void;
}

// @public @deprecated (undocumented)
export const prefersReducedMotion: () => {
	readonly '@media (prefers-reduced-motion: reduce)': {
		readonly animation: 'none';
		readonly transition: 'none';
	};
};

// @public
export const reduceMotionAsPerUserPreference: {
	readonly '@media (prefers-reduced-motion: reduce)': {
		readonly animation: 'none';
		readonly transition: 'none';
	};
};

// @public
export const ResizingHeight: ({
	children,
	...props
}: ResizingHeightOpts & {
	children: (opts: { ref: CallbackRef }) => React_2.ReactNode;
}) => JSX.Element;

// @public (undocumented)
interface ResizingHeightOpts {
	duration?: (prevHeight: number, nextHeight: number) => number;
	timingFunction?: (prevHeight: number, nextHeight: number, duration: number) => string;
}

// @public
export const ShrinkOut: ({ children, duration, onFinish }: ShrinkOutProps) => any;

// @public (undocumented)
export const shrinkOutAnimation: () => CSSObject;

// @public (undocumented)
export interface ShrinkOutProps
	extends MotionProps<{
		ref: React_2.Ref<any>;
	}> {}

// @public
export const SlideIn: ({
	children,
	enterFrom,
	exitTo,
	fade,
	duration,
	isPaused,
	onFinish,
	animationTimingFunction,
}: SlideInProps) => JSX.Element;

// @public (undocumented)
export const slideInAnimation: (from: Direction, state: Transition, fade: Fade) => CSSObject;

// @public (undocumented)
interface SlideInProps extends KeyframesMotionProps {
	animationTimingFunction?: (state: Transition) => AnimationCurve;
	enterFrom: Direction;
	exitTo?: Direction;
	fade?: Fade;
}

// @public (undocumented)
export const smallDurationMs: number;

// @public
export const StaggeredEntrance: ({
	children,
	column,
	columns,
	delayStep,
}: StaggeredEntranceProps) => JSX.Element;

// @public (undocumented)
export interface StaggeredEntranceProps {
	children: JSX.Element | JSX.Element[];
	column?: number;
	columns?: 'responsive' | number;
	delayStep?: number;
}

// @public
export type Transition = 'entering' | 'exiting';

// @public (undocumented)
export const useExitingPersistence: () => ExitingChildContext;

// @public
export const useIsReducedMotion: () => boolean;

// @public
export const useResizingHeight: ({
	duration: calcDuration,
	timingFunction: calcTimingFunction,
}?: ResizingHeightOpts) => {
	ref: CallbackRef;
};

// @public
export const ZoomIn: ({
	children,
	duration,
	isPaused,
	onFinish,
}: KeyframesMotionProps) => JSX.Element;

// @public (undocumented)
export const zoomInAnimation: () => CSSObject;

// (No @packageDocumentation comment for this package)
```

<!--SECTION END: Main Entry Types-->

### Peer Dependencies

<!--SECTION START: Peer Dependencies-->

```json
{
	"react": "^16.8.0"
}
```

<!--SECTION END: Peer Dependencies-->