Motion

<Motion /> is a component that plays animation without user interaction.

// import { Motion } from '@vibrant-ui/motion'; <Motion animation={{ x: { from: 0, to: 200 } }} duration={1000} loop="reverse" > <Paper width={100} height={100} backgroundColor="primary" /> </Motion>

// import { Motion } from '@vibrant-ui/motion';

<Motion
  animation={{ x: { from: 0, to: 200 } }}
  duration={1000}
  loop="reverse"
>
  <Paper
    width={100}
    height={100}
    backgroundColor="primary"
  />
</Motion>

Loading...

Properties

children (required)

Animation will work properly only when children is a component that can take ref.됩니다.

// animation will not working
<Motion animation={{ x: { from: 0, to: 100 } }}>
  hello
</Motion>

// animation working
<Motion animation={{ x: { from: 0, to: 100 } }}>
  <Box />
</Motion>

animation (required)

animation prop can take all of the System prop. However, style properties that can work with animation only work properly.

Each property takes from and to which is set as start and end state of the animation.

<Motion
  animation={{
    // O
    fontSize: { from: 8, to: 20 },
    // O
    p: { from: 0, to: 10 },
    // O (color token support)
    color: { from: 'primary', to: 'informative' },
    // X (must add an additional % to the `from` value.)
    width: { from: '0', to: '100%' },
    // X (cannot define value between from and to)
    overflow: { from: 'hidden', to: 'visible' },
  }}
>
  <Box />
</Motion>

loop

Animation will be looping with loop property. loop takes true and reverse as option.

• true: Animation repeats from from to to state one way.
• reverse: Animation repeats from from to to, and to to from.

true

reverse

duration

애니메이션을 실행할 시간(ms)를 설정합니다.

duration 값이 0인 경우 스프링 기반 애니메이션으로 작동됩니다.

기본값은 0 (스프링 기반 애니메이션)입니다

0

1000

easing

:::note

duration이 1 이상(시간 기반 애니메이션)인 경우 사용할 수 있습니다

:::

현재 linear, easeInQuad, easeOutQuad 애니메이션을 지원합니다.

linear

easeInQuad

easeOutQuad