Staggered entrance

Stagger the entrance of multiple elements in sequence.
ExamplesCodeChangelog

8.7.0

Minor Changes

Patch Changes

  • Updated dependencies

8.6.1

Patch Changes

  • Updated dependencies

8.6.0

Minor Changes

Patch Changes

  • Updated dependencies

8.5.1

Patch Changes

8.5.0

Minor Changes

Patch Changes

8.4.2

Patch Changes

  • Use @atlassian/testing-library exclusively in unit tests.
  • fae4f6a53e4be, (opens new window) - Render label enter and exit animations through cssMap in Tag, React Select, Select, and User Picker. Motion now measures concurrent CSS animation lists correctly so the label scale and fade animations complete together.

8.4.1

Patch Changes

  • ef98af289c49b, (opens new window) - Add motion to Tag, AvatarTag, TagDropdownTrigger, Tag Group, Select, React Select, and User Picker tag values. Tags use motion.label.enter and motion.label.exit for entry and exit, while interactive tags and dropdown triggers use the button hover and pressed motion tokens; Tag Dropdown Trigger also fades between its content and loading spinner. The remove control is removed when exit begins so it cannot linger while the tag collapses.

    Motion is gated by platform-dst-motion-uplift-labels. Compatibility and adoption paths for the visually uplifted Tag, Tag Group, Select, React Select, and User Picker additionally remain behind platform-dst-lozenge-tag-badge-visual-uplifts.

    @atlaskit/react-select also adds an optional onMotionFinish callback to the exported MultiValueProps interface so the Select can restore its placeholder after the final multi-value exit completes.

    import Tag from '@atlaskit/tag/new'; <Tag text="Status" />;

8.4.0

Minor Changes

Patch Changes

8.3.0

Minor Changes

  • d82e6f76528ab, (opens new window) - Add direct subpath package exports as part of the linking-platform, search, media, and design-system barrel-removal (de-barrel) migration.

    These packages now expose their individual modules via explicit package.json exports subpaths so that consumers can import directly from the leaf module (e.g. @atlaskit/pkg/thing) instead of the package barrel/index. This adds new public entry points without changing or removing any existing exports, so it is a backwards-compatible additive change.

    No runtime behaviour changes; this is an API-surface (entry-point) addition to support tree-shaking and to unblock removal of the barrel index files.

Patch Changes

  • Updated dependencies

8.2.0

Minor Changes

8.1.0

Minor Changes

8.0.0

Major Changes

  • ae45184d2cd0b, (opens new window) - Add initialState option to useMotion and introduce explicit visible and hidden motion states (replacing the previous idle state). This allows consumers to render a component in a pre-hidden state and control the starting point of the motion lifecycle.

7.5.0

Minor Changes

  • cad86b0c0e613, (opens new window) - Remove hardcoded animationFillMode styles from Motion component — fill-mode is now included in the motion design tokens (AnimationFillModeForwards/AnimationFillModeBackwards) and baked directly into the generated CSS animation shorthands.

Patch Changes

  • Updated dependencies

7.4.0

Minor Changes

7.3.1

Patch Changes

  • Updated dependencies

7.3.0

Minor Changes

  • 28870bef28294, (opens new window) - Add useMotion hook so motion can be applied to an existing element without an extra wrapper element. The hook is available from the @atlaskit/motion/use-motion entry point. Motion now consumes this hook behind the platform-dst-use-motion feature gate (no behavioural change while the gate is off).

7.2.0

Minor Changes

  • cd097a2111788, (opens new window) - Republish packages depending on @atlaskit/react-compiler-gating so their published dependency reference is updated to the renamed @atlaskit/react-compiler-gating scope.

    The earlier rename of @atlassian/react-compiler-gating to @atlaskit/react-compiler-gating only bumped the renamed package itself, so dependent packages were never republished and their published versions still referenced the old @atlassian/react-compiler-gating name, which is not available in the public npm registry. This minor bump republishes all affected packages with the corrected dependency.

Patch Changes

  • Updated dependencies

7.1.1

Patch Changes

7.1.0

Minor Changes

  • 70d7bedfe6c44, (opens new window) - Migrate CustomMotionXCSS type from XCSSProp (@compiled/react) to StrictXCSSProp (@atlaskit/css) for improved type safety and alignment with the UI Styling Standard

7.0.0

Major Changes

  • f2dc9097319f0, (opens new window) - ### Dropped support for legacy Typescript 4 types. Typescript 5 is now the new minimum.

    Removes the typesVersions property and dist/types-ts4.5 directory from the dist.

    Types are now exclusively via the "types": "dist/types/index.d.ts" property.

    - "typesVersions": { - ">=4.5 <4.9": { - "*": [ - "dist/types-ts4.5/*", - "dist/types-ts4.5/index.d.ts" - ] - } - },

Patch Changes

  • Updated dependencies

6.2.5

Patch Changes

6.2.4

Patch Changes

  • Updated dependencies

6.2.3

Patch Changes

6.2.2

Patch Changes

6.2.1

Patch Changes

  • 69c45287fc0bb, (opens new window) - Simplify motion component examples for ADS skill codegen

    Reduce Motion, ExitingPersistence, StaggeredEntrance, and Resizing from multiple constellation examples to a single focused example each, keeping generated skill reference docs concise for AI consumers.

    Also fix componentToSlug and componentsToSkillIndex not being exported from @atlassian/structured-docs/transforms/component-to-skill-reference, which caused codegen:skill to fail with a TypeError.

6.2.0

Minor Changes

6.1.1

Patch Changes

6.1.0

Minor Changes

6.0.0

Major Changes

  • 88696c5e1a75c, (opens new window) - Replaced experimental useResizingWidth / ResizingWidth with a new generic useResizing / Resizing exported from @atlaskit/motion/resizing.

    The new hook accepts a dimension: 'width' | 'height' | 'both' argument so callers can animate either axis (or both) with a single API. The duration, easing, and onFinishMotion options are unchanged.

5.7.0

Minor Changes

  • 3f856fac603f7, (opens new window) - Motion primitive now can accept a custom motion object defining duration, easing, keyframe and delay. This allows consumers to create more customised entry and exit animations if an applicable motion design token does not exist.

Patch Changes

  • Updated dependencies

5.6.1

Patch Changes

  • Updated dependencies

5.6.0

Minor Changes

  • 7b44d021342cf, (opens new window) - Added new experimental useResizingWidth hook and ResizingWidth component.

    This hook and component can be consumed to enable an element to resize its width when it changes after a state transition.

    Usage of this component should be carefully considered as it can have a performance impact.

5.5.3

Patch Changes

  • Updated dependencies

5.5.2

Patch Changes

5.5.1

Patch Changes

5.5.0

Minor Changes

5.4.2

Patch Changes

5.4.1

Patch Changes

  • Updated dependencies

5.4.0

Minor Changes

  • 07b8035be9593, (opens new window) - Introduced a new motion primitive to be used in conjunction with new motion design tokens. This is currently experimental and subject to change.

    Includes two props, enteringAnimation and exitingAnimation that specify the entering and exiting animations via semantic motion design tokens.

Patch Changes

  • Updated dependencies

5.3.11

Patch Changes

5.3.10

Patch Changes

  • Updated dependencies

5.3.9

Patch Changes

  • Updated dependencies

5.3.8

Patch Changes

  • Updated dependencies

5.3.7

Patch Changes

5.3.6

Patch Changes

  • 5867b0fce9502, (opens new window) - The exported constant reduceMotionAsPerUserPreference has been marked as deprecated and will be removed in a future release. Going forward, you should hardcode this media query in your styles.

5.3.5

Patch Changes

5.3.4

Patch Changes

  • Updated dependencies

5.3.3

Patch Changes

  • Updated dependencies

5.3.2

Patch Changes

5.3.1

Patch Changes

5.3.0

Minor Changes

5.2.0

Minor Changes

5.1.7

Patch Changes

  • Updated dependencies

5.1.6

Patch Changes

5.1.5

Patch Changes

  • Updated dependencies

5.1.4

Patch Changes

  • Updated dependencies

5.1.3

Patch Changes

5.1.2

Patch Changes

5.1.1

Patch Changes

5.1.0

Minor Changes

5.0.0

Major Changes

  • #114024, (opens new window) d2720e17d293e, (opens new window) - Migrated from @emotion/react to @compiled/react in order to improve performance, align with therest of the Atlaskit techstack, and support React 18 Streaming SSR.

    Please note, in order to use this version of @atlaskit/motion, you will need to ensure that your bundler is configured to handle .css imports correctly. Most bundlers come with built-in support for .css imports, so you may notneed to do anything.

    If you are using a different bundler, please refer to the documentation for that bundler to understand how to handle .css imports. For more information on the migration, please refer to RFC-73 Migrating our components toCompiledCSS-in-JS, (opens new window)

4.0.0

Major Changes

Patch Changes

  • Updated dependencies

3.1.0

Minor Changes

3.0.0

Major Changes

  • #114382, (opens new window) 5033cb80b3765, (opens new window) - Breaking change removing the ability to provide arbitrary animation timing functions in favor of a pre-defined set: linear ease-in ease-out ease-in-out.

    Introduced animationTimingFunctionExiting to support changing the timing function based on state (entering/exiting)

Patch Changes

2.0.2

Patch Changes

2.0.1

Patch Changes

2.0.0

Major Changes

  • #109511, (opens new window) 18d4f58b2d05d, (opens new window) - Motion now only accepts static duration values via the duration props of SlideIn / FadeIn / etc components. These have been replaced with an enumerated list of durations small, medium, large and none. This was done in order to support adoption of @compiled/react, which does not have support for dynamic css properties when in extraction mode.

1.10.0

Minor Changes

Patch Changes

  • Updated dependencies

1.9.3

Patch Changes

1.9.2

Patch Changes

  • Updated dependencies

1.9.1

Patch Changes

1.9.0

Minor Changes

  • #127511, (opens new window) db30e29344013, (opens new window) - 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.3 as well as to have a consistent peer dependency range for react and react-dom for /platform packages.

Patch Changes

  • Updated dependencies

1.8.0

Minor Changes

1.7.4

Patch Changes

1.7.3

Patch Changes

  • Updated dependencies

1.7.2

Patch Changes

1.7.1

Patch Changes

1.7.0

Minor Changes

1.6.1

Patch Changes

1.6.0

Minor Changes

1.5.3

Patch Changes

1.5.2

Patch Changes

1.5.1

Patch Changes

1.5.0

Minor Changes

1.4.5

Patch Changes

1.4.4

Patch Changes

1.4.3

Patch Changes

1.4.2

Patch Changes

1.4.1

Patch Changes

1.4.0

Minor Changes

Patch Changes

  • Updated dependencies

1.3.2

Patch Changes

1.3.1

Patch Changes

1.3.0

Minor Changes

1.2.4

Patch Changes

1.2.3

Patch Changes

1.2.2

Patch Changes

1.2.1

Patch Changes

1.2.0

Minor Changes

1.1.2

Patch Changes

1.1.1

Patch Changes

1.1.0

Minor Changes

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

1.0.0

Major Changes

0.4.8

Patch Changes

0.4.7

Patch Changes

  • #9641, (opens new window) 9d9f1490c22, (opens new window) - @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

0.4.4

Patch Changes

0.4.3

Patch Changes

0.4.2

Patch Changes

0.4.1

Patch Changes

0.4.0

Minor Changes

0.3.0

Minor Changes

0.2.6

Patch Changes

  • #2943, (opens new window) 1e4930567c, (opens new window) - 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

0.2.4

Patch Changes

0.2.3

Patch Changes

0.2.2

Patch Changes

  • [patch]6548261c9a, (opens new window):

    Remove namespace imports from React, ReactDom, and PropTypes- Updated dependencies 6548261c9a, (opens new window):

    • @atlaskit/docs@8.3.2
    • @atlaskit/visual-regression@0.1.9
    • @atlaskit/button@13.3.7
    • @atlaskit/logo@12.3.2
    • @atlaskit/lozenge@9.1.4
    • @atlaskit/section-message@4.1.5
    • @atlaskit/theme@9.5.1
    • @atlaskit/tooltip@15.2.3

0.2.1

Patch Changes

  • [patch]166d7b1626, (opens new window):

    Fixes motion blowing up when rendered on the server. - @atlaskit/logo@12.3.1

    • @atlaskit/section-message@4.1.4
    • @atlaskit/docs@8.3.1
    • @atlaskit/button@13.3.6
    • @atlaskit/tooltip@15.2.2

0.2.0

Minor Changes

  • [minor]1d72045e6b, (opens new window):

    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, (opens new window):

    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, (opens new window):

    The internal Motion component is now called KeyframesMotion.- [minor]1dd6a6d6ac, (opens new window):

    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

0.0.4

Patch Changes

0.0.3

Patch Changes

  • [patch]94abe7f41a, (opens new window):

    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

0.0.1

Patch Changes

Was this page helpful?
We use this feedback to improve our documentation.
© 2026 AtlassianTrademark, (opens new window)Privacy, (opens new window)License