テキストの回転(scrollTrigger)

Javascript

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",
        }
    });
});
BACK