lottieFiles

https://lottiefiles.com/interactivity

Lottie Player - Interactivity Guide

 

---

 

<div class="container c1">
    <lottie-player id="test" class="fingerprint" src="data/123.json"></lottie-player>
</div>

<script src="https://unpkg.com/@lottiefiles/lottie-interactivity@latest/dist/lottie-interactivity.min.js"></script>
<script src="https://unpkg.com/@lottiefiles/lottie-player@1/dist/lottie-player.js"></script>

 

스크롤 

LottieInteractivity.create({
    player: '#test',
    mode: 'scroll',
    actions: [
        {
            visibility:[0.2, 0.7], //컨테이너의 20% 일때 시작 70%일때 끝
            type: 'seek',
            frames: [0, 90],
        },
    ]
});

---

마우스오버

  LottieInteractivity.create({
    player: '#eleventhLottie',
    mode: 'cursor',
    actions: [
      {
          type: "hover",
          forceFlag: false
      }
    ]
  });

 

---

마우스오버 (마우스떼면 멈춤)

LottieInteractivity.create({
    player: '#test',
    mode: 'cursor',
    actions: [
      {
          position: { x: [0, 1], y: [0, 1] },
          type: "loop",
          frames: [1, 90]
      },
      {
          position: { x: -1, y: -1 },
          type: 'stop',
          frames: [0],
      }
    ]
});