Design in Motion: The Animation Principles Behind Green Stack
A concept-to-site journey in Webflow, shaped by design, dev, and bold animation principles.
All Posts
Browse through all articles, tutorials, roundups, and experiments on Codrops.
Stas Bondar ’25: The Code & Techniques Behind a Next-Level Portfolio
In Articles, by Stas Bondar
A look behind stabondar.com — a creative portfolio featuring advanced web animations with GSAP, Three.js, and physics-based effects.
Animating Letters with Shaders: Interactive Text Effect with Three.js & GLSL
In Tutorials, by Paola Demichelis
A beginner-friendly tutorial that explores how to create a dynamic text displacement effect using Three.js and custom shaders.
Motion Highlights #3
In UI Interactions and Animations Roundups, by Manoela Ilic
Fresh animation ideas and motion design trends to fuel your inspiration.
Designer Spotlight: Huy Phan
Award-winning designer Huy Phan shares his journey, creative philosophy, and the stories behind his most impactful digital experiences.
Developer Spotlight: Jean Mazouni
In Articles, by Jean Mazouni
In this spotlight, Jean Mazouni showcases some of his favorite freelance work as a web developer and shares his passion for WebGL technologies.
StringTune: The JavaScript Library Born from a Design Agency’s Workflow
In Articles, by Fiddle.Digital
Learn how to use this flexible JavaScript library for animations, smooth scrolling, and interactive effects.
Building an Interactive Image Grid with Three.js
In Tutorials, by Samuel Jarry
In this tutorial, we’ll create an interactive image grid using Three.js, covering setup, animations, and shaders.
Case Study: Motoyoshi Takamitsu
In Articles, by Garden Eight
An exploration of the design and development of photographer Motoyoshi Takamitsu’s portfolio website.
Playing with Light and Refraction in Three.js: Warping 3D Text Inside a Glass Torus
Explore how MeshTransmissionMaterial in Three.js bends light, creates refraction effects, and enhances realistic glass-like materials.
Case Study: Fiddle.Digital Design Agency — The New Us
In Articles, by Fiddle.Digital
This case study tells the story of how a small rebranding idea sparked a revolution within the agency.
Replicating CSS Object-Fit in WebGL: Optimized Techniques for Image Scaling and Positioning
In Tutorials, by Nicolas Giannantonio
Explore optimized methods to achieve responsive image scaling and positioning in WebGL, similar to the CSS object-fit: cover behavior.
Rendering a Procedural Vortex Inside a Glass Sphere with Three.js and TSL
In Tutorials, by MisterPrada
A step-by-step guide to creating a procedural vortex inside a glass sphere using Three.js Shader Language (TSL).
Designer Spotlight: Artem Shcherban
In Articles, by Artem Shcherban
Award-winning designer Artem Shcherban shares his journey, design philosophy, and the creative principles behind his work.
Developer Spotlight: Yannis Yannakopoulos
In Articles, by Yannis Yannakopoulos
In this spotlight, Yannis Yannakopoulos shares his journey with over 15 years of experience in web development, generative art and modular synths.
Case Study: Stefan Vitasović Portfolio — 2025
In Articles, by Stefan Vitasović
An article behind the process of Stefan’s 2025 creative dev portfolio — a minimalist design, dynamic visuals and shader effects.
Creating Stylized Water Effects with React Three Fiber
In Tutorials, by Thalles Lopes
Learn how to craft smooth, cartoon-style water effects with dynamic movement, optimized for performance, using React Three Fiber.
CSS Meets Voxel Art: Building a Rendering Engine with Stacked Grids
In Articles, by Agustin Capeletto
Learn how transforms, perspective, and stacked grids can create a fully addressable 3D space and push the boundaries of what’s possible with pure CSS.
