A look back at2016

A round-up of all Codrops resources of 2016

Every year we make a little summary of all our posts on Codrops.

This year was a truly interesting and creative year. It was filled with bold design choices, new interactive technologies and less conformity.

Geometric shapes, liquid looks and irregular layouts were big in 2016. Embracing the past with retro love and recognizing small, meaningful interactions as crucial was a big motto. Also, letting go of old habits and welcoming new methods and technologies made part of this year.

Let's carry this fresh, sophisticated spirit over to the next year!

And now, join us for a look back at 2016!

Cinema Seat Preview Experiment

An experimental demo where a 3D perspective preview is shown for a selected seat in a cinema room.

Animated Heat Distortion Effects with WebGL

A tutorial on how to use fragment shaders in WebGL to create an animated heat haze distortion effect on images and text.

Read the tutorial

The Making of "The Aviator": Animating a Basic 3D Scene with Three.js

A tutorial that explores the basics of creating animated 3D scenes using Three.js.

Read the tutorial

Background Segment Effect

A background image segment effect as seen on Filippo Bello's Portfolio, employing the CSS clip-path property and powered by anime.js.

Isometric and 3D Grids

Some experimental isometric and 3D grids. The idea is to use isometric/3D grids as decorative elements or with some interaction.

Interactive Record Player

An experimental template with an interactive old school record player powered by the Web Audio API.

Simple Interactive Points Effect

An interactive transparency background effect that makes images visible when specific points are hovered, showing some content once clicked.

Check out the demo

Inspiration for Navigation Indicators

Some navigation style ideas for slideshows, pages and other components that require a navigation. Shown on the example of a vertical slideshow.

How to Create an Interactive Animated SVG Drum Kit

A tutorial on how to create an animated and interactive SVG drum kit with GSAP and jQuery.

Read the tutorial

Line Maker: Animated Decorative Lines

The Line Maker is a plugin for creating and animating decorative lines on websites. Inspired by site designs like 'Uber Brand Experience' and 'Details'.

Fancy SVG Letter Animation

An experimental SVG letter animation based on the Dribbble shot "Shading Letters in Illustrator" by Jake Bartlett. Powered by Julian Garnier's anime.js.

Artsy Media Pop Up Effect

A fun experiment with proof-of-concepts for various simple media pop ups on hover or touch. The idea is to show images, videos or other media in a pop up style with different effects.

Creative SVG Letter Animations

An experimental plugin for animating SVG letters using Segment, a JavaScript helper for drawing and animating SVG path strokes. The idea is to animate the path strokes of an interesting display font in a creative way.

Read the tutorial

Block Reveal Effects

Ideas for revealing content in a schematic box look as seen around the Web lately. The effect first shows a decorative block element drawn and when it starts to decrease its size, it uncovers some content underneath.

Elastic Circle Slideshow

A very simple content slideshow with circular slides and an elastic, bouncy navigation effect. Inspired by the Dribbble shot "Mobile Commerce Interface" by Bilal Mechairia.

Surf Report Template

A simple template of a weekly surf report with an animated SVG graph and a sliding content panel. The layout is powered by flexbox and viewport units. Highly experimental.

Distorted Button Effects with SVG Filters

A set of inspirational, highly experimental distortion effects for buttons using SVG filters.

View the demo

Inspiration for Line Menu Styles

Some ideas for menu styles and effects that employ the line as a creative design element. This is an open collection — contributions are welcome!

Interactive Musical Instruments

Experimental ideas for playful musical interactions powered by MIDI.js and the Web Audio API. Play instruments or make sounds by interacting with content.

Spring Loaders with Rebound and Canvas

A tutorial on how to create a loading spinner made with inscribed polygons and animated with Rebound spring motion.

Read the tutorial

Polaroid Stack to Grid Intro Animation

A tutorial on how to create an intro animation where a decorative Polaroid stack becomes a grid similar to the effect seen on the 'takeit' website.

Read the tutorial

Icon Animations Powered by mo.js

Various icon animations made with mo.js, a powerful motion graphics library by Oleg Solomka. Inspiration comes from the Dribbble shot "Like Animation" by Daryl Ginn.

View the demo

Animated Animals in CSS and SVG

Learn some interesting animation techniques involving Sass and SVG filters for realistic motion effects on the example of animated animals. A Chrome-only experiment.

Read the tutorial

Tilt Hover Effects

Some ideas for hover animations with a fancy tilt effect. Inspired by the hover effect seen on the Kikk 2015 website.

Interactive 3D Mall Map

An interactive 3D mall map concept with a sidebar search and pin indicators for every level.

Multi-Layer Page Reveal Effects

A tutorial on how to create multi-layer page reveal effects with a couple of ideas for inspiration.

Read the tutorial

Item Reveal Animations with SVG

A set of inspirational, highly experimental distortion effects for buttons using SVG filters.

Multi-Layout Slideshow

A simple decorative slideshow component with individual slide layouts and effects. Powered by anime.js.

Above & Beneath: Featured Content Layout Effect

A landing page template with a featured content section and background sounds that change according to the view.

Transition Effect with CSS Masks

A tutorial on how to use CSS Masks to create some interesting looking slide transitions. Highly experimental!

Read the tutorial

Cubes Advent Calendar

A 3D cubes Advent calendar with fun hover effects and background color animations. Clicking the boxes opens another content level with different element animations.

Inspiration for Letter Effects

The Line Maker is a plugin for creating and animating decorative lines on websites. Inspired by site designs like 'Uber Brand Experience' and 'Details'.

Freebies

This year we had many great freebies with creative topics and themes — from Yoga to virtual reality and urban gardening!

  • KitchenIcons_800x600

    Kitchen Tools & Appliances Icons

  • GeekyChristmas

    Geeky Christmas Vector Set + Patterns

  • Freebie_WinterSportsIcons

    Winter Sports Icons

  • Freebie_VirtualReality

    Virtual Reality Icons

  • Freebie_WaterSports

    Water Sports Icons

  • Freebie_SportsGames

    Sports & Games Icons

  • FreebieHousesBuildingsIcons

    Houses & Buildings Icons

  • Freebie_YogaIcons

    Yoga Icons

  • UrbanGardeningFeatured

    Urban Gardening Icons

  • FreebieCreativityLearning

    Creativity & Learning Icon Set

  • Freebie_MeditationSpa

    Meditation & Spa Icons

  • Synthetica_800x600

    "Synthetica" One Page Website Template

  • OfficeIcons

    Responsive Office Icons

  • SpaceIcons

    Astronomy & Space Icons

  • EnvironmentalIcons

    Environmental Icons

  • Freebie_Delivery

    Checkout & Delivery Icons

  • pollutioniconset

    Pollution & Energy Icons

  • ScienceIcons

    Science Line Icons

If you'd like to publish your exclusive freebie on Codrops, just drop us a line.

Collectives

This year our Collective has become a bi-weekly news magazine that collects the most interesting design and dev resources around the Web, every Wednesday and Saturday.

Subscribe to our RSS feed to receive them.
You can also get the feed as email.

If you'd like to submit something, just use the Collective submission form.

Our Contributors

An enormous thank you goes to all our excellent contributors who created and maintained fantastic content for Codrops this year!

  • Claudio Calautti

  • Lucas Bebber

  • Hui Jing Chen
    (CSS Reference)

  • Luis Manuel

  • Karim Maaloul

  • David Khourshid

  • Josh Ellis

  • Manuela Langella

  • Adrien Denat

  • Robin Delaporte

  • Peter Finlan

  • Dale Humphries

  • Anastasia Ageeva

  • Tatiana Lapina

  • Benjamin Bely

  • PixelBuddha

  • Brook Wells

  • Juan Sarmiento

  • Icons8

  • Freepik

  • Epic Coders

  • Eezy Inc.

  • You!

We'd also like to thank BuySellAds.com.
They make our work possible!

“You must understand the whole of life, not just one little part of it. That is why you must read, that is why you must look at the skies, that is why you must sing, and dance, and write poems, and suffer, and understand, for all that is life.”
— Jiddu Krishnamurti

Have a thriving 2017 everybody!

Thank you all for supporting us!
From the heart,

Codrops 2016

Follow us: Twitter Facebook Google+