vueuse 스크롤 애니메이션

yarn add @vueuse/motion
https://motion.vueuse.org/installation.html

main.js

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import { MotionPlugin } from '@vueuse/motion'

createApp(App).use(MotionPlugin).mount('#app')

Section2.vue

<template>
  <div class="section2">
    <h1
   	  v-motion
      :initial="{ opacity: 0, y: 100 }"
      :visibleOnce="{ opacity: 1, y: 0, scale: 1 }"
      :delay="200"
    >
      HELLO WORLD
    </h1>
  </div>
</template>

<style scoped>
.section2 {
  height: 100vh;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 100px;
}

.section2 h1 {
  font-size: 100px;
}
</style>

visibleOnce는 한 번만 모션 실행
visible로 하면 계속 실행됨

<template>
  <div class="section2">
    <ul>
      <li
        v-for="(item,index) in list"
        :key="item.color"
        v-motion
        :initial="{
          y: 100,
          opacity:0,
        }"
        :visible="{
          y: 0,
          opacity:1,
          transition: {
            delay: 100 * index,
          },
        }"
      >
        <div class="color" :style="{ background: `${item.color}` }"></div>
      </li>
    </ul>
  </div>
</template>

v-for은 delay에 index를 추가해주면 됨