Entering motion

A set of legacy utilities to apply motion in your application.

Caution

The FadeIn, SlideIn, ZoomIn and ShrinkOut entering motions will soon be deprecated. Please use the new Motion component instead.

Examples Code Changelog

Motion comes with entering motions out of the box. Most motions have a pairing exiting motion, while some only have an exiting motion and no entering.

For consistency, don't try to mix and match. If an element enters with one motion it should leave with the same motion.

Fading in

<FadeIn /> is useful for fading in one or more elements.

import { useState } from 'react';

import { css, jsx } from '@compiled/react';

import Button from '@atlaskit/button/default/button';
import ExitingPersistence from '@atlaskit/motion/exiting-persistence';
import FadeIn from '@atlaskit/motion/fade-in';

import { Block } from '../utils/blocks';
import { Centered, RetryContainer } from '../utils/containers';

const MotionFadeOutSingleElementExample = (): JSX.Element => {
	const directions = [
		undefined,
		'top' as const,
		'right' as const,
		'bottom' as const,
		'left' as const,
	];
	const [direction, setDirection] = useState(0);

	return (
		<RetryContainer>
			<div css={containerStyles}>
				<Button
					onClick={() => {
						setDirection((direction + 1) % directions.length);
					}}
				>
					{directions[direction] !== undefined
						? `Enter from ${directions[direction]}`
						: 'No Motion'}
				</Button>

				<Centered css={centeredStyles}>
					<ExitingPersistence appear>
						<FadeIn entranceDirection={directions[direction]}>
							{(props) => (
								<Block
									ref={props.ref}
									className={props.className}
								/>
							)}
						</FadeIn>
					</ExitingPersistence>
				</Centered>
			</div>
		</RetryContainer>
	);
};

const containerStyles = css({ textAlign: 'center' });

const centeredStyles = css({ height: '182px' });

export default MotionFadeOutSingleElementExample;

Sliding in

<SlideIn /> slide an element into position, generally used for things that appear from outside of the viewport into view.

import { useState } from 'react';

import { css, jsx } from '@compiled/react';

import ButtonGroup from '@atlaskit/button/button-group';
import Button from '@atlaskit/button/default/button';
import ExitingPersistence from '@atlaskit/motion/exiting-persistence';
import SlideIn from '@atlaskit/motion/slide-in';
import type { Direction, Fade } from '@atlaskit/motion/entering/types';
import { token } from '@atlaskit/tokens';

import { Block } from '../utils/blocks';
import { Centered, RetryContainer } from '../utils/containers';

const MotionSlideInExample = (): JSX.Element => {
	const [fromIndex, setFromIndex] = useState(0);
	const [fadeIndex, setFadeIndex] = useState(0);

	return (
		<RetryContainer>
			<div css={containerStyles}>
				<ButtonGroup label="Motion options">
					<Button onClick={() => setFromIndex((prev) => (prev + 1) % forms.length)}>
						From {forms[fromIndex]}
					</Button>
					<Button onClick={() => setFadeIndex((prev) => (prev + 1) % fades.length)}>
						Fade {fades[fadeIndex]}
					</Button>
				</ButtonGroup>

				<Centered css={centeredStyles}>
					<ExitingPersistence appear>
						<SlideIn enterFrom={forms[fromIndex]} fade={fades[fadeIndex]}>
							{(props) => (
								<Block
									ref={props.ref}
									className={props.className}
									css={blockStyles}
								/>
							)}
						</SlideIn>
					</ExitingPersistence>
				</Centered>
			</div>
		</RetryContainer>
	);
};

const forms: Direction[] = ['top', 'right', 'bottom', 'left'];
const fades: Fade[] = ['none', 'in', 'out', 'inout'];

const containerStyles = css({ textAlign: 'center' });

const centeredStyles = css({
	height: '300px',
	position: 'relative',
	marginBlockEnd: token('space.0'),
	marginBlockStart: token('space.0'),
	marginInlineEnd: 'auto',
	marginInlineStart: 'auto',
	overflow: 'hidden',
});

const blockStyles = css({
	width: '95%',
	height: '95%',
});

export default MotionSlideInExample;

Zooming in

<ZoomIn /> will over zoom an element into position.

import React from 'react';

import { css, jsx } from '@compiled/react';

import ExitingPersistence from '@atlaskit/motion/exiting-persistence';
import StaggeredEntrance from '@atlaskit/motion/staggered-entrance';
import ZoomIn from '@atlaskit/motion/zoom-in';

import { Block } from '../utils/blocks';
import { Centered, RetryContainer } from '../utils/containers';

const MotionZoomInExample = (): JSX.Element => {
	return (
		<RetryContainer>
			<div css={containerStyles}></div>

			<Centered css={centeredStyles}>
				<StaggeredEntrance>
					<ExitingPersistence appear>
						<React.Fragment>
							<ZoomIn>{(props) => <Block {...props} appearance="small" />}</ZoomIn>
							<ZoomIn>{(props) => <Block {...props} appearance="small" />}</ZoomIn>
							<ZoomIn>{(props) => <Block {...props} appearance="small" />}</ZoomIn>
						</React.Fragment>
					</ExitingPersistence>
				</StaggeredEntrance>
			</Centered>
		</RetryContainer>
	);
};

const containerStyles = css({ textAlign: 'center' });

const centeredStyles = css({ height: '82px' });

export default MotionZoomInExample;

Shrinking out

This motion only has an exiting motion. StaggeredEntrance will have no effect.

<ShrinkOut /> will shrink an element down to nothing when exiting. Works best with flex children as collapsing margins can come with undesired behavior.

import { useState } from 'react';

import { css, jsx } from '@compiled/react';

import ButtonGroup from '@atlaskit/button/button-group';
import Button from '@atlaskit/button/default/button';
import ExitingPersistence from '@atlaskit/motion/exiting-persistence';
import ShrinkOut from '@atlaskit/motion/shrink-out';
import { token } from '@atlaskit/tokens';

import { Block } from '../utils/blocks';
import { Centered } from '../utils/containers';

const MotionShrinkOutExample = (): JSX.Element => {
	const [actualApps, setApps] = useState(apps);

	return (
		<div>
			<div css={containerStyles}>
				<ButtonGroup label="App options">
					<Button onClick={() => setApps(apps)}>Reset</Button>
				</ButtonGroup>
			</div>

			<Centered css={centeredStyles}>
				<ExitingPersistence>
					{actualApps.map((app) => (
						<ShrinkOut key={app}>
							{(props) => (
								<Block ref={props.ref} appearance="small" css={blockStyles}>
									<Button
										onClick={() => {
											setApps((prods) => prods.filter((val) => val !== app));
										}}
									>
										{app}
									</Button>
								</Block>
							)}
						</ShrinkOut>
					))}
				</ExitingPersistence>
			</Centered>
		</div>
	);
};

const apps = [
	'Confluence',
	'Bitbucket',
	'Jira Service Management',
	'Opsgenie',
	'Statuspage',
	'Jira Software',
];

const containerStyles = css({ textAlign: 'center' });

const centeredStyles = css({ height: '82px' });

const blockStyles = css({
	width: 'auto',
	marginBlockEnd: token('space.050'),
	marginBlockStart: token('space.050'),
	marginInlineEnd: token('space.050'),
	marginInlineStart: token('space.050'),
	overflow: 'hidden',
});

export default MotionShrinkOutExample;

Was this page helpful?

We use this feedback to improve our documentation.