vue3 lottie-web

npm i lottie-web
https://www.npmjs.com/package/lottie-web

vue-lottie는 Composition API에 직접적인 지원을 제공하지 않는다라고 하여 lottie-web 사용
이 전에 vue-lottie를 적용해봤으나 optional api 사용 예제를 바꿔봐도 적용이 나는 안됐음

적용

<template>
  <div class="home">
    <div ref="lottieContainer"></div>
  </div>
</template>
  
<script setup>
import { onMounted, ref } from "vue";
import Lottie from "lottie-web";
import animationData from "@/assets/animation.json";

const lottieContainer = ref(null);
const anim = ref(null);

onMounted(() => {
  anim.value = Lottie.loadAnimation({
    container: lottieContainer.value,
    renderer: "svg",
    loop: true,
    autoplay: true,
    animationData: animationData,
  });
});
</script>
  
<style scoped>
.home {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
</style>
  

고정된 채 스크롤 시에만 움직일 때

리액트 ver 참고
https://codesandbox.io/s/lottie-scroll-animation-47xog?file=/src/App.tsx:815-863

<template>
  <div class="home">
    <div
      ref="lottieContainer"
      class="lottieContainer"
    ></div>
  </div>
</template>
  
<script setup>
import { onMounted, ref } from "vue";
import Lottie from "lottie-web";
import animationData from "@/assets/animation.json";

const lottieContainer = ref(null);
const anim = ref(null);
const animDuration = 10000;

const animatebodymovin = (duration) => {
  const scrollPosition = window.scrollY;
  const maxFrames = anim.value.totalFrames;

  const frame = (maxFrames / 100) * (scrollPosition / (duration / 400));
  console.log("------", maxFrames);
  anim.value.goToAndStop(frame, true);
};

const onScroll = () => {
  console.log("Scrolling");
  animatebodymovin(animDuration);
};

onMounted(() => {
  anim.value = Lottie.loadAnimation({
    container: lottieContainer.value,
    renderer: "svg",
    loop: false,
    autoplay: false,
    animationData: animationData,
  });

  document.addEventListener("scroll", onScroll);
});
</script>
  
<style scoped>
.home {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.lottieContainer {
  position: fixed;
}
</style>

vue3 @lottiefiles/lottie-interactivity

npm install --save @lottiefiles/lottie-interactivity
https://lottiefiles.com/interactivity

스크롤 시 움직이지만 고정 안됨

<template>
  <div class="home">
    <div class="home_page_lottie">
      <lottie-player
        id="firstLottie"
        ref="lottie"
        mode="normal"
        src="/public/animation.json"
      >
      </lottie-player>
    </div>
    <div class="home_page"></div>
  </div>
</template>  
<script setup>
import { onMounted, ref } from "vue";
import "@lottiefiles/lottie-player";
import { create } from "@lottiefiles/lottie-interactivity";

const lottie = ref(null);

onMounted(() => {
  lottie.value.addEventListener("load", function () {
    create({
      mode: "scroll",
      player: "#firstLottie",
      actions: [
        {
          visibility: [0, 1],
          type: "seek",
          frames: [0, 100],
        },
      ],
    });
  });
});
</script>
  
  <style scoped>
.home {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 200vh;
}

.home .home_page {
  height: 100vh;
  width: 100%;
}

.home .home_page_lottie {
  height: 100vh;
  width: 40%;
}
</style>