AnimateReveal

가장자리가 지나가며 내용을 드러냅니다. 아무것도 움직이지 않고 색도 변하지 않습니다. 내용은 이미 제자리에 온전한 크기로 있고, 바뀌는 것은 그중 얼마만큼이 통과되었는가입니다.

import { AnimateReveal } from 'neba';

<AnimateReveal>
  <h2>움직인 것이 아니라 통과된 것입니다</h2>
</AnimateReveal>;

Props

Prop	타입	기본값	설명
stagger공통	number	0	한 자식 뒤 다음 자식이 시작하기까지의 간격(ms). 0이면 상자 자체가 재생되고, 그보다 크면 효과가 자식 하나하나에게 넘어갑니다
durationStep공통	number	0	자식마다 재생 시간에 더해지는 값(ms). 음수면 뒤로 갈수록 빨라지며, 0 아래로는 내려가지 않습니다
reverse공통	boolean	false	마지막 자식부터 실행합니다. 순서만 뒤집히고 각 자식은 그대로 재생됩니다
mode공통	'in' | 'out'	'in'	들어오는지 나가는지. out은 같은 애니메이션을 거꾸로 재생하고 그 자리에서 멈춥니다
duration공통	number	620	한 번 재생되는 시간(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	있는 자리에 붙들어 둡니다
side	'top' | 'right' | 'bottom' | 'left'	'left'	지우개가 지나오는 변. left면 왼쪽에서 오른쪽으로 드러납니다
from	number	1	닦이면서 함께 페이드할 시작 투명도. 1이면 순수한 wipe입니다
render	useRender.RenderProp	—	div 대신 다른 요소로 렌더링합니다 (render={<h2 />}). Base UI의 render prop 그대로
children	ReactNode	—	드러날 것

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

clip-path라서 래퍼도 overflow 상자도 없습니다. 요소는 늘 차지하던 자리를 그대로 차지하고, 주변은 첫 프레임부터 완성된 크기를 기준으로 배치됩니다. 그래서 제목, 구분선, 차트의 플롯 영역처럼 위치 자체가 정보인 것에 쓰기 좋습니다.

예시

side

지우개가 지나오는 변입니다. 기본값 left는 왼쪽에서 오른쪽으로 드러냅니다.

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

const SIDES = ['left', 'right', 'top', 'bottom'] as const;

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

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

      <div key={run} className="grid gap-3 sm:grid-cols-2">
        {SIDES.map((side, index) => (
          <AnimateReveal key={side} side={side} delay={index * 160} duration={800}>
            <Box variant="outline" size="sm">
              <Typography level="caption" color="secondary">
                side=&quot;{side}&quot;
              </Typography>
            </Box>
          </AnimateReveal>
        ))}
      </div>
    </div>
  );
}

from

닦이면서 함께 페이드할 시작 투명도입니다. 기본값 1은 순수한 wipe이고, 보통 이 효과를 고르는 이유가 그것입니다. 0을 주면 둘 다 합니다.

mode

mode="out"은 같은 가장자리를 거꾸로 돌려 그 자리에서 멈춥니다. 내용을 다시 덮습니다.

stagger

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

접근성

• 모션 감소 설정에서는 애니메이션이 꺼지고 내용이 통째로 그려집니다. 어차피 도달할 상태입니다.
• 내용은 처음부터 끝까지 문서에도 접근성 트리에도 있습니다. clip은 픽셀을 가리는 것이지 정보를 가리는 것이 아닙니다.