Skip to content
SHINSEGAE V UI

LottieAnimation

Lottie 애니메이션 플레이어 컴포넌트입니다. Lottie Player 웹 컴포넌트를 사용합니다.

Astro

---
import LottieAnimation from "@shared/ui/lottie-animation/LottieAnimation.astro";
---


<LottieAnimation src="/path/to/animation.json" />
<LottieAnimation src="/path/to/animation.json" loop autoplay />
<LottieAnimation src="/path/to/animation.json" controls />

Props:

  • src: string: Lottie JSON 파일 경로 (필수)
  • autoplay?: boolean: 자동 재생 (default: true)
  • controls?: boolean: 컨트롤 표시 (default: false)
  • loop?: boolean: 반복 재생 (default: false)
  • mode?: string: 재생 모드 (default: "normal")

Code

<script type="module">
  if (!window.customElements.get("lottie-player")) {
    import("/ui/lib/lottie/lottie-player.js");
  }
</script>


<lottie-player
  class="v-lottie-player"
  src="/path/to/animation.json"
  autoplay
  loop
></lottie-player>

참고