最近積みそうになったのでメモ書き。
上記について調べると大体は下記のプロパティに対する解説が主な印象があります。
toggleActions
値形式：文字列
https://qiita.com/heeroo_ymsw/items/ae22e4cee8c6a08ff852#toggleactions
デフォルト値：play none none none
左から順番にonEnter、onLeave、onEnterBack、onLeaveBackの4つのトグル位置で、アニメーションをどのように制御するかを指定します。
使用できるキーワードは、再生：play、一時停止：pause、再開：resume、リセット：reset、初めから再生：restart、終了：complete、反転して再生：reverse、なし：noneです。
GSAPでは目標の高さにスクロール量が達した際にtoggleClassを利用することが多く、上記では一度きりの動作にすることが出来なかったが下記プロパティで行える事が分かった。
once
値形式：真偽値
https://qiita.com/heeroo_ymsw/items/ae22e4cee8c6a08ff852#oncetrueの場合、ScrollTriggerが終了位置に到達するとすぐにkill()(ScrollTriggerインスタンスをキル)を実行します。正方向へのスクロール時に一度だけアニメーションを実行し、リセットやリプレイをしないようにしたい場合に最適なプロパティです。toggleActionsは自動的にplay none none noneに設定されます。
ということで、割とよく使うコードを掲載して今回は以上となります。
1 2 3 4 5 6 7 8 9 10 11 12 13 | import { gsap } from "gsap"; import { ScrollTrigger } from 'gsap/ScrollTrigger' gsap.registerPlugin(ScrollTrigger); document.querySelectorAll(".className").forEach((el, index) => { ScrollTrigger.create({ trigger: el, id: index+1, start: 'top 50%', toggleClass: {targets: el, className: "is-active"}, once: true, }); }); |
