This Entire Page Is One ScrollTrigger Timeline — Architecture Editorial

Building a scroll-driven editorial layout inspired by modern architectural photography. The page features a cinematic entrance animation, pinned scroll sections with clip-path transitions, a horizontal marquee, and split-image reveals — all orchestrated through a single GSAP ScrollTrigger timeline.

The entire piece is vanilla HTML, CSS, and JavaScript — no frameworks, no build tools. Every transition is scrubbed to scroll position, and the entrance animation gracefully hands off to scroll control when the user starts scrolling.

Highlights:
- Cinematic entrance with staggered word reveals and floating images
- Scroll-driven panel transitions using clip-path inset animations
- Full-width image strip with slide-up reveal
- Horizontal marquee with outlined text alternating fills
- Split-image section with curtain-open effect
- Smooth entrance-to-scroll handoff — scroll during intro without breaking anything
- Fully reversible — every section restores when scrolling back up

🔗 Source code: https://github.com/alldesigncode/accra-editorial

Tech stack:
- HTML5 & CSS3 (custom properties, clip-path, clamp)
- GSAP 3.12 + ScrollTrigger (scrubbed timeline, pin)
- Cormorant Garamond (Google Fonts)
- Vanilla JavaScript

Chapters:
0:00 Preview
0:48 HTML Structure
4:03 CSS Styling
17:13 JavaScript
25:14 Result

#gsap #scrolltrigger #animation #webdesign #htmlcss #javascript #editorial #architecture #frontend #uiux #creativecoding #webdev

Видео This Entire Page Is One ScrollTrigger Timeline — Architecture Editorial канала ALL.DESIGN