Building a minimalist, smooth portfolio with Astro + GSAP: reveals, page transitions and subtle animations, crafted with restraint and precision.

Codrops stands at the forefront of innovation in web design, serving as a boundless source of inspiration and knowledge for designers and developers alike. Through a captivating array of tutorials, demos, and showcases, Codrops invites creatives to embark on a journey of exploration, pushing the boundaries of what's possible in web development. From  CSS techniques and JavaScript animations to immersive user interfaces and experiential storytelling, Codrops empowers designers and developers to unleash their creativity and craft unparalleled digital experiences that captivate and engage audiences.

Codrops

A detailed walkthrough of building a minimalist developer portfolio using Astro for static site generation and GSAP for animations. Covers key animation techniques including SplitText reveals for text (character-by-character for titles, line-by-line for paragraphs), GSAP Flip plugin for seamless layout transitions (menu-to-page-title, slider-to-grid switch, preloader), ScrollTrigger-driven vertical slider with scale-based performance optimization, and Swup for page transitions. Also uses Lenis for smooth scrolling, Three.js for a WebGL element, Tailwind for styling, Prismic as CMS, and Netlify for hosting. Includes concrete code snippets for each animation pattern.

Joffrey Spitzer Portfolio: A Minimalist Astro + GSAP Build with Reveals, Flip Transitions and Subtle Motion