Resizing motion
Animate width and height changes, to be used with caution.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.
| Description | No description. |
|---|---|
| Type | (opts: { ref: CallbackRef;}) => React.ReactNode |
| Description | Which dimension(s) to animate. One of |
|---|---|
| Type | "height" | "width" | "both" |
| Description | Duration of the resize transition as a design token CSS variable. Accepts a |
|---|---|
| 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)" |
| Description | Easing of the resize transition as a design token CSS variable. Accepts a |
|---|---|
| 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)" |
| Description | Callback fired once the resize animation has completed, or immediately if the dimension(s) did not change (no animation was needed). |
|---|---|
| Type | () => void |
| Description | Callback fired immediately before a resize animation starts, while the element is still at its natural layout with no transition styles applied. Measurements taken here reflect the size the element will settle at, rather than an intermediate animation frame. Not called on the initial render, under reduced motion, or when the dimension(s) did not change (no animation was needed) - in all of those cases no motion starts. |
|---|---|
| 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>