🐡
【GSAP】GSAP Practice【#15 GSAP ScrollTrigger3】
【#15 GSAP ScrollTrigger3】
YouTube: https://youtu.be/Rb4bhnOTx38
今回は複数の子要素をラップしている親要素にScrollTriggerを設定して、
複数の子要素に対してアニメーションを設定する方法について解説します。
具体的にはtimelineを使用して、
tinelineの引数のオブジェクトにScrollTriggerを設定します。
js/main.js
// use a script tag or an external JS file
document.addEventListener("DOMContentLoaded", (event) => {
gsap.registerPlugin(ScrollTrigger);
new App();
});
class App {
constructor() {
this._initialize();
this._renderLenis();
}
_initialize() {
this._createLenis();
this._sec1Anime();
this._sec2Anime();
this._sec3Anime();
}
_createLenis() {
this.lenis = new Lenis();
}
_renderLenis(time) {
this.lenis.raf(time);
requestAnimationFrame(this._renderLenis.bind(this));
}
_sec1Anime() {
const loadingEl = document.querySelector("#loading");
const loadingTexts = loadingEl.textContent.split("");
let innerText = "";
loadingTexts.forEach((text) => {
innerText += `<span>${text}</span>`;
});
// console.log(loadingTexts);
// console.log(innerText);
loadingEl.innerHTML = innerText;
const tl = gsap.timeline({ repeat: -1 });
tl.to("#loading span", {
duration: 1,
y: -50,
stagger: {
each: 0.2,
from: "left",
},
}).to("#loading span", {
duration: 1,
y: 0,
stagger: {
each: 0.2,
from: "left",
},
ease: "bounce.out",
});
}
_sec2Anime() {
const tl1 = gsap.timeline({
scrollTrigger: {
trigger: ".section-2",
scroller: "body",
markers: true,
start: "top center",
end: "bottom center",
scrub: true,
},
});
tl1.to(".box-1", {
x: 500,
borderRadius: "50%",
rotate: 1440,
});
tl1.to(".box-2", {
x: 500,
borderRadius: "50%",
rotate: 1440,
});
tl1.to(".box-3", {
x: 500,
borderRadius: "50%",
rotate: 1440,
});
}
_sec3Anime() {
const menuOpen = document.querySelector("#menu-open");
const menuClose = document.querySelector("#menu-close");
const menuBg = document.querySelector(".menu-bg");
const tl = gsap.timeline();
tl.to(".menu-wrapper", {
right: 0,
duration: 0.7,
ease: "power3.out",
});
tl.to(
".menu-bg",
{
right: 0,
duration: 0.7,
ease: "power3.out",
},
0.5
);
tl.from(
".menu-list",
{
x: 150,
opacity: 0,
dutarion: 0.2,
stagger: {
each: 0.2,
},
},
0.5
);
tl.pause();
menuOpen.addEventListener("click", () => {
tl.play();
});
menuClose.addEventListener("click", () => {
tl.reverse();
});
menuBg.addEventListener("click", () => {
tl.reverse();
});
}
}
Discussion