はじめに

前回の記事でtweenmax導入したのでアニメーション付けてみました。

コード

nuxt/ts tailwindを使っています。クラス名とかが適当なのともう少しでなくなるclassコンポーネント使っているのはお許しください。
ちょっと汚かったのでcss省略してます。

index.vue

<template>
//省略
　<div>
　　<p class='welcome'>Welcome</p>
　　<p class='to'>to</p>
　　<div class='flex flex-no-wrap'>
　　　<div v-for='(text, i) in texts' :key='i'>
　　　　<p class='text-xl　title'>{{ text }}</p>
　　　</div>
　　</div>
　</div>
</template>
<script lang='ts'>
import { Vue, Component } from 'vue-property-decorator';
import { gsap } from 'gsap'
@Component
export default class Index extends Vue {
  texts: string[] = [
    'K','I','S','S','E',' ', ' ','P','O','R','T','F','O','R','I','O'
  ]
  mounted() {
    gsap.fromTo('.welcome', { duration: 0.5, opacity: 0, y: 50 },{ delay: 1, opacity: 1, y: 150 })
    gsap.fromTo('.to', { duration: 0.5, opacity: 0, y: 300 }, { delay: 1.25,opacity: 1, y: 200 })
    gsap.to('.welcome', { duration: 0.5, delay: 2 , opacity: 0, y: 50})
    gsap.to('.to', { duration: 0.5, delay: 2.25 , opacity: 0, y: 250})
    document.querySelectorAll('.title').forEach((title, i) => {
      gsap.from(title, { duration:0.4, delay: 2.25 + i * 0.1, ease: 'power1.out', x: 50, y: -50, opacity: 0 })
    })
  }
}

vueがわからない人のために説明するとmouted()という関数がdomにマウントされたときに動きます。

index.vue

<div v-for='(text, i) in texts' :key='i'>
　<p class='text-xl　title'>{{ text }}</p>
</div>

この部分はtextsというdataを一つずつtextに入れていき
それを　{{}}　で囲まれた部分に入れています
つまり今回の場合

index.ts

texts: string[] = [
　'K','I','S','S','E',' ', ' ','P','O','R','T','F','O','R','I','O'
]

これが代入されるため

index.vue

<p class='text-xl　title'>K</p>

このようなのがdataの分だけ作られます。

結構ぐちゃぐちゃですがこんな感じです
書いていることとしてはそんなに複雑なことはしておらず
gsapのドキュメントをみたら意味は理解できると思います。
最後の部分ですがこのようにforEachを使って回すことによって順番にアニメーションをつけることができます。
timelineを使うことによってもっとまとめて書くこともできそうです。

問題点としてアニメーションをつけるとz軸の順番が最優先になるのでどうにかして解決したいです。

簡単なので是非使ってみてください！！！