codrops
214 subscribers
60 photos
266 videos
1 file
411 links
Fueling web creativity since 2009
Download Telegram
This media is not supported in your browser
VIEW IN TELEGRAM
Naked City Films needed a site that stayed in motion without losing control.

SavoirFaire© Faire takes us behind the scenes of a process where restraint, rhythm, and custom systems shape an experience that behaves like film. Read it here
This media is not supported in your browser
VIEW IN TELEGRAM
A tutorial by Iqbal Muthahhary on creating smooth CSS Grid layout transitions with the GSAP Flip plugin, showing how to resize and reorder items with minimal JavaScript while maintaining clean, continuous motion.

Read it here
This media is not supported in your browser
VIEW IN TELEGRAM
Today we are highlighting Dylan Brouwer who spent years in design-led roles before taking the leap into full-time freelance, embracing motion and no-code to build expressive sites without waiting to become a "traditional" developer.
🔥2
Discover the top 12 web design tools for 2026 – from AI-powered builders to creative resources for designers.

#promoted
This media is not supported in your browser
VIEW IN TELEGRAM
Today, we're excited to share a fantastic tutorial by Thibault Introvigne.

Inspired by the Gommage effect from Clair Obscur: Expedition 33, it breaks down how to create a cinematic dissolve in WebGPU and Three.js, using MSDF text, particle effects, TSL shaders, and selective bloom.

Read it here
3
This media is not supported in your browser
VIEW IN TELEGRAM
We’re so excited to spotlight Daniele Buffa today!

From a childhood surrounded by art in Rome to crafting beautifully polished, motion-forward digital work in London, Daniele shares the experiences, influences, and mindset behind his approach to design. Read it here
3
This media is not supported in your browser
VIEW IN TELEGRAM
Learn how to build a multi-page WebGL image gallery with shader reveals, smooth scrolling & seamless transitions using GSAP, Three.js, Astro & Barba.js. By Chakib Mazouni.

Read it here
1🔥1
This media is not supported in your browser
VIEW IN TELEGRAM
In today’s spotlight, Vladyslav Penev shares how his work on StringTune, StringTune-3D, and real client projects shaped his approach to building production-ready motion and interaction systems.

Read the full spotlight
2
This media is not supported in your browser
VIEW IN TELEGRAM
A little Sunday inspiration

New Motion Highlights with UI animations and motion design to refresh your creative brain before the week begins.
👍2
Media is too big
VIEW IN TELEGRAM
What makes a digital experience feel truly human?

We're so stoked to spotlight Exo Ape today. A studio driven by narrative, motion, and the belief that the most powerful digital journeys are crafted slowly, with care, character, and a very human touch.

Dive in
1
This media is not supported in your browser
VIEW IN TELEGRAM
In today's tutorial, Sujen Phea shows how to build a GPU-enhanced procedural snake in Three.js, where organic motion emerges from steering behaviors, endless Bézier curves, and shader-driven rendering. 🐍

Follow along
1
Media is too big
VIEW IN TELEGRAM
From burnout to building the work he always wanted.

In our latest Designer Spotlight, Jordan Gilroy shares how learning Webflow gave him back control — and reignited his love for design.

An inspiring story about doubt, growth, and starting again. Read it here
1
This media is not supported in your browser
VIEW IN TELEGRAM
Minimal design doesn’t mean static.

A deep, insight-rich behind-the-build of the award-winning 1820 Productions site by Balky Studio. Designed by Williams Alamu and developed by Carter Ogunsola, it's built on Webflow and brought to life with GSAP, with plenty of thoughtful craft under the hood.

The perfect weekend read
Media is too big
VIEW IN TELEGRAM
Since 2006, Metalab has helped build some of the internet's most familiar products.

In our latest Studio Spotlight, their team shares how they've shipped 475+ products by combining craft-first design, durable systems, and hands-on execution. Read it here
2
This media is not supported in your browser
VIEW IN TELEGRAM
Our latest tutorial by Matis Dené explores a scroll-driven, infinitely looping 3D image tube built with React Three Fiber.

You'll learn shader-based deformation, inertial motion, seamless looping, and how to sync DOM and WebGL into one cohesive motion system. Read it here
This media is not supported in your browser
VIEW IN TELEGRAM
In this new case study, Joffrey Spitzer walks through the making of his minimalist Astro + GSAP portfolio shaped by precise motion, refined text reveals, and smooth, considered transitions.

Packed with thoughtful, practical code examples. Read it here
1
This media is not supported in your browser
VIEW IN TELEGRAM
In this in-depth tutorial, David Faure shows how to build a smooth horizontal parallax gallery from a clean DOM/CSS/JS setup to a GPU-powered WebGL (Three.js) version with shaders for that extra-fluid feel!

Follow along
2
This media is not supported in your browser
VIEW IN TELEGRAM
Brooklyn grit. Darkroom tones. Italic rebellion.

In our latest case study, Serhii Polyvanyi of BL/S® walks us through the making of Jason Bergh’s cinematic portfolio — built in Webflow, driven by GSAP, and shaped by film-cut transitions with UI details pulled from the edge of a 35mm strip.

A masterclass in mood-driven web design. Read it here
This media is not supported in your browser
VIEW IN TELEGRAM
Composite rendering in WebGL goes far beyond post-processing.

Jeremy Chang from Active Theory breaks down render targets, fullscreen passes, and shader-driven transitions — and shows how to architect scalable Three.js experiences. Read it here
31
This media is not supported in your browser
VIEW IN TELEGRAM
Today, we have Matt Greenberg breaking down how he turned a flat product grid into a spatial 3D experience with React Three Fiber and custom GLSL, focusing on damping instead of timelines, mutable refs over React state, and an architecture that maintains 60fps. Read it here
2
This media is not supported in your browser
VIEW IN TELEGRAM
Architecture meets motion.

Grégory Lallé and Thomas Monavon share how Telha Clarke's new identity became a refined, scroll-driven experience powered by GSAP & smart UI decisions. Read it here
1