テキストの回転(scrollTrigger)
HTML
<h2>NEWS</h2>
CSS
h2 span {
display: inline-block;
opacity: 0;
transform: rotate(90deg);
}
JS
let h2s = document.querySelectorAll("h2");
h2s.forEach((h2) => {
newText = "";
text = h2.innerHTML;
text.split('').forEach((char) => {
newText += '<span>' + char + '</span>';
});
h2.innerHTML = newText;
});
let targets = document.querySelectorAll("h2");
targets.forEach((target) => {
let spans = target.querySelectorAll("span");
gsap.to(spans, {
autoAlpha: 1,
duration: 0.5,
rotateY: '0deg',
stagger: { each: 0.1 },
scrollTrigger: {
trigger: target,
start: "bottom bottom",
}
});
});