Uncover

מה זה עושה, לפי הסדר

1. 1
   A נגלל כמו כל סקשן. הוא עולה עם הדף, כרגיל. שום דבר לא נעצר.
2. 2
   B כבר שם. כל עוד B מתחת למסך, ה-sticky מושך אותו לתחתית המסך, מאחורי A, ו-A מכסה אותו.
3. 3
   A מתקלף. התחתית של A עולה, ו-B נחשף מתחתיו במקום, בלי לזוז. הקצה של A מטיל עליו צל קטן.
4. 4
   B ממשיך. מהרגע ש-B הגיע למקום שלו בדף, הוא נגלל כמו כל סקשן.

UkUncover

import UkUncover from '@/components/GSAP/UkUncover/UkUncover'

<UkUncover>
  <section>…A, lifts away…</section>
  <section>…B, waits underneath (up to one screen tall)…</section>
</UkUncover>

--uk-uncover-bg      the ground A gets when it has none (default: the page's)
--uk-uncover-shadow  the edge A casts on B as it lifts (none to drop it)

B עד מסך אחד: ה-sticky מחזיק אותו בקצה התחתון שלו, אז B גבוה ממסך היה מראה קודם את הסוף שלו. ל-A חייב להיות רקע, אחרת B נראה דרכו: הוא מקבל את הרקע של הדף מעצמו, ו-class של סקשן או CSS של דמו גוברים עליו. עובד בכל מסך, גם בטלפון, כי זה רק sticky. ניטרלי כמו Push Under: לא שואל כלום על התוכן, ויכול לחזור באותו דף.

בלי אנימציות כניסה בתוך B (trigger_box, split, data-section-clip): הוא לא מגיע, הוא נחשף. הן גם היו רצות מתחת ל-A, כי ה-sticky מושך את B למעלה כש-ScrollTrigger מודד אותו.

בשימוש: בסוף דף הבית של Lumière ושל Aurea.