Scroll Image Reveal

AI flows. Ideas connect.

Scroll
GSAP
Backgrounds

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

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

    gsap.registerPlugin(ScrollTrigger);

    gsap.utils
        .toArray(".scroll-curtain-reveal")
        .forEach(function(section) {

            const frame = section.querySelector(
                ".scroll-curtain-reveal__frame"
            );

            if (!frame) {
                return;
            }

            gsap.fromTo(
                frame,

                {
                    clipPath:
                        "inset(0% 96% 0% 0% round 24px)"
                },

                {
                    clipPath:
                        "inset(0% 0% 0% 0% round 24px)",

                    ease: "none",

                    scrollTrigger: {
                        trigger: section,
                        start: "top 80%",
                        end: "bottom 35%",
                        scrub: 1.2
                    }
                }
            );

        });

});
</script>

				
					.lab-code-widget pre {
    height: 360px;
    max-height: 360px !important;

    overflow-y: auto !important;
    overflow-x: auto !important;

    color: #F7F3EC !important;
}

.lab-code-widget pre code {
    color: #F7F3EC !important;
   
}
.lab-code-widget pre code .token {
    color: #F7F3EC !important;
}
/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .scroll-curtain-reveal {
        height: 78vh;
        min-height: 520px;
    }

    .scroll-curtain-reveal__frame {
        width: 90%;
        height: 60vh;

        border-radius: 18px;

        clip-path: inset(
            0 94% 0 0
            round 18px
        );
    }

}

				
					<section class="scroll-curtain-reveal">

    <div class="scroll-curtain-reveal__frame">

        <img decoding="async"
            class="scroll-curtain-reveal__image"
            src="https://www.zakai.com/wp-content/uploads/2026/09/טופ.jpg"
            alt=""
        >

    </div>

</section>

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

EXPLORE / LEARN / REUSE / CREATE

.Costomize to fit your vision

כיוון הפתיחה

				
					הכיוון נקבע ב־clip-path.

כרגע הווילון נפתח משמאל לימין:

clip-path: inset(0 96% 0 0);

כדי לפתוח מימין לשמאל:

clip-path: inset(0 0 0 96%);

צריך לשנות את אותו כיוון גם בערך ההתחלתי ב־JavaScript:

clipPath: "inset(0% 0% 0% 96% round 24px)"

חשיפה התחלתית

				
					חשיפה התחלתית

ב־JavaScript חפשו:

clipPath: "inset(0% 96% 0% 0% round 24px)"

המספר 96% קובע כמה מהתמונה מוסתר בתחילת האנימציה.

לדוגמה:

98% = גלויים 2%
96% = גלויים 4%
90% = גלויים 10%

ככל שהמספר גבוה יותר, פחות מהתמונה גלוי בהתחלה.

מהירות

				
					ב־ScrollTrigger חפשו:

scrub: 1.2

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

scrub: 0.6

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

scrub: 2

ערך נמוך יותר מגיב מהר יותר לגלילה. ערך גבוה יותר מוסיף השהיה וריכוך.

גודל התמונה

				
					ב־CSS חפשו:

.scroll-curtain-reveal__frame {
    width: min(1200px, 90%);
    height: min(680px, 78vh);
}

לדוגמה, לתמונה גדולה יותר:

width: min(1400px, 94%);
height: min(760px, 82vh);

width שולט ברוחב הסופי ו־height בגובה הסופי.

פינות

				
					ב־CSS חפשו:

border-radius: 24px;

וב־JavaScript:

round 24px

למראה כמעט מרובע:

border-radius: 6px;

למראה רך ומעוגל יותר:

border-radius: 40px;

חשוב: השתמשו באותו ערך גם ב־CSS וגם ב־round שב־JavaScript.

טווח הגלילה

				
					טווח הגלילה

ב־ScrollTrigger חפשו:

start: "top 80%",
end: "bottom 35%",

start קובע מתי פתיחת הווילון מתחילה.

end קובע מתי התמונה מגיעה לחשיפה מלאה.

לדוגמה, כדי לפרוס את האנימציה על גלילה ארוכה יותר:

start: "top 90%",
end: "bottom 20%",

וכדי לרכז אותה בטווח קצר יותר:

start: "top 70%",
end: "bottom 50%",

כך יש לנו בדיוק את המבנה שרצינו: 6 שינויים שימושיים, והמובייל נמצא בתוך ה־Style ולא כאקורדיון מלאכותי.

הערה חשובה 🚩

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