Scroll Typography Split

AI flows. Ideas connect.

Scroll
GSAP
Backgrounds

TYPOGRAPHY / SCROLL / MOTION

SCROLL CHANGES
THE WAY WE READ

IDEAS MOVE FORWARD

SCROLL TO MOVE

				
					<script>
document.addEventListener("DOMContentLoaded", function () {

    if (
        typeof gsap === "undefined" ||
        typeof ScrollTrigger === "undefined"
    ) {
        return;
    }

    gsap.registerPlugin(ScrollTrigger);


    gsap.utils
        .toArray(".scroll-type-split")
        .forEach(function(section) {

            const word1 = section.querySelector(".word-1");
            const word2 = section.querySelector(".word-2");
            const word3 = section.querySelector(".word-3");

            if (!word1 || !word2 || !word3) {
                return;
            }


            const tl = gsap.timeline({

                scrollTrigger: {
                    trigger: section,
                    start: "top top",
                    end: "bottom bottom",
                    scrub: 1.2
                }

            });


            /* SPLIT */

            tl.to(
                word1,
                {
                    x: "-28vw",
                    y: "-16vh",
                    rotation: -8,
                    ease: "none"
                },
                0
            );

            tl.to(
                word2,
                {
                    y: "24vh",
                    scale: .72,
                    ease: "none"
                },
                0
            );

            tl.to(
                word3,
                {
                    x: "28vw",
                    y: "-12vh",
                    rotation: 8,
                    ease: "none"
                },
                0
            );


            /* RETURN */

            tl.to(
                [word1, word2, word3],
                {
                    x: 0,
                    y: 0,
                    rotation: 0,
                    scale: 1,

                    ease: "power2.inOut"
                },
                .65
            );

        });

});
</script>

				
					/* =========================================================
   ZAKAI LAB
   05 / Scroll Typography Split
========================================================= */


/* MAIN DEMO */

.scroll-type-split {
    position: relative;
    width: 100%;
    height: 1050px;

    background: #0d0d0d;

    overflow: hidden;
}


/* =========================================================
   OPENING
========================================================= */

.scroll-type-split__opening {
    position: relative;

    width: 100%;
    height: 360px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    padding: 50px 24px 20px;

    text-align: center;

    z-index: 2;
}


.scroll-type-split__opening-label {
    display: block;

    margin: 0 0 22px;

    color: #DDA532 !important;

    font-family: monospace;
    font-size: 12px;
    line-height: 1.4;
    letter-spacing: .20em;

    text-align: center;
}


.scroll-type-split__opening-title {
    width: 100%;
    max-width: 760px;

    margin: 0 auto;

    color: #F7F3EC;

    font-size: clamp(38px, 5vw, 72px);
    font-weight: 400;
    line-height: 1.02;
    letter-spacing: -.035em;

    text-align: center;
}


.scroll-type-split__opening-line {
    width: 1px;
    height: 45px;

    margin: 28px auto 0;

    background: linear-gradient(
        to bottom,
        #DDA532,
        transparent
    );
}


/* =========================================================
   ANIMATION STAGE
========================================================= */

.scroll-type-split__stage {
    position: relative;

    width: 100%;
    height: 690px;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;
}


/* TYPOGRAPHY */

.scroll-type-split__text {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: .22em;

    white-space: nowrap;
}


/* WORDS */

.split-word {
    display: inline-block;

    color: #F7F3EC;

    font-family: Arial, sans-serif;
    font-size: clamp(60px, 9vw, 150px);
    font-weight: 600;

    line-height: .9;
    letter-spacing: -.055em;

    will-change: transform, opacity;
}


.word-2 {
    color: #DDA532;
}


/* CAPTION */

.scroll-type-split__caption {
    position: absolute;

    left: 50%;
    bottom: 40px;

    transform: translateX(-50%);

    color: rgba(247,243,236,.45);

    font-family: monospace;
    font-size: 11px;

    letter-spacing: .24em;

    white-space: nowrap;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .scroll-type-split {
        height: 820px;
    }

    .scroll-type-split__opening {
        height: 300px;
        padding: 40px 20px 15px;
    }

    .scroll-type-split__opening-title {
        font-size: clamp(34px, 10vw, 52px);
    }

    .scroll-type-split__stage {
        height: 520px;
    }

    .scroll-type-split__text {
        flex-direction: column;
        gap: .08em;
        white-space: normal;
    }

    .split-word {
        font-size: clamp(48px, 16vw, 82px);
        line-height: .92;
    }

    .scroll-type-split__caption {
        bottom: 28px;
        font-size: 9px;
    }
}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .split-word {
        transform: none !important;
        opacity: 1 !important;
    }

}

				
					<section class="scroll-type-split">

    <div class="scroll-type-split__opening">

        <span class="scroll-type-split__opening-label">
            TYPOGRAPHY / SCROLL / MOTION
        </span>

        <div class="scroll-type-split__opening-title">
            SCROLL CHANGES<br>
            THE WAY WE READ
        </div>

        <div class="scroll-type-split__opening-line"></div>

    </div>


    <div class="scroll-type-split__stage">

        <div class="scroll-type-split__text">
            <span class="split-word word-1">IDEAS</span>
            <span class="split-word word-2">MOVE</span>
            <span class="split-word word-3">FORWARD</span>
        </div>

        <div class="scroll-type-split__caption">
            SCROLL TO MOVE
        </div>

    </div>

</section>

מה אפשר לשנות.. ואיך ⚙️

EXPLORE / LEARN / REUSE / CREATE

.Costomize to fit your vision

טקסט

				
					את המילים שמשתתפות באנימציה משנים ישירות ב־HTML:

<span class="split-word word-1">IDEAS</span>
<span class="split-word word-2">MOVE</span>
<span class="split-word word-3">FORWARD</span>

לדוגמה:

<span class="split-word word-1">DESIGN</span>
<span class="split-word word-2">MEETS</span>
<span class="split-word word-3">MOTION</span>

חשוב להשאיר את המחלקות word-1, word-2, word-3, כי ה־JavaScript משתמש בהן להפעלת האנימציה.

כיוון הפיצול

				
					הכיוון נקבע ב־JavaScript באמצעות x ו־y.

המילה הראשונה:

x: "-28vw",
y: "-16vh",

המילה השלישית:

x: "28vw",
y: "-12vh",

x חיובי מזיז ימינה.
x שלילי מזיז שמאלה.
y חיובי מזיז למטה.
y שלילי מזיז למעלה.

לדוגמה, כדי להפוך את הכיוונים:

/* WORD 1 */
x: "28vw",
y: "16vh",

/* WORD 3 */
x: "-28vw",
y: "12vh",

מרחק התנועה

				
					אותם ערכי x ו־y קובעים גם כמה רחוק המילים יתפצלו.

כרגע:

x: "-28vw",
y: "-16vh",

לתנועה עדינה יותר:

x: "-15vw",
y: "-8vh",

לתנועה דרמטית יותר:

x: "-38vw",
y: "-22vh",

ככל שהערכים גדולים יותר בערך מוחלט, הפיצול רחב יותר.

סיבוב

				
					ב־JavaScript חפשו:

rotation: -8

ובמילה השלישית:

rotation: 8

לכמעט ללא סיבוב:

rotation: -3

לסיבוב מודגש יותר:

rotation: -15

אפשר גם לבטל לחלוטין:

rotation: 0

ערך חיובי מסובב לכיוון אחד ושלילי לכיוון ההפוך.

מהירות

				
					. מהירות

התגובה לגלילה נשלטת כאן:

scrub: 1.2

לתגובה מהירה וצמודה יותר לגלילה:

scrub: 0.6

לתנועה רכה ואיטית יותר:

scrub: 2

ערך נמוך יותר עוקב מהר יותר אחרי הגלילה. ערך גבוה יותר יוצר השהיה וריכוך.

גודל הטקסט

				
					ב־CSS חפשו:

.split-word {
    font-size: clamp(60px, 9vw, 150px);
}

שלושת הערכים הם:

clamp(מינימום, גודל רספונסיבי, מקסימום)

לדוגמה, טקסט קטן יותר:

font-size: clamp(48px, 7vw, 110px);

טקסט גדול ודרמטי יותר:

font-size: clamp(70px, 11vw, 180px);

במובייל קיימת הגדרה נפרדת:

.split-word {
    font-size: clamp(48px, 16vw, 82px);
}

לכן אפשר לכוון את המובייל בנפרד בלי להשפיע על הדסקטופ.

הערה חשובה 🚩

האנימציה מבוססת על GSAP + ScrollTrigger. יש לוודא ששתי הספריות נטענות באתר לפני קוד ה־JavaScript של האנימציה.