דילוג לתוכן הראשי
Overview|Storytelling|Entrances|Depth on Scroll|WOW|Section Transitions|Page Transitions|Loaders|Mouse & Hover|Infrastructure|How it works
Scroll animations

GSAP

תיקיית האנימציה של הפרויקט.gsap.com

סקילים:
uk-gsap
scroll-chain
בדיקות:
npm run dead-spots

🎬 Storytelling

CONCEPT

how they join

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

Entrances

6

scroll into view

נגיעה: משהו מופיע כשמגיעים אליו. 💥 OV 1

  • trigger_box
  • ClipReveal
  • split
  • split_chars
  • counter
  • slot_counter

Depth on Scroll

9

while scrolling

עומק: דברים שזזים עם הגלילה. 💥 OV 2-4

  • ParallaxImage
  • data-movement
  • data-movement-track
  • data-shade-overlay
  • data-scale
  • ScrollingText
  • UkCircleText
  • UkTracker
  • Lottie_Scroll

🍧 WOW

16

the page's one wow

ה-WOW של הדף, אחד לדף. 💥 OV 4-8

  • Before / After (horizontal wipe)
  • Panel Scroll + Scroll Timer
  • Mask Section
  • Panel Stack
  • Stack Cards
  • Scroll Text Swap
  • Chapters
  • Sticky Scenes
  • Shape Reveal
  • Zoom-Out 9-Photo Grid
  • Grid Assemble
  • Puzzle on Scroll
  • Vertical Flow
  • Parallax Mojito
  • Fit to Target
  • Morph

Section Transitions

8

between two parts

המעבר בין שני סקשנים. 💥 OV 2-4

  • Cover Hero
  • Push Under
  • Shape World
  • סקשן שנפתח כמו עין
  • Uncover
  • Colour Shift
  • Shader Cross
  • Section Clip

Page Transitions

4

between pages, opt-in

מעבר בין דפים. רק דמו שמבקש. 💥 OV 2-4

  • Curtain
  • Wipe
  • Fade
  • Expand
  • a demo's own

Loaders

10

on arrival

מסך בכניסה לאתר. 💥 OV 2-4

  • LoaderSplit
  • LoaderFill
  • LoaderCount
  • LoaderFlash
  • LoaderBar
  • LoaderDawn
  • LoaderFrame
  • exit="shader"
  • Your own
  • בדמואים

Mouse & Hover

4

desktop, with a mouse

מגיב לעכבר. לא בטלפון. 💥 OV 1-2

  • UkCursorFollow
  • UkHoverReveal
  • mouse_move_on_element
  • Lottie_Mouse

Infrastructure

3

not a design choice

מה ששומר על הדף נקי ועובד. 💥 OV 0

  • on_load
  • video_autoplay
  • GSAP on Mobile: Known Issues

💥 אינדקס OV

OV (overload): דף צריך איזון, ולאפקטים יש מדרג. 0 הוא בלי אנימציה בכלל, גלילה רגילה. split text הוא OV נמוך, ו-Before / After הוא OV גבוה. הציון מצטבר: ה-OV של סקשן נמדד לפי כל האפקטים שמופיעים יחד באותו FOLD. ויש עוד מדד פשוט שלא נבנה: OPC, הממוצע של ה-OV על כל הסקשנים בדף, או על כל האתר. מספר אחד שאומר כמה הדף עמוס.

תבנית העיצוב המלאה ב-How it works
  • Scroll into view: רץ פעם אחת כשהאלמנט נכנס למסך. While scrolling: צמוד לגלילה כל הדרך, וחוזר אחורה כשגוללים אחורה (השמות של Webflow; ב-GSAP: once מול scrub).
  • אטריביוט: שמים על markup שכבר קיים, לא בונים כלום. קומפוננטה: דורשת מבנה משלה (markup ותוכן בצורה שהיא מצפה לה). זה כל ההבדל.
  • sticky-based: מחזיק את הסקשן ב-position: sticky בזמן שהוא רץ, ומוסיף אורך גלילה.

איך לבחור

  • ✓ בלוק שנכנס בסקרול → Trigger Box. attribute אחד, סיים.
  • ✓ תמונה שנכנסת → Clip Reveal. תמונה שזזה בתוך המסגרת → Parallax Image. לא שניהם על אותה תמונה.
  • ✓ אפקט "wow" שיתפוס section שלם → WOW: Panel Stack, Mask Section, Stack Cards, Morph, Puzzle ועוד. אחד לדף, כל אחד לתוכן מסוים.
  • ✓ מעבר מעניין בין שני סקשנים → Section Transitions: Cover Hero, Push Under. ניטרליים, יכולים לחזור באותו דף.
  • ✓ מעבר בין דפים (פורטפוליו, סוכנות) → Page Transitions. וילון שעולה עם שם הדף, רק בדמו שמבקש.
  • ✓ אנימציית מספרים → Slot Counter או Count Up.
  • ✓ טקסט שנכנס מילה-מילה או אות-אות → Split Text.
  • ✓ טקסט שיוצא מטשטוש בגלילה → Text Blur.
  • ✓ פריטים שזזים עם העכבר ומרחפים → Mouse Move.
  • ✓ תג טקסט עגול שמסתובב בגלילה → Circle Text.
  • ✓ רשימת שירותים בבלוקים גבוהים שמתכווצים ביציאה → Vertical Flow.
  • ✓ וידאו שמתנגן רק כשרואים אותו → Video Autoplay.

שיטות עזר לאפקטים

data-from

מנוע תזמון על האלמנט עצמו. המנגנון ודוגמה חיה: How it works.

Blend mode mask

תמונה, ומעליה שכבה לבנה עם צורה או מלל בשחור. מה שבשחור נפתח ורואים דרכו את מה שמאחור, וכל מה שזז שם, אפילו פרלקס רגיל, נחשף דרכו. גם Shape Reveal בנוי ככה.

Today Web
.wrap  { position: relative; isolation: isolate; overflow: clip; }
.layer { position: absolute; inset: 0; background: #fff; color: #000; mix-blend-mode: screen; }

<div className="wrap">
  <img src="/a.jpg" alt="" data-movement="-120" />
  <div className="layer">Today Web</div>
</div>

מחכה לבית

גריד שמתפרק בגלילה (Showit)

כרטיסים בגריד, וכל אחד זז בגלילה במרחק ובכיוון משלו, למעלה או למטה: הגריד מתפרק ונבנה תוך כדי גלילה, כמו באתרי Showit. אין לזה מנגנון משלו: זה data-movement על כל כרטיס, במספר אחר (עד 7.11 היה לזה attribute ישן, data-parallax-card-speed, שאוחד לתוכו). חי ב-showit_lab ובדף ה-Lookbook של דמו העיצוב.

<div data-movement="48">…</div>    {/* down */}
<div data-movement="-80">…</div>   {/* up, faster */}
<div data-movement="32">…</div>