2020
46 |A roundup of selected Codrops publications from the past year
47 |
Recreating a Dave Whyte Animation in React-Three-Fiber
55 |Learn how to use instanced rendering and post-processing techniques to recreate a hypnotic looping animation with react-three-fiber.
56 | Article 57 | Demo 58 |
Horizontal Smooth Scroll Layouts
63 |Some ideas for horizontal smooth scrolling layouts powered by Locomotive Scroll.
64 | Article 65 | Demo 66 |
Crafting a Scrollable and Draggable Parallax Slider
71 |A tutorial on how to build a slider with an interesting parallax effect that you can either scroll or drag through.
72 | Article 73 | Demo 74 |
Image Stack Intro Animation
79 |Two simple intro animations where an image stack moves to become a grid.
80 | Article 81 | Demo 82 |
Inline Menu Layout with Gallery Panel
87 |An inline menu layout with a playful hover animation and a gallery content preview panel.
88 | Article 89 | Demo 90 |
Scroll Animations for Image Grids
95 |Some ideas for scroll animations for image grids powered by Locomotive Scroll.
96 | Article 97 | Demo 98 |
WebGL Video Transitions with Curtains.js
103 |Some experimental video transitions using Curtains.js and shaders.
104 | Article 105 | Demo 106 |
Creating Mirrors in React-Three-Fiber and Three.js
111 |A brief walk-through of how to create a mirror scene with react-three-fiber.
112 | Article 113 | Demo 114 |
Menu to Inner Page Animation with Image Grid Background
119 |A layout with a menu and background image grid that animates to an inner content page.
120 | Article 121 | Demo 122 |
Diagonal Thumbnail Slideshow Animation
127 |A simple slideshow with tilted thumbnails and large titles that animate when navigating.
128 | Article 129 | Demo 130 |
Experimental Triangle Image Transitions with WebGL
135 |Some experimental animations using triangles for image transitions with WebGL.
136 | Article 137 | Demo 138 |
Thumbnail to Full Width Image Animation
143 |An experimental animation where an image goes from thumbnail to full width, allowing for a classy entry to an article view.
144 | Article 145 | Demo 146 |
Magnetic Buttons
151 |A small set of magnetic buttons with some fun hover animations.
152 | Article 153 | Demo 154 |
Exploring Animations for Menu Hover Effects
159 |A couple of ideas for creative menu hover animations with images.
160 | Article 161 | Demo 162 |
Creating a Menu Image Animation on Hover
167 |A tutorial on how to create a hover effect for a menu where images appear with an animation on each item.
168 | Article 169 | Demo 170 |
A Glitchy Grid Layout Slideshow
175 |An experimental grid slideshow with a stack-like navigation and glitch effect.
176 | Article 177 | Demo 178 |
Making Stagger Reveal Animations for Text
183 |A short tutorial on how to recreate a letter stagger animation with GSAP and Splitting.js.
184 | Article 185 | Demo 186 |
How to Create a Motion Hover Effect for a Background Image Grid
191 |A short tutorial on how to achieve a motion hover effect on a background image grid.
192 | Article 193 | Demo 194 |
Kinetic Typography with Three.js
199 |Discover how to use Three.js to render kinetic 3D typography.
200 | Article 201 | Demo 202 |
An Infinitely Scrollable Vertical Menu
207 |A quick look at how an infinitely scrollable menu works based on a looping scroll illusion of cloned items.
208 | Article 209 | Demo 210 |
Morphing Gooey Text Hover Effect
215 |Three gooey morphing hover effects using SVG filters for menu links based on a demo by Graham Pyne.
216 | Article 217 | Demo 218 |
Interactive WebGL Hover Effects
223 |A simple tutorial on how to achieve an interactive mouseover/hover effect on images in some easy steps.
224 | Article 225 | Demo 226 |
Rapid Image Layers Animation
231 |A rapid animation of multiple layers of images for intros or page transitions.
232 | Article 233 | Demo 234 |
CSS-Only Marquee Effect
239 |A simple CSS-only marquee effect for a menu based on Francesco Zagami's Dribbble shot.
240 | Article 241 | Demo 242 |
Animated Custom Cursor Effects
247 |Some ideas for interactive custom cursor animations using SVG filters.
248 | Article 249 | Demo 250 |
Ideas for Distorted Link Effects on Menus
255 |Some examples of how to use decorative distortion effects on big typography menu links.
256 | Article 257 | Demo 258 |
Create a Wave Motion Effect on an Image with Three.js
263 |Learn how to make a wave motion effect on an image with Three.js.
264 | Article 265 | Demo 266 |
Background Scale Hover Effect with CSS Clip-path
271 |A simple recreation of the background scale hover effect seen on the DDD Hotel website using CSS clip-path.
272 | Article 273 | Demo 274 |
Distorted Link Effects with SVG Filters
279 |A couple of ideas for decorative link distortion effects using SVG filters on lines, circles and squares.
280 | Article 281 | Demo 282 |
Animating SVG Text on a Path
287 |A demo that shows how to animate SVG text on a path on scroll using the Intersection Observer API and SVG filters.
288 | Article 289 | Demo 290 |
Audio-based Image Distortion Effects with WebGL
295 |Some experiments that show how to make audio-based distortion effects on images with p5.js and its sound library.
296 | Article 297 | Demo 298 |
How to Create a Physics-based 3D Cloth with Cannon.js and Three.js
303 |Learn how to create a physics-based 3D cloth with Cannon.js and Three.js and use simplex noise to create a wind effect.
304 | Article 305 | Demo 306 |
Crafting a Cutout Collage Layout with CSS Grid and Clip-path
311 |Learn how to code up an interesting design with a cutout image look using CSS Grid and clip-path.
312 | Article 313 | Demo 314 |
Image Dragging Effects
319 |A set of playful dragging effects for images using various techniques.
320 | Article 321 | Demo 322 |
How to Create Procedural Clouds Using Three.js Sprites
327 |Learn how to simulate a cloud on a Three.js Sprite using React-Three-Fiber.
328 | Article 329 | Demo 330 |
How to Unroll Images with Three.js
335 |Discover the basic concept behind an unrolling image effect using WebGL.
336 | Article 337 | Demo 338 |
Case Study: itsnotviolent.com
343 |A case study that explores the motivation, design and implementation behind the itsnotviolent.com awareness campaign website made by Locomotive.
344 | Article 345 |Our Sponsors
365 |366 | Thank you, BuySellAds, Syndicate Ads, ThoughtLeaders and Bawmedia for making Codrops possible.
367 |Subscribe
to Codrops
370 | 371 | Receive the Collective (max. twice a week) and our official newsletter (once a month) right in your inbox. 372 |
373 |