codrops
235 subscribers
62 photos
341 videos
1 file
496 links
Fueling web creativity since 2009
Download Telegram
Media is too big
VIEW IN TELEGRAM
Today, Lyon-based Akaru share how they craft digital platforms where design and performance are inseparable. Deliberate work, beautiful results.

Read their studio spotlight
1
This media is not supported in your browser
VIEW IN TELEGRAM
Reverse-engineering animations is one of the best ways to level up your skills.

Today we got Ayotomiwa Wale-Durojaye break down his process of rebuilding Claude AI's mascot animations from scratch, frame by frame, purely in code using SVG and GSAP.

Learn along
2
This media is not supported in your browser
VIEW IN TELEGRAM
Today, Thibault Guignand explores the making of his portfolio redesign, where WebGL shaders, scroll interactions, and UI transitions all sync through a single motion system powered by GSAP.

From flowmaps to text reveals, every effect is driven by code-first design decisions.
1
This media is not supported in your browser
VIEW IN TELEGRAM
Some studios build websites. Others build a feeling.

Le:mma Studio crafts immersive digital experiences shaped by atmosphere, motion, and storytelling.

In our latest spotlight, founder Artemii Lebedev shares a closer look into the studio's world.
1
This media is not supported in your browser
VIEW IN TELEGRAM
Today we’re stoked to have Vittorio Retrivi from basement.studio share an incredible exploration of the emerging HTML in Canvas proposal.

From shader powered UI effects to interactive 3D interfaces, this article is packed with inspiring experiments for the future of creative web development. Read it here
🔥4
This media is not supported in your browser
VIEW IN TELEGRAM
From rethinking their identity to building a motion driven system where type, structure, and interaction work as one, Obys shares the story behind their new website and visual language.

A thoughtful case study on clarity, restraint, and designing systems that evolve over time. Read it here
This media is not supported in your browser
VIEW IN TELEGRAM
From Eurovision Village to Dior and award-winning interactive experiences, Merlin crafts digital work where motion, technology and design move as one.

Explore the story behind the Amsterdam-based Code Boutique in our latest Studio Spotlight.
2
This media is not supported in your browser
VIEW IN TELEGRAM
Beige computers, glossy office ads, golden ties, and the remains of an ironic business rebrand.

Simon Hedlund and Filip Kantedal take us inside the making of Shader Development Studio's website, a scroll-driven 3D experience shaped by corporate satire, 80s business tech, and seamless scene transitions.
🔥21
This media is not supported in your browser
VIEW IN TELEGRAM
To celebrate the launch of 50 new effects, Made With Gsap is breaking down a satisfyingly playful gravity-based mouse trail effect for us today!

Download the effect for free & don’t miss the discount at the end of the article. Read it here
1🔥1
This media is not supported in your browser
VIEW IN TELEGRAM
Follow a route, animate the journey, and turn scrolling into a cinematic experience.

Tom Miller shows how to create lightweight scroll-driven SVG map animations with GSAP, without relying on a map API.
3
This media is not supported in your browser
VIEW IN TELEGRAM
Learn how to build a scroll-driven 3D cube gallery in Webflow with GSAP.

This in-depth step-by-step tutorial by Francesco Castronuovo shows how to combine CMS-powered content, fullscreen image transitions, Split Text animations, and 3D transforms into one seamless scrolling experience.

Follow the full build and get the clonable.
This media is not supported in your browser
VIEW IN TELEGRAM
For Adrien Vanderpotte, the best interfaces aren’t simply designed — they emerge through experimentation, iteration, timing, and feel.

In our latest Developer Spotlight he reflects on motion, shaders, and crafting digital experiences that stay with people.
👍1
This media is not supported in your browser
VIEW IN TELEGRAM
Today we have Joe Ben Taylor sharing a great tutorial on building a seamless infinite scroll experience with GSAP and Lenis.

Infinite looping, parallax depth, snap scrolling, and smooth motion, all broken down in a clean and approachable way.
👍1
This media is not supported in your browser
VIEW IN TELEGRAM
We taught technology how to inform, entertain, and persuade. But can it help people heal?

Andrew Woan explores a simple but intriguing idea: what if websites could serve as places of care, reflection, and emotional growth rather than tools for attention and engagement?

An interesting perspective on where technology, design, and mental well-being may intersect in the years ahead.
2
Media is too big
VIEW IN TELEGRAM
From a shared passion for craft to an internationally recognized creative studio, Beaucoup has built its journey around one simple idea: creating experiences people remember.

In our latest Studio Spotlight, they share their journey, creative philosophy, and some of the work that has shaped their path.
This media is not supported in your browser
VIEW IN TELEGRAM
Not every path into creative development starts with a degree, a plan, or a clear roadmap.

Houmahani Kane taught herself to code, built interactive experiences for major brands, and carved out a place for herself in the industry through curiosity, resilience, and years of dedication to her craft.

We're honored to share her story today.
🔥1
This media is not supported in your browser
VIEW IN TELEGRAM
Stacked thumbnails unfold into a fluid image strip in this GSAP MotionPath experiment by Iqbal Muthahhary.

Learn how a handful of dynamically calculated control points can create surprisingly organic gallery transitions.
2🔥1
This media is not supported in your browser
VIEW IN TELEGRAM
A single Next.js instance using ~500MB of RAM versus ~30MB with Svelte.

For Diogo Andrea and the Lesse Studio team, that difference sparked a complete rethink of their stack, leading them down a rabbit hole of self-hosting, optimization, and rebuilding their agency website from the ground up.

Read the full story
4
This media is not supported in your browser
VIEW IN TELEGRAM
No two paths alike.

In our latest Studio Spotlight, we meet San Rita, a Montréal-based creative studio crafting digital experiences shaped by exploration, adaptability, and thoughtful execution.

From immersive portfolios to complex digital platforms, every project follows its own trail.
1
This media is not supported in your browser
VIEW IN TELEGRAM
How do you bring a stamp collection online without turning it into just another image gallery?

Inspired by a family stamp album, Robert and Marijana Pavlinić created an interactive digital stamp collection filled with playful inspection, thoughtful details, shaders, postcards, and plenty of charm.

Read the fascinating story behind the project.
1
This media is not supported in your browser
VIEW IN TELEGRAM
How do you create advanced, high-performance motion experiences in Webflow?

In this case study, Kamran Imtiaz and the team at upgreight share how they built Horeca's motion system—from scroll-driven storytelling and immersive interactions to mobile optimization and production-ready architecture.

A detailed look at combining Webflow, GSAP, and thoughtful engineering to deliver ambitious motion design at scale.