→ ZAKAI.COM 

ZAKAI LAB
ANIMATION LIBRARY

IDEAS
DESIGN
TECHNOLOGY
PEOPLE

MOTION
FOR A
BRIGHTER WEB

06

Animated Process Timeline

AI flows. Ideas connect.
Scroll
GSAP
Backgrounds
SCROLL ANIMATION 06

תהליך שמתגלה עם הגלילה

המשיכי לגלול

01

הבנת הצרכים

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

02

בניית הכיוון

מחברים בין התוכן, המבנה והרעיון לכיוון ברור.

03

עיצוב וחוויה

הופכים את הרעיון לחוויה ויזואלית מדויקת וברורה.

04

השקה ובדיקה

בדיקות אחרונות, התאמות ועלייה מסודרת לאוויר.

JS / GSAP 
				
					(function initLioraScroll06() {

    /* Wait until GSAP + ScrollTrigger are available */
    if (
        typeof window.gsap === "undefined" ||
        typeof window.ScrollTrigger === "undefined"
    ) {
        setTimeout(initLioraScroll06, 100);
        return;
    }

    gsap.registerPlugin(ScrollTrigger);


    const sections =
        document.querySelectorAll(".liora-scroll-06");


    if (!sections.length) return;


    sections.forEach((section) => {

        /* Prevent duplicate initialization */
        if (section.dataset.liora06Ready === "true") {
            return;
        }

        section.dataset.liora06Ready = "true";


        const stage =
            section.querySelector(".liora-scroll-06__stage");

        const path =
            section.querySelector(".liora-scroll-06__path-progress");

        const steps =
            gsap.utils.toArray(
                section.querySelectorAll(".liora-scroll-06__step")
            );


        if (!stage || !path || !steps.length) {
            return;
        }


        /* =====================================
           DRAW MAIN LINE
           ===================================== */

        const pathLength = path.getTotalLength();


        gsap.set(path, {
            strokeDasharray: pathLength,
            strokeDashoffset: pathLength
        });


        gsap.to(path, {

            strokeDashoffset: 0,

            ease: "none",

            scrollTrigger: {

                trigger: stage,

                start: "top 65%",

                end: "bottom 55%",

                scrub: 1
            }

        });


        /* =====================================
           STEP ANIMATIONS
           ===================================== */

        steps.forEach((step) => {

            const dot =
                step.querySelector(".liora-scroll-06__dot");

            const connector =
                step.querySelector(".liora-scroll-06__connector");

            const card =
                step.querySelector(".liora-scroll-06__card");


            if (!dot || !connector || !card) {
                return;
            }


            /* INITIAL STATES */

            gsap.set(dot, {
                scale: .65
            });


            gsap.set(connector, {
                scaleX: 0
            });


            gsap.set(card, {
                opacity: 0,
                y: 25,
                scale: .96
            });


            /* STEP TIMELINE */

            const tl = gsap.timeline({

                paused: true,

                defaults: {
                    ease: "power3.out"
                }

            });


            /* DOT */

            tl.to(dot, {
                scale: 1,
                duration: .3
            });


            /* CONNECTOR */

            tl.to(
                connector,
                {
                    scaleX: 1,
                    duration: .4
                },
                "-=.08"
            );


            /* CARD */

            tl.to(
                card,
                {
                    opacity: 1,
                    y: 0,
                    scale: 1,
                    duration: .55
                },
                "-=.18"
            );


            /* =================================
               SCROLL ACTIVATION
               ================================= */

            ScrollTrigger.create({

                trigger: step,

                /* Lower value = later activation */
                start: "top 58%",

                onEnter: () => {

                    step.classList.add("is-active");

                    tl.play();

                },

                onLeaveBack: () => {

                    step.classList.remove("is-active");

                    tl.reverse();

                }

            });

        });


        /* Elementor / font / layout refresh */

        setTimeout(() => {

            ScrollTrigger.refresh();

        }, 300);

    });

})();
CSS 
				
					/* =========================================================
   LIORA MOTION LIBRARY
   06 - SCROLL PROCESS TIMELINE
   ========================================================= */

.liora-scroll-06 {
  --bg: #080808;
  --text: #f6f2ea;
  --muted: #b9b2a8;

  --gold: #ffd45a;
  --orange: #ff9620;
  --deep-orange: #ff5c22;

  position: relative;
  overflow: hidden;

  padding: 110px 30px 160px;

  color: var(--text);

  background:
    radial-gradient(
      circle at 50% 40%,
      rgba(255, 110, 20, .10),
      transparent 40%
    ),
    var(--bg);
}


/* =========================================================
   HEADER
   ========================================================= */

.liora-scroll-06__header {
  position: relative;
  z-index: 5;

  max-width: 900px;

  margin: 0 auto 70px;

  text-align: center;

  opacity: 1 !important;
}


.liora-scroll-06__eyebrow {
  display: block;

  margin-bottom: 14px;

  color: #ffb52e !important;
  opacity: 1 !important;

  font-size: 12px;
  font-weight: 700;

  letter-spacing: .18em;
}


.liora-scroll-06__header h2 {
  margin: 0;

  color: #ffffff !important;
  opacity: 1 !important;

  -webkit-text-fill-color: #ffffff !important;

  font-size: clamp(36px, 5vw, 68px);
  font-weight: 500;

  line-height: 1.05;
}


.liora-scroll-06__header p {
  margin: 20px 0 0;

  color: #d8d2c8 !important;
  opacity: 1 !important;

  -webkit-text-fill-color: #d8d2c8 !important;

  font-size: 15px;
}


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

.liora-scroll-06__stage {
  position: relative;

  width: min(1100px, 100%);
  height: 1250px;

  margin: 0 auto;
}


/* =========================================================
   SVG TRACK
   ========================================================= */

.liora-scroll-06__svg {
  position: absolute;

  inset: 0;

  width: 100%;
  height: 100%;

  overflow: visible;

  pointer-events: none;
}


.liora-scroll-06__path-base {
  fill: none;

  stroke: rgba(255,255,255,.10);
  stroke-width: 3;

  vector-effect: non-scaling-stroke;
}


.liora-scroll-06__path-progress {
  fill: none;

  stroke: url(#liora06Gradient);
  stroke-width: 4;

  stroke-linecap: round;

  vector-effect: non-scaling-stroke;

  filter: url(#liora06Glow);
}


/* =========================================================
   STEPS
   ========================================================= */

.liora-scroll-06__step {
  position: absolute;

  width: 100%;
  height: 1px;

  z-index: 4;
}


.step-01 {
  top: 190px;
}

.step-02 {
  top: 460px;
}

.step-03 {
  top: 730px;
}

.step-04 {
  top: 1000px;
}


/* =========================================================
   DOTS
   ========================================================= */

.liora-scroll-06__dot {
  position: absolute;

  width: 17px;
  height: 17px;

  border-radius: 50%;

  background: #292015;

  border: 2px solid rgba(255,180,40,.25);

  opacity: .45;

  transform:
    translate(-50%, -50%)
    scale(.65);

  transition:
    background .3s ease,
    border-color .3s ease,
    box-shadow .3s ease;
}


.step-01 .liora-scroll-06__dot {
  left: 71%;
}

.step-02 .liora-scroll-06__dot {
  left: 58%;
}

.step-03 .liora-scroll-06__dot {
  left: 44.5%;
}

.step-04 .liora-scroll-06__dot {
  left: 31%;
}


/* ACTIVE DOT */

.liora-scroll-06__step.is-active
.liora-scroll-06__dot {

  background: var(--gold);

  border-color: #ffe89b;

  opacity: 1;

  box-shadow:
    0 0 0 7px rgba(255,190,40,.10),
    0 0 15px rgba(255,190,40,.90),
    0 0 38px rgba(255,90,20,.50);
}


/* =========================================================
   CONNECTORS
   ========================================================= */

.liora-scroll-06__connector {
  position: absolute;

  top: 0;

  width: 125px;
  height: 1px;

  background:
    linear-gradient(
      90deg,
      rgba(255,100,20,.15),
      rgba(255,185,40,.80)
    );

  transform: scaleX(0);
}


.step-01 .liora-scroll-06__connector {
  left: 71%;
  transform-origin: left center;
}


.step-02 .liora-scroll-06__connector {
  right: 42%;
  transform-origin: right center;
}


.step-03 .liora-scroll-06__connector {
  left: 44.5%;
  transform-origin: left center;
}


.step-04 .liora-scroll-06__connector {
  right: 69%;
  transform-origin: right center;
}


/* =========================================================
   CARDS
   ========================================================= */

.liora-scroll-06__card {
  position: absolute;

  top: -82px;

  width: 320px;
  min-height: 165px;

  padding: 28px 30px;

  border:
    1px solid rgba(255,155,30,.30);

  border-radius: 18px;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.055),
      rgba(255,255,255,.015)
    );

  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);

  opacity: 0;

  transform:
    translateY(25px)
    scale(.96);

  box-shadow:
    inset 0 0 25px
    rgba(255,120,20,.025);
}


/* CARD POSITIONS */

.step-01 .liora-scroll-06__card {
  left: calc(71% + 145px);
}

.step-02 .liora-scroll-06__card {
  right: calc(42% + 145px);
}

.step-03 .liora-scroll-06__card {
  left: calc(44.5% + 145px);
}

.step-04 .liora-scroll-06__card {
  right: calc(69% + 145px);
}


/* =========================================================
   CARD CONTENT
   ========================================================= */

.liora-scroll-06__card span {
  display: block;

  margin-bottom: 12px;

  color: var(--orange) !important;
  opacity: 1 !important;

  font-size: 13px;
  font-weight: 700;

  letter-spacing: .08em;
}


.liora-scroll-06__card h3 {
  margin: 0 0 12px;

  color: #ffffff !important;
  opacity: 1 !important;

  font-size: 23px;
  font-weight: 500;

  line-height: 1.2;
}


.liora-scroll-06__card p {
  margin: 0;

  color: var(--muted) !important;
  opacity: 1 !important;

  font-size: 15px;

  line-height: 1.7;
}


/* ACTIVE CARD */

.liora-scroll-06__step.is-active
.liora-scroll-06__card {

  opacity: 1 !important;

  border-color:
    rgba(255,170,35,.70);

  background:
    linear-gradient(
      145deg,
      rgba(47,31,18,.96),
      rgba(17,14,12,.96)
    );

  box-shadow:
    0 0 28px rgba(255,120,20,.14),
    0 0 65px rgba(255,90,20,.06),
    inset 0 0 30px rgba(255,140,20,.04);
}


.liora-scroll-06__step.is-active
.liora-scroll-06__card span {
  color: #ffb52e !important;
}


.liora-scroll-06__step.is-active
.liora-scroll-06__card h3 {
  color: #ffffff !important;
}


.liora-scroll-06__step.is-active
.liora-scroll-06__card p {
  color: #d8d2c8 !important;
}


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

@media (max-width: 767px) {

  .liora-scroll-06 {
    padding: 80px 22px 100px;
  }


  .liora-scroll-06__header {
    margin-bottom: 70px;
  }


  .liora-scroll-06__stage {
    height: auto;

    padding-right: 45px;
  }


  .liora-scroll-06__svg {
    right: 10px;
    left: auto;

    width: 3px;
  }


  .liora-scroll-06__svg path {
    display: none;
  }


  .liora-scroll-06__stage::before {
    content: "";

    position: absolute;

    top: 0;
    right: 16px;

    width: 2px;
    height: 100%;

    background:
      rgba(255,255,255,.10);
  }


  .liora-scroll-06__step {
    position: relative;

    top: auto;

    height: auto;
    min-height: 240px;
  }


  .liora-scroll-06__dot,
  .step-01 .liora-scroll-06__dot,
  .step-02 .liora-scroll-06__dot,
  .step-03 .liora-scroll-06__dot,
  .step-04 .liora-scroll-06__dot {

    top: 20px;
    right: auto;
    left: auto;

    margin: 0;

    transform:
      translate(0,-50%)
      scale(.65);
  }


  .liora-scroll-06__connector {
    display: none;
  }


  .liora-scroll-06__card,
  .step-01 .liora-scroll-06__card,
  .step-02 .liora-scroll-06__card,
  .step-03 .liora-scroll-06__card,
  .step-04 .liora-scroll-06__card {

    position: relative;

    top: 0;
    right: auto;
    left: auto;

    width: 100%;
  }

}
HTM 
				
					<section class="liora-scroll-06" dir="rtl">

  <div class="liora-scroll-06__header">
    <span class="liora-scroll-06__eyebrow">SCROLL ANIMATION 06</span>
    <h2>תהליך שמתגלה עם הגלילה</h2>
    <p>המשיכי לגלול</p>
  </div>

  <div class="liora-scroll-06__stage">

    <!-- SVG TRACK -->
    <svg
      class="liora-scroll-06__svg"
      viewBox="0 0 1000 1200"
      preserveAspectRatio="none"
      aria-hidden="true"
    >

      <defs>

        <linearGradient
          id="liora06Gradient"
          x1="0"
          y1="0"
          x2="0"
          y2="1"
        >
          <stop offset="0%" stop-color="#ffd45a"/>
          <stop offset="48%" stop-color="#ff9d20"/>
          <stop offset="100%" stop-color="#ff5c22"/>
        </linearGradient>

        <filter id="liora06Glow">
          <feGaussianBlur stdDeviation="5" result="blur"/>
          <feMerge>
            <feMergeNode in="blur"/>
            <feMergeNode in="SourceGraphic"/>
          </feMerge>
        </filter>

      </defs>

      <!-- BASE LINE -->
      <path
        class="liora-scroll-06__path-base"
        d="M 780 40 L 220 1160"
      />

      <!-- ACTIVE LINE -->
      <path
        class="liora-scroll-06__path-progress"
        d="M 780 40 L 220 1160"
      />

    </svg>


    <!-- STEP 01 -->
    <div class="liora-scroll-06__step step-01" data-step="1">

      <div class="liora-scroll-06__dot"></div>
      <div class="liora-scroll-06__connector"></div>

      <div class="liora-scroll-06__card">
        <span>01</span>
        <h3>הבנת הצרכים</h3>
        <p>
          מתחילים בהגדרת המטרה, הקהל
          והצרכים של הפרויקט.
        </p>
      </div>

    </div>


    <!-- STEP 02 -->
    <div class="liora-scroll-06__step step-02" data-step="2">

      <div class="liora-scroll-06__dot"></div>
      <div class="liora-scroll-06__connector"></div>

      <div class="liora-scroll-06__card">
        <span>02</span>
        <h3>בניית הכיוון</h3>
        <p>
          מחברים בין התוכן, המבנה
          והרעיון לכיוון ברור.
        </p>
      </div>

    </div>


    <!-- STEP 03 -->
    <div class="liora-scroll-06__step step-03" data-step="3">

      <div class="liora-scroll-06__dot"></div>
      <div class="liora-scroll-06__connector"></div>

      <div class="liora-scroll-06__card">
        <span>03</span>
        <h3>עיצוב וחוויה</h3>
        <p>
          הופכים את הרעיון לחוויה
          ויזואלית מדויקת וברורה.
        </p>
      </div>

    </div>


    <!-- STEP 04 -->
    <div class="liora-scroll-06__step step-04" data-step="4">

      <div class="liora-scroll-06__dot"></div>
      <div class="liora-scroll-06__connector"></div>

      <div class="liora-scroll-06__card">
        <span>04</span>
        <h3>השקה ובדיקה</h3>
        <p>
          בדיקות אחרונות, התאמות
          ועלייה מסודרת לאוויר.
        </p>
      </div>

    </div>

  </div>

</section>

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

EXPLORE / LEARN / REUSE / CREATE

.Costomize to fit your vision

צבעי הרכיב – נמצאים בתחילת ה-CSS:

–bg: #080808;
–text: #f6f2ea;
–muted: #b9b2a8;

–gold: #ffd45a;
–orange: #ff9620;
–deep-orange: #ff5c22;

צבעי הקו המדורג – נמצאים דווקא ב-HTML בתוך ה-SVG:

<stop offset="0%" stop-color="#ffd45a"/>
<stop offset="48%" stop-color="#ff9d20"/>
<stop offset="100%" stop-color="#ff5c22"/>

אלה שולטים במעבר הצבע לאורך המסלול.

עוצמת הזוהר – ב-HTML:

<feGaussianBlur stdDeviation="5"

ערך קטן יותר, למשל 3, ייתן Glow עדין יותר. ערך גדול יותר יגדיל את הזוהר.

עובי הקו הפעיל:

stroke-width: 4;

גודל הנקודות:

width: 17px;
height: 17px;

גודל הכרטיסים:

width: 320px;
min-height: 165px;
padding: 28px 30px;

המרחק בין התחנות נשלט כאן:

.step-01 { top: 190px; }
.step-02 { top: 460px; }
.step-03 { top: 730px; }
.step-04 { top: 1000px; }

מיקום התחנות על האלכסון:

start: "top 58%"

את אלה לא הייתי משנה סתם, כי הם מותאמים למסלול ה-SVG.

מועד פתיחת הכרטיסים בגלילה נמצא ב-JS:

start: "top 58%"

מספר קטן יותר גורם לכרטיס להיפתח מאוחר יותר. למשל:

start: "top 52%"

מספר גדול יותר יפעיל אותו מוקדם יותר.

מהירות פתיחת הכרטיס:

duration: .55

מהירות פתיחת קו החיבור:

duration: .4

מהירות הדלקת הנקודה:

duration: .3

מהירות התגובה של הקו לגלילה:

scrub: 1

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

הערה חשובה  🚩  

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

טקסטים ותוכן – משנים ישירות ב-HTML. אפשר להחליף את הכותרת הראשית, טקסט ההנחיה, מספרי השלבים, כותרות הכרטיסים והתיאורים. אפשר גם להשתמש בתוכן אחר לגמרי, למשל תהליך עבודה, מסלול שירות, Timeline, שלבי רכישה או Case Study.

 

<script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/ScrollTrigger.min.js"></script>

מתלבט? בוא/י לדבר איתי בווטסאפ?