A round-up of all Codrops resources
A compilation of selected publications from the past year
Welcome to our annual year in review feature, where we bring together a collection of our best articles and resources from the past year.
This year has been full of fascinating developments and trends in the front-end world, and we've tried to bring you some of the cool new stuff around and spark some joy with creative ideas.
In this roundup, you'll find the most interesting articles from the past year, as we look ahead to exciting new things in the coming year.
Join us on a journey through the highlights of the past year!
January
2022-01-03
Building a Scrollable and Draggable Timeline with GSAP
By Michelle Barker
Learn how to build a scrollable and draggable horizontal timeline using GSAP's ScrollTrigger and Draggable plugins.
Article 2022-01-05
Crafting Scroll Based Animations in Three.js
By Bruno Simon
Learn how to create a scroll based animation in WebGL with Three.js.
Article Demo 2022-01-12
Pixel Distortion Effect with Three.js
By Yuriy Artyukh
An interactive WebGL pixel distortion effect with lots of possibilities based on the effect seen on the website for "Infinite Bad Guy".
Article Demo 2022-01-14
Case Study: Anatole Touvron’s Portfolio
By Anatole Touvron
A practical case study of Anatole Touvron’s Portfolio where you'll get some insight on the process and some valuable tips.
Article 2022-01-19
Animate Anything Along an SVG Path
By Louis Hoebregts
Learn how to code creative animations using SVG paths and the getPointAtLength() function.
Article 2022-01-26
Background Shift Animation with CSS Blend Modes
By Mary Lou
A background color shift effect using a CSS blend mode and a multi-layer animation.
Article Demo February
2022-02-22
Repetition Image Hover Effects
By Mary Lou
A simple and fun hover effect with repeated image layers that get scaled up and down.
Article Demo March
2022-03-01
Hover Preview Effect with Mini Map
By Mary Lou
An experimental hover effect, where a content preview is shown while a mini map indicates the position of the cursor.
Article Demo 2022-03-04
Creating Native Web Components
By Sergej Samsonenko
Learn how to create and use native web components with the Minze JavaScript framework.
Article Demo 2022-03-07
Creating a Risograph Grain Light Effect in Three.js
By Robin Payot
Learn two ways of applying a creative grain effect to 3D elements in Three.js.
Article Demo 2022-03-15
Expanding Rounded Menu Animation
By Mary Lou
An expanding menu animation with a cover unreveal effect in the background.
Article Demo 2022-03-23
Letter Shuffle Animation for a Menu
By Mary Lou
A little animation for a big menu where the letters of a word shuffle to become the first letter of each menu item.
Article Demo 2022-03-29
Building an Interactive Sparkline Graph with D3
By Michelle Barker
Learn how to build an interactive line graph using the D3 JavaScript library and CSS custom properties to create different color schemes.
Article April
2022-04-05
Lines to Content Layout Animation
By Mary Lou
A simple layout switch example where we go from a typography row view with inline images to a large image preview with more content.
Article Demo 2022-04-13
On-Scroll Text Repetition Animation
By Mary Lou
An on-scroll animation that shows repeated fragments of a big text as seen on the website of Dr. Dabber.
Article Demo 2022-04-20
How to Add More Fun to a Game: Extending “The Aviator”
By Michel Helms
A tutorial that explores some hands-on changes of "The Aviator" game to make it more fun and engaging.
Article Demo 2022-04-25
Case Study: Windland — An Immersive Three.js Experience
By Anderson Mancini
A look into the making of a mini-city full of post effects and micro-interactions using Three.js.
Article 2022-05-03
Image Trail Animation for an Intro
By Mary Lou
An intro animation concept with an initial loader and an intro screen that animates to a new layout using various effects.
Article Demo 2022-05-11
Stack to Content Layout Transition
By Mary Lou
An experimental layout transition where a stack of images animates to a gallery view, showing some more content.
Article Demo 2022-05-19
Image To Grid Transition
By Mary Lou
A simple transition where a large image animates to its place in a grid.
Article Demo 2022-05-31
Scroll Animation Ideas for Image Grids
By Mary Lou
Some ideas for animations on images in a grid when scrolling a page.
Article Demo 2022-06-08
How to Animate SVG Shapes on Scroll
By Mary Lou
A short tutorial on how to animate SVG paths while smooth scrolling a page.
Article Demo 2022-06-28
Make Way Grid Effect
By Mary Lou
A little grid interaction effect where adjoining items make way to a selected one that expands.
Article Demo 2022-07-06
How to Create a Cover Page Transition
By Mary Lou
Today we are looking under the hood of a page transition based on Vitalii Burhonskyi's Dribbble shot.
Article Demo 2022-07-13
Tiny Grid Layout Animation
By Mary Lou
A simple layout transition where a small grid animates to a larger view, using the Flip plugin from GreenSock.
Article Demo August
2022-08-03
Large Image to Content Page Transition
By Mary Lou
A simple scroll effect and page transition inspired by Vitalii Burhonskyi's Dribbble shot.
Article Demo 2022-08-17
Fullscreen Scrolling Slideshow
By Mary Lou
A fullscreen scroll-based slideshow with a content view powered by GreenSock's Observer plugin.
Article Demo 2022-08-24
Custom SVG Cursors with an Interactive Emitter Effect
By Marlène Bruhat
Several interactive cursor effects made with JavaScript and SVG.
Article Demo September
2022-09-07
3D Perspective Glitch Hover Effect
By Mary Lou
A fun hover effect that shows a pixelated image with a glitch animation inspired by the one seen on buōy's website.
Article Demo 2022-09-19
Menu to Grid Layout Animation
By Mary Lou
A simple layout animation where the thumbnails of a menu row animate to their position in a content preview grid.
Article Demo October
2022-10-05
On-Scroll Animation and View Switch
By Mary Lou
A layout with some scroll animations and a view switch where the content item images animate to a grid.
Article Demo 2022-10-12
Smooth Panel Scroll Effects
By Mary Lou
An exploration of smooth panel scroll effects based on Margot Priolet's website.
Article Demo November
2022-11-01
Unreveal Effects for Content Previews
By Mary Lou
Some explorations of page transitions using covering elements and CSS clip-paths.
Article Demo 2022-11-08
3D Typing Effects with Three.js
By Ksenia Kondrashova
A detailed tutorial on how to create typable 3D text with Three.js.
Article Demo 2022-11-22
Inline Layout Switch Ideas
By Mary Lou
Two ideas for animating images from an inline layout to a column or grid-based one.
Article Demo 2022-11-25
Conway’s Game Of Life – Cellular Automata and Renderbuffers in Three.js
By Jason Andrew
In this tutorial we will go over implementing the Game of Life in Three.js using ping pong buffering and off-screen renderbuffers.
Article Demo 2022-11-29
Sketchy Pencil Effect with Three.js Post-Processing
By Maya Nedeljković Batić
A tutorial where you'll learn how to create a pencil effect with a sketchy look using Three.js post-processing.
Article Demo December
2022-12-07
Tooltip to Gallery Transition
By Mary Lou
A concept for page transitions where a tooltip image animates to a gallery layout and fullscreen image.
Article Demo 2022-12-13
How to Code an On-Scroll Folding 3D Cardboard Box Animation with Three.js and GSAP
By Ksenia Kondrashova
A tutorial on how to create a 3D cardboard box that folds and unfolds on scroll using Three.js and the GSAP ScrollTrigger.
Article Demo Thank you to our valued advertisers and partners for their support. It is thanks to them that we are able to offer our resources at no cost to our users!
Happy New Year to all of our dear readers! We hope that this year is filled with all of the things that bring you joy and happiness. Thank you for being a part of our community and for choosing to spend your time with us. Here's to a fantastic year ahead!
Don't miss out
By subscribing, you'll get access to our curated selection of the best frontend news from around the web, as well as special digests with inspiration & experiments, and exclusive content that we've created just for our subscribers.