@atlaskit/motion
Version:
A set of utilities to apply motion in your application.
38 lines (37 loc) • 2.01 kB
TypeScript
import { type CallbackRef } from '../utils/use-element-ref';
export interface ResizingHeightOpts {
/**
* Duration as a `function`.
* Will receive previous and next `height` and return the `duration`.
*
* By default this will match the [ADG specifications](https://atlassian.design) for how long motion should take.
* Design specifications are still a work in progress.
*/
duration?: (prevHeight: number, nextHeight: number) => number;
/**
* Timing function as a `function`.
* This is handy for changing the curve depending on the user interaction.
* Does the user interact [directly or indirectly](/packages/helpers/motion/docs/variables)?
* You'll want to use an appropriate curve.
* Will receive previous and next `height`, `duration`, and return the
* [timing function](https://developer.mozilla.org/en-US/docs/Web/CSS/timing-function).
*
* By default this will assume indirect motion using `easeInOut`.
*/
timingFunction?: (prevHeight: number, nextHeight: number, duration: number) => string;
}
/**
* `useResizingHeight` animates height changes over state changes. If the height hasn't changed nothing will happen.
*
* __WARNING__: Potentially janky. This hook animates height which is
* [notoriously unperformant](https://firefox-source-docs.mozilla.org/performance/bestpractices.html#Get_familiar_with_the_pipeline_that_gets_pixels_to_the_screen).
* Test your app over low powered devices, you may want to avoid this if you can see it impacting FPS.
*
* See [examples](https://atlaskit.atlassian.com/packages/design-system/motion/docs/resizing-motions).
*
* @deprecated Use `useResizing` from `@atlaskit/motion/resizing` instead. Pass `dimension: 'height'`
* to animate height changes. The new hook supports `'width'`, `'height'`, or `'both'`.
*/
export declare const useResizingHeight: ({ duration: calcDuration, timingFunction: calcTimingFunction, }?: ResizingHeightOpts) => {
ref: CallbackRef;
};