Resizing motion

Animate width and height changes, to be used with caution.
ExamplesCodeChangelog

useResizing()

Use with caution. There are known performance issues with this hook.

This hook animates height which is notoriously unperformant, (opens new window). Test your app over low powered devices, and avoid this if you see it impacting FPS.

This hook will animate width, height, or both dimensions simultaneously as content changes. Pass the returned ref to the element you want to animate.

children

Required
Description
No description.
Type(opts: { ref: CallbackRef;}) => React.ReactNode

dimension

Required
Description

Which dimension(s) to animate. One of 'width', 'height', or 'both'.

Type"width" | "height" | "both"

duration

Required
Description

Duration of the resize transition as a design token CSS variable.

Accepts a MotionDuration token value, e.g. token('motion.duration.medium').

Type"var(--ds-duration-instant)" | "var(--ds-duration-long)" | "var(--ds-duration-medium)" | "var(--ds-duration-short)" | "var(--ds-duration-xlong)" | "var(--ds-duration-xshort)" | "var(--ds-duration-xxlong)" | "var(--ds-duration-xxshort)"

easing

Required
Description

Easing of the resize transition as a design token CSS variable.

Accepts a MotionEasing token value, e.g. token('motion.easing.inout.bold').

Type"var(--ds-easing-in-practical)" | "var(--ds-easing-inout-bold)" | "var(--ds-easing-out-practical)" | "var(--ds-easing-out-bold)" | "var(--ds-easing-spring)"

onFinishMotion

Description

Callback fired once the resize animation has completed, or immediately if the dimension(s) did not change (no animation was needed).

Type() => void

Optimizations

Every state update (and thus a new render) will cause this hook to check if the height has changed via getBoundingClientRect, (opens new window). Because of that you'll probably want to make sure renders only happen if your props actually change. Remember to measure first and optimize second.

If you see this slowing things down make sure to utilise either React.memo, (opens new window) or PureComponent, (opens new window), try placing it as high in the tree as makes sense. If you have too many React.memo or PureComponent's you could get worse performance.

import React, { memo } from 'react';
import { useResizing } from '@atlaskit/motion/resizing';
import { token } from '@atlaskit/tokens';

export default memo(({ title }) => {
    const resizingProps = useResizing({
        dimension: 'width',
        duration: token('motion.duration.short'),
        easing: token('motion.easing.out.practical'),
    });

    return (
        <div {...resizingProps}>
            {title}
        </div>
    )
});

<Resizing />

Component which consumes the useResizing under-the-hood. Its props are the same as the hooks options.

import { ResizingHeight } from '@atlaskit/motion';

<ResizingHeight>
  {props => <div {...props} />}
</ResizingHeight>
Was this page helpful?
We use this feedback to improve our documentation.
© 2026 AtlassianTrademark, (opens new window)Privacy, (opens new window)License