Motion

Where possible this library will use CSS exclusively, and only use Javascript when it is impossible otherwise. This is primarily for Performance, but also for allowing us to have motion run without waiting for Javascript to execute on initial load (very important for our SSR rendered products).

What this boils down to is:

• Use CSS animation/transitions over animation engines unless there is no possible alternative
• Avoid any client side calculations to power motion if it can be done with CSS
• Emulating any spring styled motions with CSS animation
• Highly interactive and/or gestural motions would be contenders for using an animation engine, but we're not there yet

Every component in this library will not render markup, they will just pass down `props` for you to wire up. Because of this the majority of motion atoms will utilise children as props or hooks:

<div {...useMotion()} />

<FadeIn>
  {props => <div {...props} />}
</FadeIn>

Motion animation components cannot be used to animate Primitive components directly. This is because the className prop needs to be passed to the element used for the animation, and Primitives do not expose this prop.

However, Primitives can still be used within the children of the motion component.

If you need to style the element that the animation is being applied to, an alternative is to use css from @compiled/react:

import type { ReactNode } from 'react';
import { css } from '@compiled/react';
import { SlideIn } from '@atlaskit/motion';
import { Box, Inline } from '@atlaskit/primitives';

const styles = css({
    width: '100vw',
    height: '90dvh',
});

const ComponentWithSlideIn = ({ children }: { children: ReactNode }) => (
    <SlideIn enterFrom="bottom" fade="in">
        {({ className, ref }) => (
            <div css={styles} className={className} ref={ref} aria-modal>
                <Inline>
                    <Heading size="large">Hello!</Heading>
                    <Box>{children}</Box>
                </Inline>
            </div>
        )}
    </SlideIn>
);

We want you to use abstractions (atoms) to power your motion and to not worry about underlying tech. We also want a consistent experience across our products. Need a particular motion that doesn't exist yet?

Think about contributing to @atlaskit/motion so all products at Atlassian can benefit.

While motion is utilised to create relationships, show the most important thing on the page, and create delight, it's also important to allow our users to opt out of it. Every motion component should use the provided utilities (see: Accessibility).