Nuxt+Vue.jsを使ってスクロールでアニメーションを実行するプログラムを作成しています。
const ti = gsap.timeline({ scrollTrigger: { markers: true, torigger: ".slide", start: () => (pageNo + 0.1) * innerHeight, end: () => (pageNo + 0.1) * innerHeight, } }) ti.to(".slide-layer-1", {scale: 1},"start") ti.to(".btob", {opacity: 1},"start") ti.to(".slide-layer-2", {scale: 1},"timing") ti.to(".slide-layer-3", {scale: 1},"timing") ti.to(".slide-layer-4", {scale: 1},"timing<0.5") ti.to(".slide-layer-5", {scale: 1},"1") ti.to(".slide-layer-5", {opacity: 0},"1.5") ti.to(".slide-layer-6", {scale: 1, opacity: 1},"end") ti.to(".scroll-nav", {opacity: 1},"end")
scrollTriggerで指定した要素がマウススクロールによってアニメーション開始位置に来たらアニメーションが終了するまでスクロール量の変化を無視させたいです。
scrollTriggerのドキュメントを読んでみましたが英語のため思ったような挙動になる方法が見つけられません。
if (ScrollTrigger.isScrolling()) { // do something if scrolling }
このようなプロパティを発見しましたが、どのように記述したら思った動作になるかご存知であれば教えて欲しいです。
よろしくお願いいたします。
あなたの回答
tips
プレビュー