Not a design choice💥 OV 0

Infrastructure

לא החלטה עיצובית: מה ששומר על הדף נקי ועובד. בלי הבהוב לפני שה-JS עולה, וידאו שמתנגן רק כשרואים אותו, והבעיות המוכרות של GSAP בטלפון.

on_load video_autoplay GSAP on Mobile: Known Issues

#gsap-fouc

on_load

[attribute]On load

Hidden until JS has set it up, then fades in (a slider, a counter).

<div className="opacity_0_on_load">…</div>   // gets gsap-ready after the init

#gsap-video-autoplay

video_autoplay

[attribute]Scroll into view

Usage

<video
  video_autoplay=""
  muted
  loop
  playsinline
  preload="metadata"
  src="..."
/>

video_autoplay=""

Required. Enables the behavior.

video_autoplay_threshold="0.5"

Optional. 0–1, default 0.5. How much of the video must be visible to trigger play.

Live demo: scroll away and back

#gsap-mobile

GSAP on Mobile: Known Issues

Mobile · חל על כל האפקטים

גובה המסך בטלפון: vh, svh, dvh

בטלפון אמיתי, בכל פאנל sticky שמחזיק את המסך: הסרגלים של הדפדפן והנאבבר אוכלים ממנו.

/* the pane: under the navbar, down to the screen's bottom */
position: sticky;
top: var(--uk-sticky-top, 0px);
height: calc(100vh - var(--uk-sticky-top, 0px));

/* what must be read, inside it: above the phone's bars */
inset: 0 0 var(--uk-browser-bars, 0px);

/* JS progress: stickyHold(track) from lib/sticky-hold.ts */

❌ top: 0: הנאבבר מכסה את ראש הפאנל. --uk-sticky-top = גובה הבר כשהוא נשאר, 0 כשהוא עוזב.
❌ תוכן ממורכז ב-100vh: יושב נמוך ונחתך מתחת לסרגל התחתון. --uk-browser-bars מרים אותו.
❌ פאנל ב-100svh: כשהסרגל מתקפל נשאר פס ריק מתחתיו. ❌ 100dvh: הגובה זז באמצע הגלילה. dvh רק לשכבה fixed (תפריט, פופאפ).
❌ window.innerHeight ו--rect.top בחישוב ההתקדמות: מתעלמים מהנאבבר והטיימליין מאחר. stickyHold() מודד את הפאנל עצמו.

ירידת דור במובייל

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

דרכים להתמודד

במובייל האנימציה בלי סטיקי: היא מגיבה פשוט לגלילה הטבעית. למשל Section Clip בלי pin: מבינים שיש קצת תנועה, וזה עובד חלק לגמרי. לא לכל אפקט: בלי עצירה אפשר לגלול ולפספס את הרגע שבו הוא מושלם, אז מנסים כל אחד בנפרד.
שימוש ב-gsap.matchMedia() להתאמות של קצב ותנועה במובייל.
הסתרה של האנימציה כולה במובייל: מוצא אחרון.