Project Overview
This project is a high-impact portfolio concept developed for a second-semester HfK course. It was built entirely around the concept of scroll-scrubbed animation, utilizing GSAP and its ScrollTrigger plugin to synchronize complex sequences precisely with the user's scroll position. Key features include cinematic horizontal parallax for the 'Work' section, dynamic text manipulation linked to scroll progress, and immersive pinning mechanics. The goal was to create a modern, engaging, and visually polished narrative experience that demonstrates advanced front-end animation and performance optimization techniques.
Tech Stack
- GSAP (GreenSock Animation Platform)
- ScrollTrigger
- Lenis (Smooth Scrolling)
- Vanilla JavaScript
- HTML5
- CSS3
Key Features
- Cinematic Horizontal Parallax: A wide 'Work' section is scrubbed horizontally into view while the main page is pinned vertically.
- Dynamic Text Scaffolding: Large typography is used as a visual anchor, with elements like letter-spacing and font-weight being continuously mapped and animated by the scroll progress.
- Immersive Section Transitions: Utilizes pinning to keep core content centered while background elements or foreground animations (like the zooming heading) transition dramatically.
- Custom Utility Framework: A lean, project-specific CSS utility framework (`framework.css`) accelerates layout construction and design iteration.
- Optimized Background Elements: Subtle animation on background SVG icons creates dynamic depth without impacting scroll performance.