Custom SplitText

Getting Started with SplitText

const items = document.querySelectorAll(".split-text");
items.forEach(function (item, index) {	
//	console.log(item);

    var splittext_words = $(item).find('.w-text-value').text().split(" ");  // split("") 한단어씩
    $(item).find('.w-text-value').empty();
    $.each(splittext_words, function(i, v) {
        $(item).find('.w-text-value').append($('<span class="splitword">').text(v));
    });
    
    $(item).find('.splitword').html(function(i, html) {
        return html.replace(/\S/g, '<span class="splittext">$&</span>');
    });		

    const animation = gsap.timeline({repeat:-1, yoyo:true, repeatDelay:0.3});	
    gsap.set(item, {autoAlpha:1});
    animation.from(item.querySelectorAll('.splittext'), {opacity:0, y:50, ease:"back(4)", stagger:0.05});
});

※ SplitText plugin(유료)를 쓰면 훨씬 간단해짐

unpkg 플러그인을 이용해서 글자, 단어, 라인을 분리하는 방법도 있음

Getting Started with SplitText

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vestibulum, quam vitae fermentum vehicula, arcu diam volutpat libero, ut viverra lacus libero dapibus lorem. Sed odio elit, lobortis vitae posuere sed, blandit et nisi. Curabitur massa elit, aliquet sit amet est luctus, volutpat egestas lacus. In hac habitasse platea dictumst.

const targets1 = gsap.utils.toArray(".unpkg-text.split-char");
targets1.forEach((target) => {
    let SplitClient = new SplitType(target, { type: "lines, words, chars" });
    let chars = SplitClient.chars;    
    gsap.from(chars, {
        yPercent: 100,
        opacity: 0,
        duration: 1,
        ease: "circ.out",
        stagger: {
            amount: 1,
            from: "random"
        },
        scrollTrigger: {
            trigger: target,
            start: "top bottom",
            end: "+=400",
        //    markers: true,
        }, 
        yoyo: true,
        repeat: -1
    });
});


const targets2 = gsap.utils.toArray(".unpkg-text.split-word");
targets2.forEach((target) => {
    let SplitClient = new SplitType(target, { type: "lines, words, chars" });
    let words = SplitClient.words;    
    gsap.from(words, {
        rotation: -20,
        opacity: 0,
        duration: 1,
        ease: "back",
        stagger: {
            amount: 1,
            from: "random"
        },
        scrollTrigger: {
            trigger: target,
            start: "top bottom",
            end: "+=400",
        //    markers: true,
        }, 
        yoyo: true,
        repeat: -1
    });
});

const targets3 = gsap.utils.toArray(".unpkg-text.split-line p");
targets3.forEach((target) => {
    let SplitClient = new SplitType(target, { type: "lines, words, chars" });
    let lines = SplitClient.lines;    
    gsap.from(lines, {
        rotationX: -90,
        rotationY: -10,
        opacity: 0,
        stagger: 0.3,
        transformOrigin: "50% 50% -200",
        scrollTrigger: {
            trigger: target,
            start: "top bottom",
            end: "+=400",
        //    markers: true,
        }, 
        yoyo: true,
        repeat: -1
    });
});

RANDOM COLORS