はじめに
前回の記事で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軸の順番が最優先になるのでどうにかして解決したいです。
簡単なので是非使ってみてください!!!