Codrops

Do not scroll 👀 In today's tutorial, @AntoineW walks us through a fun scroll-driven typography animation that reads one word at a time, at the pace you'd say it out loud. Powered by @greensock, each word slides in with a colorful trail, and at the end, every scroll throws a letter into the air. Follow along: tympanus.net/codrops/?p=1255… #gsap #typography #motiondesign

Turn up the EGO control on the About page of Andrea Aurelio Napoli's portfolio and his puppet gets a bigger head. We love the humor he brings to the site, and we're so happy he's sharing how he built all of it, from the hand-placed grid to the transitions that carry your cursor's labels into each project. Meet the puppet: tympanus.net/codrops/?p=1249… #gsap #portfolio

What if a portfolio felt less like pages you flip through and more like one object you hold? For his new portfolio, Mathias Adolfsson bends a simple row of projects into a fluid 3D carousel, where every click unfolds into an immersive, barrel-shaped gallery. Built with Nuxt, Three.js WebGPU and GSAP, it's a beautiful lesson in motion, interaction and making the web feel alive. Dive into the making of it: tympanus.net/codrops/?p=1251… #threejs #webgpu #portfolio #gsap

Golden at sunset, olive at night. ✨ A beautiful blend of editorial design, thoughtful interactions, and immersive motion. Explore how Brandon Yasin and @aaslangm brought this stunning portfolio to life, with @greensock powering the transitions, animations, and details that make it shine. Dive into the full breakdown: tympanus.net/codrops/2026/11… #gsap #motiondesign #portfolio

Who said shaders belong to developers? Designers get to have fun with them too. @stefbrucedesign used shaders in @paper to lift her Mineral Collection posters, and every stone now looks fresh out of a museum drawer. Take a peek into her process: tympanus.net/codrops/?p=1249… #design #shaders #GraphicDesign

Today we have a new demo for you: Text Character Animations with GSAP. Nineteen character by character text animations, four of them in WebGL, made with @greensock SplitText. Demo: tympanus.net/Demos/TextChara… Code: github.com/codrops/TextChara… #webdev #gsap #typography

Coming home to Paris tired of design, one of the founders of @HerveStudio decided he would become a florist. The flower shop never opened. A few projects with an old friend turned into a studio instead, and we love how much fun @rbriaux and @FYI_Im_Vince have telling the story. Pull up a chair: tympanus.net/codrops/?p=1251… #branding #webdesign

What happens to a designer's taste when AI agents start doing the drawing? Jakub Otcenas, co-founder and executive creative director at Diorama, teaches it to them through comments right on the @paper canvas, then picks, combines and refines what comes back. Agents can draft. Taste is still the designer's job. We love how openly he walks us through it all, prompts included: tympanus.net/codrops/?p=1244… #designsystems #ai

We updated our Scroll-Based Layout Animations demo with some fixes and new effects. Demo: tympanus.net/Development/Scr… Article: tympanus.net/codrops/?p=7294… #webdev #gsap #scrollanimation

Lookbook Hover Effects: eight hover effects for a fashion lookbook grid, where a card takes over each photo by melting, peeling, flooding in as liquid glass or flickering like a channel change. Demo: tympanus.net/Demos/LookbookH… Code: github.com/codrops/LookbookH… #webgl #gsap #creativecoding

What will we play in the age of AI? Chrona is betting on worlds you can step into, play in together and keep coming back to. At SF Tech Week, @chronaworld and @MeshyAI brought together creators who build those worlds with AI, for an afternoon of playable showcases, talks and conversations. Step inside: tympanus.net/codrops/?p=1246… Thank you to Chrona for sponsoring this story. #threejs #ai

What if the line between two sections wasn't just a line? Our latest experiment explores eleven scroll-driven ways to animate that edge, using GSAP, WebGL and canvas. Check them out: tympanus.net/Demos/SeamTrans… #gsap #webgl

In an era of instant AI images, what can we learn from a designer who made 50 posters in 21 days? Kuvvat Ashyrov from Moonsight, took on the challenge to break out of a creative block. No brief, no fixed style. Just three weeks of experimenting, chasing ideas, and learning by doing. Because generating is easy. The real work is finding an idea worth bringing to life. Explore the process: tympanus.net/codrops/2026/10… #graphicdesign #design #creativity

Our community can't get enough of @paper right now: devs are designing with their agents, and designers are shipping apps! We've fallen for it too, and it's become the tool we design with at Codrops 💙 So we gathered our favorite tutorials, tips and tools into one guide. Start here: tympanus.net/codrops/?p=1227… #ai #mcp #design

Play Zelda's Lullaby on your keyboard and this browser ocarina recognizes it, plays the little jingle and replays the song back to you. @thibautlfr built most of it with @threejs in three days, right after the Ocarina of Time remake trailer, and shares how it works. Read the full story: tympanus.net/codrops/?p=1247… #threejs #gamedev (sound on ⬇️🎶)

A hand-cranked toy projector taught @carmenansio something worth carrying into interface design: the fun begins when you touch things and see what happens. That instinct runs through her work, from the systems behind Stripe’s dashboard to tiny, gloriously unnecessary motion experiments. Not everything needs a reason to move. Sometimes the movement is the point. Get to know Carmen and her work: tympanus.net/codrops/?p=1246… #css #motiondesign

For years, Juan Mora Romero's portfolio was one sentence and a list of projects. Then creative web design became his job, and the site turned into a world of its own: a Lab you can drag forever, a color split that follows your cursor and posters of his life that ripple like cloth in the wind. Today he shares how it all came together: tympanus.net/codrops/?p=1241… #webgl #threejs

We updated our On-Scroll Column & Row Animations demo with some fixes and new effects. Demo: tympanus.net/Development/OnS… Article: tympanus.net/codrops/?p=7318… #webdev #gsap #webgl

In today's tutorial, Jérémie Nallet walks us through building two pages with Atelier UI, his React library for mixing WebGL and the DOM, with scroll-synced WebGL text and images, a fluid distortion effect and a pixel page transition. Follow along: tympanus.net/codrops/?p=1242… #webgl #react #nextjs

In today's article Maria Vasilyeva and @sryaaditya_ share how they turned her love of music into layouts, motion and sound. Like many designers, Maria found her own portfolio the hardest thing to design. She found her way in through music, the playlists she makes for every project, and started treating each project as a note in a larger melody. Read the full story: tympanus.net/codrops/?p=1243… #webgl #portfolio