Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

@atlaskit/motion

atlassian177.6kApache-2.01.9.3TypeScript support: included

A set of utilities to apply motion in your application.

atlaskit, css, animation, motion, react, ui

readme

Motion

A set of utilities to apply motion in your application.

Installation

yarn add @atlaskit/motion

Usage

View documentation.

changelog

@atlaskit/motion

1.9.3

Patch Changes

  • #166087 3ab7d7da348ab - Adds side-effect config to support Compiled css extraction in third-party apps

1.9.2

Patch Changes

  • Updated dependencies

1.9.1

Patch Changes

  • #145306 43b81fd5ead81 - Remove react-router-dom from devDependencies as it is incompatible with React 18, and was only used in an example.

1.9.0

Minor Changes

  • #127511 db30e29344013 - Widening range of react and react-dom peer dependencies from ^16.8.0 || ^17.0.0 || ~18.2.0 to the wider range of ^16.8.0 || ^17.0.0 || ^18.0.0` (where applicable).

    This change has been done to enable usage of `react@18.3as well as to have a consistent peer dependency range forreactandreact-domfor/platform` packages.

Patch Changes

  • Updated dependencies

1.8.0

Minor Changes

1.7.4

Patch Changes

  • #116025 cd506a937e44f - Internal change to how typography is applied. There should be no visual change.

1.7.3

Patch Changes

  • Updated dependencies

1.7.2

Patch Changes

  • #114683 ff0815316ab38 - Removes usage of custom theme button in places where its API is not being used and the default button is able to be used instead. This should give a slight performance (runtime) improvement.

1.7.1

Patch Changes

1.7.0

Minor Changes

  • #110670 c733254a2dd6e - Explicitly set jsxRuntime to classic via pragma comments in order to avoid issues where jsxRuntime is implicitly set to automatic.

1.6.1

Patch Changes

  • #93481 c826eb17b113e - Remove examples of the logos that have been deprecated by the '@atlaskit/logo' package.

1.6.0

Minor Changes

1.5.3

Patch Changes

1.5.2

Patch Changes

1.5.1

Patch Changes

  • #41372 971e55b3699 - Prefix unused opts variable with '_' to fix typechecking under local consumption

1.5.0

Minor Changes

  • #40426 b3ba6514308 - Introduce reduceMotionAsPerUserPreference in favour of prefersReducedMotion as the latter does not work correctly with Compiled.

1.4.5

Patch Changes

1.4.4

Patch Changes

1.4.3

Patch Changes

  • #33652 e7ea6832ad2 - Bans the use of React.FC/React.FunctionComponent type in ADS components as part of the React 18 migration work. The change is internal only and should not introduce any changes for the component consumers.

1.4.2

Patch Changes

1.4.1

Patch Changes

1.4.0

Minor Changes

Patch Changes

  • Updated dependencies

1.3.2

Patch Changes

  • #30905 8081a4b12d3 - Fixed a type error for the ResizingHeight component caused by not rendering valid JSX

1.3.1

Patch Changes

1.3.0

Minor Changes

  • #25860 a86726f0b16 - Updates @emotion/core to @emotion/react; v10 to v11. There is no expected behavior change.

1.2.4

Patch Changes

  • #26408 9de88fa1e1e - Internal changes to include spacing tokens in component implementations.

1.2.3

Patch Changes

1.2.2

Patch Changes

1.2.1

Patch Changes

  • #23381 01a461fe433 - Internal code change turning on new linting rules.
  • Updated dependencies

1.2.0

Minor Changes

  • #22642 a1c9465b456 - - FadeIn now supports different exit directions using the exitDirection prop
    • FadeIn now supports different distance options for animations, using the distance prop

1.1.2

Patch Changes

  • #22614 8a5bdb3c844 - Upgrading internal dependency (bind-event-listener) for improved internal types

1.1.1

Patch Changes

  • #22029 e4b612d1c48 - Internal migration to bind-event-listener for safer DOM Event cleanup

1.1.0

Minor Changes

  • #21335 8630371ec57 - Note: It is a re-release of the wrongly patched version 1.0.4 that should have been a minor release.

    Add a useIsReducedMotion() hook that returns the user's current motion preference.

    Other internal changes:

    • Upgrade to TypeScript 4.2.4

1.0.4

Patch Changes

WRONG RELEASE TYPE - DON'T USE

1.0.3

Patch Changes

1.0.2

Patch Changes

1.0.1

Patch Changes

  • #11692 08b6e9821d0 - ExitingPersistence is now memoised to prevent a re-render that terminates the exit animation when its children have not changed.

1.0.0

Major Changes

  • #10609 4925538af72 - This 1.0.0 release denotes that the package API is now stable and is no longer in developer preview. There are NO API CHANGES in this release.

0.4.8

Patch Changes

  • #10230 12f99a7b1ab - Export useExitingPersistence from @atlaskit/motion, and fix types for children of ExitingPersistence.

0.4.7

Patch Changes

  • #9641 9d9f1490c22 - @atlaskit/motion now supports multi entry-points. Users can now import only the parts of this module they need, reducing the size of your final bundle.

    Entry-points include:

    @atlaskit/motion/curves
@atlaskit/motion/durations
@atlaskit/motion/accessibility
@atlaskit/motion/exiting-persistence
@atlaskit/motion/fade-in
@atlaskit/motion/slide-in
@atlaskit/motion/zoom-in
@atlaskit/motion/shrink-out
@atlaskit/motion/staggered-entrance

0.4.6

Patch Changes

0.4.5

Patch Changes

  • #5497 5f58283e1f - Export types using Typescript's new "export type" syntax to satisfy Typescript's --isolatedModules compiler option. This requires version 3.8 of Typescript, read more about how we handle Typescript versions here: https://atlaskit.atlassian.com/get-started Also add typescript to devDependencies to denote version that the package was built with.

0.4.4

Patch Changes

0.4.3

Patch Changes

0.4.2

Patch Changes

  • #3885 6c525a8229 - Upgraded to TypeScript 3.9.6 and tslib to 2.0.0

    Since tslib is a dependency for all our packages we recommend that products also follow this tslib upgrade to prevent duplicates of tslib being bundled.

0.4.1

Patch Changes

  • #3428 60dd4ecc69 - Changed export all to export individual components in index
  • db053b24d8 - Update all the theme imports to be tree-shakable

0.4.0

Minor Changes

0.3.0

Minor Changes

  • #2763 dd275c9b81 - Added the option to animate opacity within SlideIn.

    You can now add the property animateOpacity which if true, animates the opacity from 0 -> 1 on enter and 1 -> 0 on exit.

0.2.6

Patch Changes

  • #2943 1e4930567c - There should be no noticeable changes to consumers of motion, but we now remove the animation styles once an animation is complete, or if the elements are not meant to animate on initial mount. This prevents a class of bugs where we were seeing unintended animations.

0.2.5

Patch Changes

  • #2866 54a9514fcf - Build and supporting files will no longer be published to npm

0.2.4

Patch Changes

0.2.3

Patch Changes

0.2.2

Patch Changes

0.2.1

Patch Changes

0.2.0

Minor Changes

  • [minor]1d72045e6b:

    SlideIn is now more customizable and has new props:

    • *BREAKING CHANGE: * from prop has been renamed to enterFrom
    • You can now optionally set an explicit exitTo prop which specifies which direction the component will animate towards when exiting. The from prop has also been renamed to enterFrom. If no exitTo prop is set, the exiting motion will default to being the reverse of the entrance motion. i.e. if enterFrom={"right"} then the element will slide in from the right and then exit towards the right as well.
    • You can now optionally set the prop animationTimingFunction to override animation curve to use when entrancing v.s. when exiting.

Patch Changes

0.1.2

Patch Changes

0.1.1

Patch Changes

  • [patch]24865cfaff:

    New <ExitingPersistence /> component

    You can now persist exiting elements using ExitingPersistence. Doing so will allow them to animate away while exiting.

    There are three ways you can utilise this component:

    Conditionally rendering a single component

    import { FadeIn, ExitingPersistence } from '@atlaskit/motion';

({ entered }) => (
  <div>
    <ExitingPersistence>
      {entered && (
        <FadeIn>{props => <div {...props}>hello world</div>}</FadeIn>
      )}
    </ExitingPersistence>
  </div>
);

    Conditionally rendering multiple components

    import { FadeIn, ExitingPersistence } from '@atlaskit/motion';

() => (
  <ExitingPersistence>
    {one && <FadeIn>{props => <div {...props}>hello world</div>}</FadeIn>}
    {two && <FadeIn>{props => <div {...props}>hello world</div>}</FadeIn>}
  </ExitingPersistence>
);

    Conditionally rendering elements in an array

    Make sure to have unique keys for every element!

    import { FadeIn, ExitingPersistence } from '@atlaskit/motion';

() => (
  <ExitingPersistence>
    {elements.map(element => (
      // Key is very important here!
      <FadeIn key={element.key}>
        {props => <div {...props}>hello world</div>}
      </FadeIn>
    ))}
  </ExitingPersistence>
);

    Updated <StaggeredEntrance /> component

    StaggeredEntrance no longer has the limitation of requiring motions to be the direct descendant. Simply ensure your motion elements are somewhere in the child tree and they will have their entrance motion staggered.

    import { FadeIn, StaggeredEntrance } from '@atlaskit/motion';

() => (
  <StaggeredEntrance>
    <div>
      {items.map(logo => (
        <div key={logo.key}>
          <FadeIn>{props => <div {...props} />}</FadeIn>
        </div>
      ))}
    </div>
  </StaggeredEntrance>
);

0.1.0

Minor Changes

  • [minor]5c3fc52da7:

    The internal Motion component is now called KeyframesMotion.- [minor]1dd6a6d6ac:

    ExitingPersistence now has an appear prop. Previously entering motions would always appear when mounting - now you have to opt into the behaviour.

    -<ExitingPersistence>
+<ExitingPersistence appear>
  ...
</ExitingPersistence>

Patch Changes

  • [patch]f175c8088f:

    Fixes non-exiting elements from re-rendering unnecessarily.

0.0.4

Patch Changes

0.0.3

Patch Changes

  • [patch]94abe7f41a:

    New useResizingHeight() hook

    This is a small yet powerful hook which you can consume to enable an element to resize its height when it changes after a state transition. It uses CSS under-the-hood to maximize performance.

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

({ text }) => <div {...useResizingHeight()}>{text}</div>;

0.0.2

Patch Changes

  • [patch]d8a99823e2:

    Adds FadeIn and StaggeredEntrance components and reduced motion utilities.

0.0.1

Patch Changes

  • [patch]cdcb428642:

    Initial release of @atlaskit/motion