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!



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.


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

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

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.


Animate Anything Along an SVG Path

By Louis Hoebregts

Learn how to code creative animations using SVG paths and the getPointAtLength() function.


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



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



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

Creating Native Web Components

By Sergej Samsonenko

Learn how to create and use native web components with the Minze JavaScript framework.

Article Demo

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

Expanding Rounded Menu Animation

By Mary Lou

An expanding menu animation with a cover unreveal effect in the background.

Article Demo

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

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.




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

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

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

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.




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

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

Image To Grid Transition

By Mary Lou

A simple transition where a large image animates to its place in a grid.

Article Demo

Scroll Animation Ideas for Image Grids

By Mary Lou

Some ideas for animations on images in a grid when scrolling a page.

Article Demo



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

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



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

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



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

Fullscreen Scrolling Slideshow

By Mary Lou

A fullscreen scroll-based slideshow with a content view powered by GreenSock's Observer plugin.

Article Demo

Custom SVG Cursors with an Interactive Emitter Effect

By Marlène Bruhat

Several interactive cursor effects made with JavaScript and SVG.

Article Demo



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

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



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

Smooth Panel Scroll Effects

By Mary Lou

An exploration of smooth panel scroll effects based on Margot Priolet's website.

Article Demo



Unreveal Effects for Content Previews

By Mary Lou

Some explorations of page transitions using covering elements and CSS clip-paths.

Article Demo

3D Typing Effects with Three.js

By Ksenia Kondrashova

A detailed tutorial on how to create typable 3D text with Three.js.

Article Demo

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

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

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



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

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

A huge shoutout to our writers! Thanks for being a part of the crew and bringing your A-game while sharing your skills and talent!

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!

Baw Agency
Post Apex
Elegant Themes

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!