AnimateZoom

놓일 자리의 한가운데에서 다가오는 효과입니다. AnimateGrow와 같은 계산을 두 배 넘는 거리로, 언제나 중심을 기준으로 실행합니다. 화면에서 한 번은 시선을 끊어야 하는 그 하나를 위한 것입니다.

import { AnimateZoom } from 'neba';

<AnimateZoom>
  <Statistic label="이번 분기 가동률" value={99.98} unit="%" />
</AnimateZoom>;

Props

Prop	타입	기본값	설명
from	number	0.4	최종 크기에 대한 시작 배율. 1보다 크면 앞에서 다가와 제자리에 놓입니다
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={<section />}). Base UI의 render prop 그대로
children	ReactNode	—	다가오는 것

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

origin은 없습니다. 모서리에 고정된 zoom은 grow이고, 그것은 AnimateGrow입니다.

예시

from

시작 배율입니다. 1보다 한참 작으면 아무것도 없던 자리에서 솟아오르고, 1보다 크면 커진 채로 등장해 제자리로 물러납니다. 후자는 페이지에서 솟는 것이 아니라 읽는 사람 쪽으로 다가오는 것처럼 읽힙니다.

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

export default function AnimateZoomStrength() {
  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">
        {[0.1, 0.4, 1.8].map((from) => (
          <AnimateZoom key={`${from}-${run}`} from={from} duration={700}>
            <Box size="sm">
              <Typography level="caption">from {from}</Typography>
            </Box>
          </AnimateZoom>
        ))}
      </div>
    </div>
  );
}

trigger="visible"

zoom이 가장 흔히 쓰이는 자리는 독자가 다다르는 순간 놓이는 수치입니다. threshold는 요소가 화면에 얼마나 들어와야 하는지를 0에서 1 사이로 정하고, 기본으로 켜져 있는 once가 페이지를 되돌릴 때마다 다시 재생되는 것을 막습니다.

import { AnimateZoom, Card } from 'neba';

export default function AnimateZoomVisible() {
  return (
    <div className="h-56 w-full max-w-sm overflow-y-auto">
      <div className="flex h-40 items-center justify-center text-sm text-(--neba-muted-fg)">
        Scroll down
      </div>

      <AnimateZoom trigger="visible" threshold={0.6} duration={600}>
        <Card title="Here it is" size="sm">
          It ran when six tenths of it was on screen, and only the first time.
        </Card>
      </AnimateZoom>

      <div className="h-40" />
    </div>
  );
}

mode

out은 다시 멀어지며 끝에서 멈춥니다.

<AnimateZoom mode="out" duration={240}>
  <Card title="닫힘">이 카드는 나가는 중입니다.</Card>
</AnimateZoom>

stagger

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

접근성

• 축소된 모션 설정에서는 애니메이션이 통째로 꺼지고 내용은 원래 크기로 그냥 거기 있습니다.
• 넓은 면적에 걸친 강한 zoom은 이 묶음에서 모션에 민감한 독자를 가장 괴롭히기 쉬운 효과입니다. 화면의 상당 부분을 덮는 것에는 작은 from이나 fade를 쓰세요.