Pinned slide 01
Section 1
A full-viewport intro panel pins, scales, and fades as the next slide moves over it.
Pinned slide 02
Section 2
This middle section is intentionally taller than the viewport so the inner content scrolls before the next pinned panel takes over.
The panel stays pinned while the text stack moves upward inside it.
Once the extra content has cleared, the section follows the same scale and fade transition as the shorter slides.
This is the overscroll case from the original GreenSock demo, rebuilt for an Astro registry item.
The additional lines keep the panel taller than common laptop viewports without relying on fixed pixel heights.
Each paragraph remains ordinary document content, so teams can replace this copy with product messaging, case-study notes, or editorial storytelling.
The ScrollTrigger timeline reads the live content height and recalculates after resize.
That keeps the pinned section usable when consumers change type scale, copy length, or breakpoint-specific layout.
The behavior stays local to this block and respects reduced motion preferences.
The final line marks the end of the fake-scroll content before the next image slide enters.
This is the end...
Pinned slide 03
Section 3
Image-led panels use the same transition timeline with simpler content height.
Pinned slide 04
Section 4
The last slide remains unpinned so the sequence resolves naturally at the bottom of the page.
