AnimatedSize

Introduce

This component provide flexible size-change animation for html element under react-dom framework.

Feature

1. AnimatedSize provide the features that let element's width/height animate between auto and any size.
2. Animation is provided by css transition so the component take less js-runtime compared with pure js implement.
3. And AnimatedSize support perfect animation that you can stop animation or change animation dest or change animation duration at any time even AnimatedSize is animating or nested element's size is changing.

• nested AnimatedSize is also fine.

• most of the job is html renderer paint, more animation with less js-runtime.

Install

npm i animated-size

Import

import { AnimatedSize } from "animated-size";

Use

const [open, setOpen] = React.useState(true);
...
<AnimatedSize widthFactor={open ? { size: "auto" } : { size: 0 }}>
  {/* your element*/}
</AnimatedSize>;

Size Factor

export type Factor = {
  size?: SizeFactor /* default: undefined */;
  duration?: number /* unit: ms, default: 350 */;
  delay?: number /* unit: ms, default: 0 */;
  curve?: DataType.EasingFunction /* default: ease */;
};

export type SizeFactor = number | string | "auto" | undefined;

SizeFactor	Requirement
number	float or int that equal to or bigger than 0
string	the string is valid for css width property
auto	/
undefined	/

For example: element's width is 150px.

<AnimatedSize widthFactor={/* set your factor */}>
  {/* if the entirely width (wrapper by span) is 150px */}
  <Element0 />
  <Element1 />
</AnimatedSize>

This width property of inline style sheet:

Type	Property	Code
number[2]	300px (150 * 2 px)	widthFactor={{ size: 2 }}
string['50px']	50px	widthFactor={{ size: '50px' }}
auto	auto	widthFactor={{ size: 'auto' }}
undefined	undefined	widthFactor={{ size: undefined }} or widthFactor={{ }} or widthFactor={undefined}

Factor change behaviors:

From	To	Description
number[2]	auto	animate from 300px to 150px, then set the width property as 'auto'
number[2]	undefined	animate from 300px to 150px, then set the width property as undefined (remove width property from inline style sheet)
string['50px']	auto	animate from 50px to 150px, then set the width property as 'auto'
string['50px']	undefined	animate from 50px to 150px, then set the width property as undefined (remove width property from inline style sheet)
auto	number[2]	set the width property as 150px, then animate from 150px to 300px
undefined	number[2]	set the width property as 150px, then animate from 150px to 300px
auto	string['50px']	set the width property as 150px, then animate from 150px to 50px
undefined	string['50px']	set the width property as 150px, then animate from 150px to 50px
number[2]	string['50px']	animate from 300px to 50px
string['50px']	number[2]	animate from 50px to 300px
auto	undefined	set the width property as undefined (remove width property from inline style sheet)
undefined	auto	set the width property as auto

• use auto or undefined for better performance when nested element may change its size.

Custom animation curve

AnimatedSize implement the animation that underlay is css transition. Setup factor other properties to custom your animation curve as well as duration and delay just like css transition.

<AnimatedSize
  widthFactor={{
    size: "auto",
    curve: "ease-in",
    duration: 200 /* unit: ms */,
    delay: 200 /* unit: ms */,
  }}
>
  {/* your element*/}
</AnimatedSize>

Custom wrapper

<AnimatedSizeBuilder
  widthFactor={/* set your factor */}
  heightFactor={/* set your factor */}
  builder={(ref) => (
    <div ref={ref}>{/* pass ref to dom element that let AnimatedSize access the element object */}
    {/* set your element that wrapper by div */}
    </div>
  )}
/>

• AnimatedSize require wrapper dom element reference for calculation of this nested elements' total size

Inner element position

By default, AnimatedSize use inline-flex layout (and center inner element) and the inner element follow the flex layout.
Change the parament axisDirection, mainAxisPosition and crossAxisPosition to custom your element position. Or directly set inline style sheet -- style parament.
Because default layout is inline-flex that may cause some layout problem. You can change display to flex to fix some layout problem. Detail in project storybook.
By the way, by default AnimatedSize set overflow as hidden. Set style to override it if necessary.

<AnimatedSize
  widthFactor={/* set your factor */}
  heightFactor={/* set your factor */}
  axisDirection="column"
  mainAxisPosition="start"
  crossAxisPosition="end">
  {/* your element */}
</AnimatedSize>

• axisDirection - CSSProperties.flexDirection
• mainAxisPosition - CSSProperties.justifyContent
• crossAxisPosition - CSSProperties.alignItems

<AnimatedSize
  widthFactor={/* set your factor */}
  heightFactor={/* set your factor */}
  style={{
    overflow: 'visible',
    display:'flex', /* use flex as possible as you can, block usually do not work well */
    position:'relative',
    /* Don't override width or height or transition if you want animation to work properly */
    }}>
  {/* your element */}
</AnimatedSize>

• style

Interactive Demo

git clone https://github.com/JohnGu9/AnimatedSize.git
cd AnimatedSize
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/AnimatedSize/issues

LICENSE

MIT