codrops
Tw In Fb

A roundup of selected publications from the past year

2021

January

Creating an Infinite Auto-Scrolling Gallery using WebGL with OGL and GLSL Shaders

Creating an Infinite Auto-Scrolling Gallery using WebGL with OGL and GLSL Shaders

A tutorial explaining how to build an infinite auto-scrolling gallery using WebGL with OGL and GLSL Shaders.

Article Demo
Drawing 2D Metaballs with WebGL2

Drawing 2D Metaballs with WebGL2

An in-depth tutorial on how to code 2D visuals using WebGL2.

Article Demo
On-Scroll Letter Animations

On-Scroll Letter Animations

A small set of examples showing how letters can be animated on scroll.

Article Demo
Twisted Colorful Spheres with Three.js

Twisted Colorful Spheres with Three.js

Learn how to deform and color spheres to create an interesting animation with Three.js.

Article Demo

February

Rotating Loading Animation of 3D Shapes with Three.js

Rotating Loading Animation of 3D Shapes with Three.js

Some rubber-like 3D shape rotations that are perfect for loading animations.

Article Demo
Simple CSS Line Hover Animations for Links

Simple CSS Line Hover Animations for Links

A couple of simple & subtle CSS-based line hover animations for links.

Article Demo
Ideas for CSS Button Hover Animations

Ideas for CSS Button Hover Animations

Some inspiration for button hover animations using CSS only.

Article Demo
Creating an Infinite Circular Gallery using WebGL with OGL and GLSL Shaders

Creating an Infinite Circular Gallery using WebGL with OGL and GLSL Shaders

A tutorial explaining how to build a draggable and scrollable infinite circular gallery using WebGL with OGL and GLSL Shaders.

Article Demo

March

Circular SVG Text Animation

Circular SVG Text Animation

Exploring some experimental circular SVG text effects for an intro animation.

Article Demo
Shape Slideshow with Clip-path

Shape Slideshow with Clip-path

An experimental slideshow using clip-path to create shape transitions between slides.

Article Demo
Tropical Particles Rain Animation with Three.js

Tropical Particles Rain Animation with Three.js

A WebGL particle rain animation resulting in an interesting image effect made with Three.js.

Article Demo
Distributed Letters Animation Layout

Distributed Letters Animation Layout

A distributed letters animation in the context of a triple panel layout with hover effect.

Article Demo

April

Preview to Full Content Page Transition

Preview to Full Content Page Transition

An experimental page transition concept for magazines and blogs where an excerpt item opens for a full page view.

Article Demo
Magnetic 3D Grid Interaction with Content Preview

Magnetic 3D Grid Interaction with Content Preview

A grid layout with a magnetic 3D interaction effect and a content preview animation.

Article Demo
Rotated 3D Letters and Image Hover Effect

Rotated 3D Letters and Image Hover Effect

A rotated 3D like letters hover effect combined with a tilted image for a menu.

Article Demo

May

Dynamic CSS Masks with Custom Properties and GSAP

Dynamic CSS Masks with Custom Properties and GSAP

Learn how to animate CSS masks based on the cursor position using GSAP and custom properties for a unique spotlight effect.

Article Demo
How to Code a Crosshair Mouse Cursor with Distortion Hover Effect

How to Code a Crosshair Mouse Cursor with Distortion Hover Effect

A quick tutorial on how to craft a fullscreen SVG crosshair mouse cursor with a special distortion hover effect.

Article Demo

June

Trigonometry in CSS and JavaScript: Introduction to Trigonometry

Trigonometry in CSS and JavaScript: Introduction to Trigonometry

In this series of articles we’ll get an overview of trigonometry, understand how it can be useful, and delve into some creative applications in CSS and JavaScript.

Article
Trigonometry in CSS and JavaScript: Getting Creative with Trigonometric Functions

Trigonometry in CSS and JavaScript: Getting Creative with Trigonometric Functions

In the second part of this series on trigonometry, we’ll explore JavaScript trigonometric functions and learn how we can apply them to our CSS code.

Article
Trigonometry in CSS and JavaScript: Beyond Triangles

Trigonometry in CSS and JavaScript: Beyond Triangles

In part three of our series we’ll look at how to create more interesting shapes with trigonometry, and how to draw them with the Canvas API.

Article
Thumbnail Hover Effect with SVG Filters

Thumbnail Hover Effect with SVG Filters

A simple thumbnail hover effect with an SVG filter distortion.

Article Demo
Drawing Graphics with the CSS Paint API

Drawing Graphics with the CSS Paint API

A practical introduction to the CSS Paint API with hands-on examples.

Article
Inline to Menu Link Animation

Inline to Menu Link Animation

An experimental inline-to-menu-link animation based on a concept by Matthew Hall.

Article Demo
How to Code the K72 Marquee Hover Animation

How to Code the K72 Marquee Hover Animation

Learn how to recreate the direction-aware marquee menu hover effect seen on the website of K72 by Locomotive.

Article Demo

July

Rock the Stage with a Smooth WebGL Shader Transformation on Scroll

Rock the Stage with a Smooth WebGL Shader Transformation on Scroll

A handy setup to create a smooth scroll based GLSL animation using Three.js and GSAP.

Article Demo
Creating a Typography Motion Trail Effect with Three.js

Creating a Typography Motion Trail Effect with Three.js

Learn how to use WebGL framebuffers via Three.js to create an interactive motion trail effect for text.

Article Demo
Layout with Reveal Animations and Content Preview

Layout with Reveal Animations and Content Preview

Some experimental reveal animations on typographic elements as repeating pattern for a website design.

Article Demo

August

Magical Marbles in Three.js

Magical Marbles in Three.js

Adding volumetric effects to a built-in Three.js shader.

Article Demo
Superhero Animation Effect with SVG Filters

Superhero Animation Effect with SVG Filters

Learn how to create an interactive superhero-like illustration effect for the web using SVG filters and masks.

Article Demo
Create an Abstract Image Slideshow with OGL, GLSL, and GSAP

Create an Abstract Image Slideshow with OGL, GLSL, and GSAP

Learn how to create a WebGL-powered image slideshow animated using a single value.

Article Demo
Surface Sampling in Three.js

Surface Sampling in Three.js

Learn how to use the MeshSurfaceSampler in Three.js to create interesting effects.

Article Demo

September

Menu and Thumbnail Stack Animation

Menu and Thumbnail Stack Animation

An animation on an image stack for a menu where the images get rearranged from a column into a row.

Article Demo
Kinetic Typography Page Transition

Kinetic Typography Page Transition

A concept for a kinetic typography based page transition where background letters come into the foreground and reveal a new content level.

Article Demo

October

Creating 3D Characters in Three.js

Creating 3D Characters in Three.js

Are you looking to get started with 3D on the web? In this tutorial we’ll walk through creating a three-dimensional character using Three.js, adding some simple bu

Article
How to Implement and Style the Dialog Element

How to Implement and Style the Dialog Element

Go in-depth on the native dialog HTML element with this tutorial and learn how to implement a user-friendly, accessible dialog on your website.

Article
Repetitive Typography Animation

Repetitive Typography Animation

An experimental typography animation based on a kinetic type design by Domagoj Štrok where words get duplicated several times.

Article Demo
The Process of Building a CSS Framework

The Process of Building a CSS Framework

A behind-the-scenes look at making a CSS framework and a tutorial on how to build a website with it.

Article
Creating the Effect of Transparent Glass and Plastic in Three.js

Creating the Effect of Transparent Glass and Plastic in Three.js

Learn how to create convincing transparent, glass-like and plastic-like materials in Three.js.

Article Demo

November

SVG Overlay and Infinite Menu Background Animation

SVG Overlay and Infinite Menu Background Animation

A little menu effect with an SVG overlay and an infinite background CSS animation.

Article Demo
Slideshow with Filter Reveal Effect

Slideshow with Filter Reveal Effect

A slideshow page layout with a filter enhanced navigation effect.

Article Demo

December

Grid Zoom Layout

Grid Zoom Layout

A simple image grid layout where a small grid image zooms to become larger while a content view opens.

Article Demo
Coloring With Code — A Programmatic Approach To Design

Coloring With Code — A Programmatic Approach To Design

Learn to create beautiful, inspiring, and unique color palettes/combinations, all from the comfort of your favorite text editor!

Article
Alternate Column Scroll Animation

Alternate Column Scroll Animation

A grid layout with columns that scroll in opposite directions and a content preview animation.

Article Demo

A happy new year to all our readers! Much love from all the folks at Codrops ❤ ❤ ❤ ❤ ❤

2022