Codrops25 minCreating Custom Page Transitions in Astro with Barba.js and GSAP
Follow along as we build page transitions in Astro with Barba.js and GSAP, from the initial setup to a working animated transition flow.

Codrops25 minFollow along as we build page transitions in Astro with Barba.js and GSAP, from the initial setup to a working animated transition flow.
Codrops12 minMore than a year of iteration, motion studies, and technical refinement went into shaping R—K ’26 into a portfolio where identity, rhythm, and interaction work as one.
Codrops11 minA behind-the-scenes look at how we built Maxima Therapy with playful interactions, creative code, and a little AI help along the way.
Codrops13 minHow obsessing over craft, code quality, and the details nobody notices shaped a decade of creative frontend work.
Codrops27 minA step-by-step breakdown of how I built a Three.js visual explainer on dithering by animating 160,000 cubes with custom shaders.
Codrops3 minAn exploration of how reusable GSAP animations, custom text transitions, and fluid WebGL interactions shape a distinctive portfolio experience.
Codrops7 minA look at how Malvah.Studio creates distinctive brand experiences for businesses looking beyond the ordinary.
Codrops3 minFrom fluid simulations to bold microinteractions, this edition showcases vibrant animation and visual storytelling from across the creative web.
Codrops8 minA refined case study on how Pell Mell reimagines creative discovery through immersive scrolling, restrained interactions, editorial-inspired design, and a performance-conscious visual system.
Codrops7 minAfter a decade designing websites, María Vargas shares how gaming unexpectedly became the next chapter of her career.
Codrops9 minDesigned as a digital landscape to explore, San Rita’s portfolio combines 3D terrain, vintage map textures, and immersive motion with a strong sense of place.
Codrops13 minLearn how to use Three.js to blend two scenes with a fluid simulation, creating a smooth, dynamic reveal effect.
Codrops9 minHow I stopped chasing references and built a portfolio that actually feels like me.
Codrops8 minBecause behind every interface is a real person, and behind every interaction is a feeling.
Codrops13 minBuild a single, persistent Three.js scene in Webflow and drive smooth, GSAP-powered page transitions with Barba.js.
Codrops10 minA candid journey through the challenging process of defining my narrative as a creative who cares deeply about both design and engineering.
Codrops8 minHow I went from having no idea what to do with my life to dropping out of university and building a design studio in my twenties.
Codrops15 minIn this tutorial, we’ll create four scroll-driven transitions that reveal fullscreen images using SVG masks, GSAP, and grid- and blind-based patterns.
Codrops12 minA tutorial on building a scroll-driven WebGL gallery in Three.js with depth-layered images, palette-driven backgrounds, and motion that responds to scroll velocity.
Codrops8 minAn inside look at Obys and how a small team creates award-winning digital experiences through storytelling, structure, and intentional design.
Codrops10 minAn overview of how I redesigned my portfolio as a creative playground, blending editorial design, WebGL experiments, and thoughtful motion.
Codrops8 minA look at how Unicorn Studio brings the power of WebGL shaders to designers through a layer-based workflow, making it easier to create expressive, interactive graphics directly in the browser.
Codrops9 minHow we designed and built a digital capsule for Better Off® Studio to document what shaped them into who they are today.
Codrops16 minLearn how to build a structured scroll-driven image grid where movement unfolds progressively within a sticky layout.
Codrops7 minHow Makio64 & Hervé Studio designed threejs.paris, the website of the very first Three.js conference, to make every visitor part of the show!
Codrops9 minHow gaming culture, typographic discipline, and a passion for motion design converged into a career building immersive digital experiences.
Codrops16 minLearn how to build a lightweight SPA router with true async crossfade page transitions using Vanilla JavaScript, GSAP, and Vite — no framework required.
Codrops9 minA behind-the-scenes look at balancing clean layouts and thoughtful motion for Telha Clarke’s new identity.
Codrops14 minA practical walkthrough of building a curved 3D product grid with React Three Fiber and GLSL, covering shaders, animation, and performance.
Codrops9 minExplore composite rendering in WebGL and how render targets power seamless transitions and advanced scene compositing.
Codrops9 minThis is Brooklyn grit in a darkroom palette—italicized first letters, cream-toned “film stock” whites, and UI details pulled straight from the edge of a 35mm strip.
Codrops30 minBuild a smooth horizontal parallax gallery in DOM/CSS/JS, then upgrade it to GPU-powered WebGL (Three.js) with shaders.
Codrops10 minBuilding a minimalist, smooth portfolio with Astro + GSAP: reveals, page transitions and subtle animations, crafted with restraint and precision.
Codrops6 minBuild a scroll-driven, infinitely looping 3D image tube in React Three Fiber powered by shaders, inertia, and a unified motion system.
Codrops5 minYou may not have known it at the time, but chances are you've probably used a product we've designed.
Codrops13 minA detailed behind-the-build on turning a strict minimal brief into a high-end experience through rhythm, transitions, and micro-interactions.
Codrops6 minHow learning to build my own work helped me take back control and fall in love with design again.
Codrops13 minA deep dive into building a GPU-enhanced procedural curve system in Three.js, where organic motion emerges from simple steering rules and endless Bézier paths.
Codrops9 minA studio story shaped by narrative, motion, and the belief that digital journeys should feel human.
Codrops3 minA fresh selection of UI animations and motion work from the creative community.
Codrops10 minVladyslav Penev shares how he builds production-ready motion and layout-driven 3D systems, where CSS, WebGL, and interaction behave as one.
Codrops21 minLearn how to build a multi-page WebGL image gallery with scroll-triggered shader reveals, smooth scrolling, and seamless page transitions using GSAP, Three.js, Astro, and Barba.js.
Codrops6 minFrom discovering design as a teenager to creating award-winning experiences, Daniele Buffa’s journey has been shaped by curiosity, craft, and a lifelong exposure to art.
Codrops30 minBuild a Three.js WebGPU scene where MSDF text dissolves with a noise-driven TSL shader while synchronized dust and spinning petal particles burst out, finished with selective bloom using MRT.
Codrops18 minDiscover the top 12 web design tools for 2026 – from AI-powered builders to creative resources for designers.
Codrops7 minA look at how Dylan blends visual design, UX, and motion to build expressive, experience-rich websites, powered by tools like Webflow, GSAP, and curiosity.
Codrops9 minWe’ll explore how to use GSAP’s Flip plugin to animate dynamic grid layout changes, showing how grid items can resize and rearrange fluidly.
Codrops8 minA behind-the-scenes look at how restraint, rhythm, and custom technical systems shaped a website that behaves with the same confidence and control as the films it represents.
Codrops5 minFrom student projects to brands like BMW, Google, and Nike, Victorine Snijders shows how design solves everyday problems by focusing on human behavior, friction, and impact.
Codrops15 minLearn how to create smooth, opposing wave text animations across dual columns with scroll-driven sine wave mathematics and synchronized image updates.
Codrops18 minA deep dive into how Flim was built, breaking down the animations, interactions, and technical decisions behind a GSAP-powered Webflow experience.
Codrops13 minCompare the 8 best WordPress themes for designers in 2026—fast builds, clean UI, dependable updates, and WooCommerce depth for reliable, high-performance sites.
Codrops7 minA case study on how Obys turned book recommendations into a tactile, animated web library.
Codrops10 minAn in-depth look at how The Spark was imagined, designed, and engineered as a cinematic, scroll-driven web experience that brings story, motion, sound, and performance together in the browser.
Codrops10 min10 years ago, my brain couldn't grasp what a string was and it turns out I was overcomplicating everything because code is called “code” (we should rename this).
Codrops12 minLearn how to build an infinite, pannable image canvas with React Three Fiber. We’ll use chunk-based rendering and performance-first techniques to create a smooth, endlessly explorable image space.
Codrops11 minDiscover the best 8 WordPress plugins for 2026 – animation, data UI, maps, grids, forms, builder & booking – to extend your site while keeping pages lean with smart setup.
Codrops18 minA tutorial showing how video pixels are voxelized in 3D and dropped into a physics-driven world using Three.js, shaders, and Rapier.
Codrops10 minAn exploration of how classic image algorithms and CRT-era visuals come alive through real-time shaders on the web.
Codrops30 minThis article dives into how psychological safety and self awareness help creative people take risks, speak honestly, and learn faster, and why that matters more than ever in modern teams.
Codrops8 minAn exploration of how concept, motion, sound, and code came together to create a website that doesn’t just present breathwork, but embodies it.
Codrops21 minA look back at the ideas, experiments, and people that shaped a remarkable year at Codrops.
Codrops2 minA new selection of motion work from across the creative community.
Codrops10 minA nostalgic 8-bit portfolio experiment built with modern AI workflows and performance-first web tech.
Codrops8 minThe new standard for WordPress design is interactive, animated, and intentional.
Codrops13 minAn in-depth look at the evolution of Spain Collection’s first website into a more ambitious digital ecosystem, connecting strategy, design, and technology across Spain and Portugal.