AnimateGrow

한 점에서 펼쳐지는 효과입니다. 최종 크기에 가까운 지점에서 시작하고 어느 변에든 고정할 수 있어서, 옆에 있는 것에서 열려 나오는 것처럼 읽힙니다.

import { AnimateGrow } from 'neba';

<AnimateGrow origin="top">
  <Card title="필터">아홉 개 중 세 개 적용됨</Card>
</AnimateGrow>;

Props

Prop	타입	기본값	설명
from	number	0.8	최종 크기에 대한 시작 배율. 1보다 크면 커진 채로 등장해 제자리로 내려앉습니다
origin	string	'center'	펼쳐지는 기준점. CSS transform-origin 그대로입니다
fade	boolean	true	커지면서 함께 페이드인합니다
stagger공통	number	0	한 자식 뒤 다음 자식이 시작하기까지의 간격(ms). 0이면 상자 자체가 재생되고, 그보다 크면 효과가 자식 하나하나에게 넘어갑니다
durationStep공통	number	0	자식마다 재생 시간에 더해지는 값(ms). 음수면 뒤로 갈수록 빨라지며, 0 아래로는 내려가지 않습니다
reverse공통	boolean	false	마지막 자식부터 실행합니다. 순서만 뒤집히고 각 자식은 그대로 재생됩니다
mode공통	'in' | 'out'	'in'	들어오는지 나가는지. out은 같은 애니메이션을 거꾸로 재생하고 그 자리에서 멈춥니다
duration공통	number	340	한 번 재생되는 시간(ms)
delay공통	number	0	시작 전 대기(ms)
easing	string	—	CSS 이징 곡선. 기본값은 라이브러리의 곡선
repeat공통	number | 'infinite'	1	반복 횟수
alternate공통	boolean	false	한 번 걸러 거꾸로 재생합니다. 반복이 처음으로 튀지 않고 되돌아옵니다
trigger공통	'mount' | 'visible' | 'hover' | 'manual'	'mount'	무엇이 재생을 시작하는지. visible은 화면에 들어올 때, hover는 포인터가 올라올 때(포커스 포함), manual은 play가 정합니다
play	boolean	—	trigger가 manual일 때 재생합니다. false → true 될 때마다 처음부터 다시 시작합니다
once공통	boolean	true	trigger가 visible일 때 처음 한 번만 재생할지. 끄면 화면에 들어올 때마다 다시 재생됩니다
threshold공통	number	0.2	trigger가 visible일 때 화면에 얼마나 들어와야 하는지, 0에서 1 사이
paused공통	boolean	false	있는 자리에 붙들어 둡니다
render	useRender.RenderProp	—	div 대신 다른 요소로 렌더링합니다 (render={<li />}). Base UI의 render prop 그대로
children	ReactNode	—	펼쳐지는 것

나머지 <div> 속성은 모두 루트로 전달됩니다. 모든 Animate*가 공유하는 설정은 Prop 규약에 있습니다.

예시

origin

CSS transform-origin 그대로, 나머지가 움직이는 동안 제자리를 지키는 점입니다. top은 아래로 펼쳐지고 bottom left는 모서리에서 열리며, 기본값 center는 사방으로 고르게 커집니다. 이 확대가 무엇에서 나오는 것처럼 보이는지를 정하는 prop입니다.

import { useState } from 'react';
import { AnimateGrow, Box, Button, Typography } from 'neba';

const ORIGINS = ['center', 'top left', 'bottom right', 'top'];

export default function AnimateGrowOrigin() {
  const [run, setRun] = useState(0);

  return (
    <div className="flex flex-col items-center gap-4">
      <Button size="sm" variant="outline" onClick={() => setRun((count) => count + 1)}>
        Play again
      </Button>

      <div className="flex flex-wrap items-center justify-center gap-3">
        {ORIGINS.map((origin) => (
          <AnimateGrow key={`${origin}-${run}`} origin={origin} from={0.2} duration={700}>
            <Box size="sm">
              <Typography level="caption">{origin}</Typography>
            </Box>
          </AnimateGrow>
        ))}
      </div>
    </div>
  );
}

from과 fade

from은 최종 크기에 대한 시작 배율입니다. 1보다 작으면 펼쳐지고, 1보다 크면 커진 채로 등장해 제자리로 내려앉습니다. fade는 함께 따라오는 불투명도 변화이고, 이미 화면에 있으면서 크기만 바뀌는 것에는 꺼 두는 편이 맞습니다.

import { AnimateGrow, Chip } from 'neba';

/* Above 1 it arrives oversized and settles back down onto the page. */
export default function AnimateGrowSettling() {
  return (
    <div className="flex items-center gap-3">
      <AnimateGrow from={0.6} duration={1400} repeat="infinite" alternate>
        <Chip>from 0.6</Chip>
      </AnimateGrow>

      <AnimateGrow from={1.3} duration={1400} repeat="infinite" alternate fade={false}>
        <Chip color="success">from 1.3</Chip>
      </AnimateGrow>
    </div>
  );
}

mode

out은 다시 접습니다. 같은 애니메이션을 거꾸로 재생하고 끝에서 멈춥니다.

<AnimateGrow mode="out" origin="top">
  <Card title="필터">아홉 개 중 세 개 적용됨</Card>
</AnimateGrow>

stagger

stagger, durationStep, reverse는 상자 대신 자식 하나하나에게 효과를 차례로 넘깁니다. 동작은 AnimateFade와 같고, 그쪽 페이지에 자세히 적혀 있습니다.

접근성

• 축소된 모션 설정에서는 애니메이션이 통째로 꺼지고 내용은 원래 크기로 그냥 거기 있습니다.
• 배율은 transform 단축 속성이 아니라 독립된 scale 속성으로 적용되므로, 같은 요소에 직접 건 transform이 그대로 남습니다.