2 0 1 9

Like every year we've compiled a little retrospect of 2019.

This year was an exciting ride for us at Codrops. We're thrilled to have had the opportunity to collaborate with so many talented designers and developers.

A look back at 2019 A roundup of all Codrops publications of the past year

Animated Mesh Lines A set of five demos with animated WebGL lines created with the THREE.MeshLine library. Find out how to animate and build these lines to create your own animations. Article Demo

Interactive Particles with Three.js A tutorial on how to draw a large number of particles with Three.js and make them interactive. Article Demo

Layer Motion Slideshow A CSS Grid-based slideshow template with a layer motion effect on the main image and title. Article Demo

Buildings Wave Animation with Three.js A tutorial on how to create a 3D building wave animation with three.js and TweenMax. Article Demo

Custom Cursor Effects A collection of five demos and a tutorial on how to create animated custom cursor effects for interactive elements like navigations, galleries and carousels. Article Demo

Text Distortion Effects using Blotter.js Some text distortion experiments using the Blotter.js library. The idea is to distort text as we scroll or move the mouse. Article Demo

Grid Reveal Effects with Anime.js Some experiments with the new staggering system of Anime.js where we try different effects for hiding and showing thumbnails in an image grid. Article Demo

How to Create a Fake 3D Image Effect with WebGL Learn how to create an interactive "fake" 3D effect for images with depth maps and plain WebGL. Article Demo

Text Trail Effect A text trail effect for a slideshow inspired by the "Abstract is hiring" Dribbble shot. Article Demo

Image Distortion Effects with SVG Filters Three distortion effects powered by SVG filters that are applied to an image when hovering a link. Article Demo

How to Create Smooth WebGL Transitions on Scroll using Phenomenon A tutorial on how to transition WebGL instances in a smooth way based on the scroll position using three.js and Phenomenon. Article Demo

Exploding 3D Objects with Three.js A set of WebGL demos that show an exploding 3D object animation inspired by "Kubrick Life Website: 3D Motion". Article Demo

Crossroads Slideshow An experimental slideshow with an inclined look, three slide previews and a content view on click. Article Demo

How to Create a Sticky Image Effect with Three.js A recreation of the sticky image effect seen on the websites of MakeReign and Ultranoir using three.js. Article Demo

Pulling Apart SVGs with Reusable WebGL Components Using React-three-fiber Learn how to pull apart SVGs in 3D space with Three.js and React, using abstractions that allow us to break the scene graph into reusable components. Article Demo

How to Create and Animate Rotated Overlays A tutorial on how to create and animate rotated overlays, or "reveal" elements, for interesting page transition effects. Article Demo

How to Build an Underwater-Style Navigation Using PixiJS A tutorial on how to create a visually distinct and accessible WebGL menu that builds from any given HTML navigation. Article Demo

Animated Image Columns An experimental web layout where several image columns get animated out when a menu item is clicked. Article Demo

Creating Grid-to-Fullscreen Animations with Three.js Learn how to create thumbnail to fullscreen animations for image grids using Three.js. Article Demo

Draggable Image Strip A draggable image strip layout with a content preview powered by Draggabilly and TweenMax. Article Demo

Draggable Menu with Image Grid Previews A draggable inline menu with a scattered thumbnail preview of an image grid. Article Demo

How to Add Smooth Scrolling with Inner Image Animations to a Web Page A tutorial on how to add a smooth scrolling effect to a website and also animate the images that enter the viewport. Article Demo

Smooth Scrolling Image Effects A small set of ideas on animating images and other elements while smooth scrolling a page. Article Demo

Image Trail Effects A set of brutalist effects for mouse-following image trails that show a random series of images. Article Demo

React Slider with Parallax Hover Effects Walk through the build of a React slider and learn how to implement a parallax hover effect. Article Demo

How to Dynamically Change the Colors of Product Images using CSS Blend Mode and SVG Learn a simple technique for adding a color swap functionality to your product images by creating an SVG and applying a mix-blend-mode to the composition. Article Demo

A Configurator for Creating Custom WebGL Distortion Effects A configurator for creating unique fullscreen image animations with WebGL distortion effects powered by Three.js. Article Demo

How to Create a Webcam Audio Visualizer with Three.js A tutorial on how to create a Three.js powered audio visualizer that takes input from the user's webcam. Article Demo

How to Build a Color Customizer App for a 3D Model with Three.js Learn how to create a complete color customizer app for a 3D model of a chair using Three.js in this in-depth tutorial. Article Demo

Crafting Stylised Mouse Trails With OGL A tutorial on how to create a mouse trail effect using the OGL library, a minimal and effective WebGL framework. Article Demo

Mouse Flowmap Deformation with OGL A set of WebGL demos using OGL that show an interactive fluid distortion hover effect. Article Demo

Simulating Depth of Field with Particles using the Blurry Library Learn how to create a geometrical scene with a depth effect using the Blurry library. Article Demo

Creating a Water-like Distortion Effect with Three.js Learn how to achieve a water-like ripple distortion effect with Three.js and postprocessing. Article Demo

Create Text in Three.js with Three-bmfont-text A short tutorial on how to create animated text in Three.js with three-bmfont-text and give it a nice look using shaders. Article

How to Create an Interactive 3D Character with Three.js In this in-depth tutorial you will learn how to create an interactive 3D character that follows the mouse and performs random animations on click. Article Demo

Case Study: Chang Liu Portfolio V4 Get insight on how to add 3D to a website using Three.js and make a wavy distortion effect in this case study of Chang Liu's new portfolio. Article Demo

How to Create Motion Hover Effects with Image Distortions using Three.js In this tutorial you will learn how to achieve interesting looking hover effects with image distortions using Three.js. Article Demo

Making Gooey Image Hover Effects with Three.js Learn how to create gooey reveal hover effects on images with Three.js using noise within a shader. Article Demo

Real-time Multiside Refraction in Three Steps In this tutorial you will learn how to make objects appear glass-like in three steps using Three.js. Article Demo

Creative WebGL Image Transitions A set of interesting looking image transitions including distortion and warp effects made with WebGL. Article Demo

High-speed Light Trails in Three.js A creative coding exploration into how to recreate a high-speed lights effect in real-time using Three.js. Article Demo

The New Features of GSAP 3 Learn about all the exciting new features of GSAP 3 in this easy-to-follow overview. Article

Creating a Distorted Mask Effect on an Image with Babylon.js and GLSL Learn the basics of GLSL while creating a distorted mask effect on images using Babylon.js. Article Demo

Motion Paths – Past, Present and Future The ability to animate along a motion path is a really useful thing to have in your SVG animation toolkit. Let's explore a few ways to achieve this, including the upcoming CSS motion path module and the newly released GSAP3. Demo

Building a Physics-based 3D Menu with Cannon.js and Three.js Learn the basics of doing physics in WebGL by building a 3D menu with Cannon.js and Three.js as renderer. Article Demo

Scroll, Refraction and Shader Effects in Three.js and React Discover how to use react-three-fiber and combine some common techniques to create a Three.js powered layout with shader effects. Article Demo

Case Study: Portfolio of Bruno Arizio A look behind the scenes of Bruno Arizio's portfolio with insight into the design process and an in-depth technical breakdown of the WebGL implementation. Article Demo

How to Create the Apple Fifth Avenue Cube in WebGL A tutorial on how to re-create the Apple Fifth Avenue Cube animation using WebGL. Article Demo