【Vue.js】GSAPのScrollTriggerの使い方

2021年5月27日Vue.js

Vue.jsでのGSAPのScrollTriggerの使い方をまとめました。

GSAPのScrollTriggerの使い方

transitionコンポーネントの設定

<transition 
	appear
	@before-enter="beforeEnter"
	@enter="enter"
	@after-enter="afterEnter"
>
　<div>
　　ここに内容
　</div>
</transition>

まずはtransitionコンポーネントを使って、JavaScriptフックを設定します。

gsap/ScrollTriggerのインポート

import gsap from 'gsap'
import { ScrollTrigger } from "gsap/ScrollTrigger";

gsapだけでなく、ScrollTriggerもインポートします。

ScrollTriggerをプラグイン登録

gsap.registerPlugin(ScrollTrigger)

gsap.registerPlugin()メソッドを使ってScrollTriggerを登録します。

これでScrollTriggerをプラグインとして使うことができます。

ScrollTriggerを使う

const enter = (el, done) => {
	gsap.to(el, {
		scrollTrigger: {
			trigger: el,
			toggleActions: 'restart none none none'
		},
		duration: 3,
		y: 0,
		opacity: 1,
		ease: 'expo.out',
		onComplete: done
	})
}

上のようにしてscrollTriggerを設定します。
triggerでどこに交差したらtransitionを発火させるかを決めることができます。

toggleActionsでは、いろいろ設定できますが、最初のものをrestartにすると、交差するたびに発火させることができます。

restartのとなりのnoneをpauseに変更して、速くスクロールすると、アニメーションが止まった状態になります。
そのとなりのnoneをresumeに変更すると、再び要素に交差したときにアニメーションを再開させることができます。

toggleActionsは下の項目から選択できます。

• play
• pause
• resume
• reverse
• reset
• complete
• none
• から選択できます。

詳しくは公式サイトにて確認できます。

また、YouTubeの公式チャンネルでもわかりやすく説明されています。