codrops
236 subscribers
62 photos
341 videos
1 file
496 links
Fueling web creativity since 2009
Download Telegram
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.
This media is not supported in your browser
VIEW IN TELEGRAM
He can't model 3D. That limitation became the entire visual identity of his portfolio.

Tomasz Szmajda built a fully walkable 3D corridor in Three.js using no 3D models at all. Just flat rectangles wrapped in hand-drawn textures, a custom paint-reveal shader, and four months of fighting with camera systems.

Read the full story
🔥32
This media is not supported in your browser
VIEW IN TELEGRAM
Not every great website is about adding more. Sometimes it's about removing complexity.

In this thoughtful look behind "A Better Lou", Artemii Lebedev shares how design systems, content strategy, and Webflow came together to create a calmer healthcare experience.
This media is not supported in your browser
VIEW IN TELEGRAM
Always building. Always learning.

From nearly becoming a designer to building award-winning websites, teaching the next generation of developers, and championing modern CSS, Cyd Stumpel's story is one of constant curiosity and craft.

Read our latest Developer Spotlight.
2🙏1
This media is not supported in your browser
VIEW IN TELEGRAM
How much can you change an animation by simply tweaking the math behind it?

Inspired by a beautiful animation from Jason Booth, this collection explores scroll-driven 3D image animations built with GSAP.

Each demo experiments with different combinations of rotation, depth, scale, blur, and other visual effects to create a different feel.

Explore, get inspired and make them your own.
4
This media is not supported in your browser
VIEW IN TELEGRAM
Taste starts the journey. But scaling great creative work requires something more: turning taste into a system.

Lewis Webber shares how he evolved from freelancer to founder of multiple niche studios and why designing the business is just as important as designing the work.
🔥2
Media is too big
VIEW IN TELEGRAM
From asking better questions to solving complex digital challenges, DashDigital's work is rooted in research, strategy, and thoughtful execution.

In our latest Studio Spotlight, they share the story behind the studio, their process, and projects spanning art, culture, film, and finance.
This media is not supported in your browser
VIEW IN TELEGRAM
How do you design a website that preserves rhythm instead of breaking it into pages?

Julien Sister and Benoît Delorme take us behind the making of Podium, a narrative-driven portfolio for a production studio creating films around running and athletic culture, where motion, pacing, and restraint shape the experience. Read it here
Visual bugs don't always show up in your test suite.

Today, Kyle Gach from Chromatic shares how visual testing complements Vitest Browser Mode, helping catch the layout, styling, and responsive regressions that traditional component tests can miss.

Worth a read if you're already using Vitest Browser Mode or planning to adopt it. Early access to the new plugin is now open. Check it out
Media is too big
VIEW IN TELEGRAM
Meet Kevin Lam, a Brisbane-based designer whose work is shaped by thoughtful storytelling, quiet aesthetics, and meaningful brand experiences.

In our latest Designer Spotlight, Kevin shares his creative journey, design philosophy, and a selection of projects that explore branding, digital design, motion, and craft.

Read the full story
1