Building a Reversible Two-State Landing Page with GSAP Timelines скачать в хорошем качестве

Building a Reversible Two-State Landing Page with GSAP Timelines

Building a cinematic art exhibition landing page from scratch — GSAP timeline choreography, SplitText character animations, and a two-state interactive flow with smooth reversible transitions. Click "start" to reveal the full exhibition layout: a portrait slides in, the eye image morphs from center to corner with border-radius animation, sunburst rays spin up, and staggered text fades in. Click "SHOW ALL" to reverse everything back to the intro state. Highlights: Two-state interactive flow (intro / exhibition) with full reverse GSAP timeline with SplitText character-by-character animation Eye image morph: centered square to circular corner element Conic-gradient sunburst rays with CSS mask Portrait slide-in with transform animation Smooth reversible transitions on click 🔗 Source code: https://github.com/alldesigncode/art-... 🎨 Original design: https://dribbble.com/shots/18053124-H... Tech stack: HTML5 & CSS3 (custom properties, BEM) Vanilla JavaScript GSAP 3.12 Chapters: 0:00 Preview 0:15 HTML Structure 1:37 CSS Styling 7:05 JavaScript & GSAP Animations 10:56 Final Result #gsap #webdesign #htmlcss #javascript #uiux #frontenddevelopment #animation #webdev #cssanimation