MaterialDesignTransform

Introduce

This component provide material design 2 and material design 3 transform for html element under react-dom framework.

Feature

1. SharedAxis.

2. FadeThrough.

3. ContainerTransform

• Tip: you can continue to toggle animation even animation is running.

Install

npm i material-design-transform

Import

import { SharedAxis, SharedAxisTransform } from "material-design-transform";

import { FadeThrough } from "material-design-transform";

import {
  ContainerTransform,
  ContainerTransformLayout,
} from "material-design-transform";

Use

const [id, setId] = React.useState(0);

<SharedAxis transform={SharedAxisTransform.fromTopToBottom} keyId={id}>
  {children}
</SharedAxis>;

<FadeThrough keyId={id}>{children}</FadeThrough>;

• New component only render after the old component exit animation completed.

const [id, setId] = React.useState(undefined);

<ContainerTransformLayout keyId={id}>
  ...
  <ContainerTransform
    keyId={0 /* when [id] equal 0 */}
    container={<ElementShowOnExpanded />}
  >
    <ElementShowOnClosed />
  </ContainerTransform>
  ...
  <ContainerTransform
    keyId={1 /* when [id] equal 1 */}
    container={<ElementShowOnExpanded />}
  >
    <ElementShowOnClosed />
  </ContainerTransform>
  ...
</ContainerTransformLayout>;

• If ContainerTransformLayout's keyId matches one ContainerTransform's keyId, the ContainerTransform's container will be expanded with animation.
• ContainerTransform's keyId should be unique under same ContainerTransformLayout.
• ContainerTransform's children should be available to render two same element on single document at the same time. Or use ContainerTransform-mock to create a mock element for animation.
• ContainerTransform's relative position / size / children / props should not change when animation is running.
• ContainerTransformLayout itself should not have any border (but outline is ok).
• ContainerTransform itself should not have any padding or any border (but outline is ok).
• ContainerTransform's animation motion track (only linear track) is different from origin material design because it only use css transition for animation that animation is limited by css.
• ContainerTransform's box-shadow and border-radius can be animated during animation.
• By default ContainerTransform will animate to match ContainerTransformLayout size and position, but you can edit overlayPosition of ContainerTransformLayout to custom animation target.

keyId

Change keyId to toggle switch animation. Only keyId change will toggle animation.

transitionStyle

• "M2" meaning material design 2

• "M3" meaning material design 3

• use MaterialDesignTransformContext for global style settings. MaterialDesignTransformContext can config all the transition components nested inside itself (as long as the transition components don't explicitly set its own style)

import {
  SharedAxis,
  MaterialDesignTransformContext,
} from "material-design-transform";

/* use material design 3 style */
<MaterialDesignTransformContext.Provider value={{ transitionStyle: "M3" }}>
  <SharedAxis keyId={id}>{children}</SharedAxis>
</MaterialDesignTransformContext.Provider>;

• Check out storybook in this project for more details.

ContainerTransform

• fit - how the ContainerTransform's children / mock fit in ContainerTransform when animating

• containerFit - how the ContainerTransform's container fit in ContainerTransform when animating

ContainerTransformLayout only use transform. If ContainerTransformLayout's size don't change, the container's size would not change. So that user no longer need to care about layout problem during animation under new ContainerTransformLayout. Take advantage of ContainerTransform-containerFit to unlock more animation styles (check out demo).

Interactive Demo

• Run storybook in this project.

git clone https://github.com/JohnGu9/material-design-transform.git
cd material-design-transform
npm i
npm run storybook

Browser requirement

ResizeObserver support

Browser	Version (or newer)
Chrome	64
Edge	79
Firefox	69
Safari	13.1
Safari on iOS	13.4

Component dependencies

• react-dom
• react-ref-composer

Issue report

https://github.com/JohnGu9/material-design-transform/issues

Caution

Caution

Before version 3.0.0, the build target is es5.

After version 3.0.0, the build target is esnext. You should use some bundle tool to help your bundle this project code into your own project (like esbuild). Set your tsconfig file "module": "ESNext" and build system (like vite config file build.target) to convert your code to target platform compatible code.

Why esnext? Using esnext to compile this project and preform minimal transpiling. This can product less redundant code and reduce the package size for download.

LICENSE

MIT