A look back at2017

A round-up of all Codrops resources of 2017

2017 was an exciting and incredibly accelerated year for web designers and developers with technologies like CSS Grid and Virtual Reality being major game changers. The power of AI is emerging and the unleashing of its full potential in web development is imminent.

Web design has never been so exciting, with vibrant colors and old friends, like gradients, being rediscovered and brought to a new level. Playful shapes, impossible designs and interactions powered by technologies like WebGL were mighty this year.

We're excited to embrace a new year of inspiring changes and see the web landscape evolve into positive complexity despite ever growing attacks on internet freedom. Remember, your choices matter.

Join us for a look back at 2017!

Mirror Effect

A mirror effect as it was seen around in 2017, i.e. on Corentin Fardeau's and Method's website. The idea is to mirror an image and animate it within the context of a slideshow.

Little Fragments: Creating a Simple Image Poster Effect

A tutorial on how to create a simple image effect with little image fragments inspired by some poster art and powered by clip-path.

Read the tutorial

First Person Sunglasses Try-On Experiment

A fun "try-on" experiment that shows a first person view through the colored lenses of sunglasses, mimicking the movement of putting them on and off.

Inspiration for Search UI Effects

A couple of schematic, inspirational proof-of-concepts for how to show the search interface on a website using CSS animations.

Stack Motion Hover Effects

Some experimental hover effects that reveal a stack of multiple colored cards behind the hovered item.

Experimental 3D Room Exhibition Layout

A highly experimental 3D room layout for a gallery that aims to show exhibition details in an interesting way.

Expanding Bar Navigation Concept

An experimental tab-like navigation concept where a content area is opened with an animation once an item is clicked.

Inspiration for Grid Loading Animations

A set of grid loading animations for your inspiration. The idea is to show grid items with an interesting effect once they are loaded.

Developer/Designer Page Layout Concept

An experimental page layout concept with a developer/designer theme and a special image reveal effect.

Letter Effects and Interaction Ideas

A couple of ideas for typography animations and letter (hover) effects for playful interactions.

WebGL Scroll Spiral

A couple of decorative and inspirational WebGL background scroll effects for websites powered by regl. The idea is to twist some images and hexagonal grid patterns on scroll, creating an interesting effect.

Infinite Tubes with Three.js

Some WebGL experiments where the viewer seemingly travels through a textured tunnel. Powered by Three.js and inspired by the effect seen on fornasetti.com.

Folder Preview Ideas

Some ideas for previewing or just playing with folders on hover. The idea is to show a little animation when hovering a folder icon and reveal some kind of preview for what's inside.

On-Scroll Morphing Background Shapes

A decorative website background effect where SVG shapes are morphing and transforming on scroll.

Playful Little Tooltip Ideas

Some little ideas for bouncy and playful tooltip shapes and animations with SVG and anime.js. Among other styles, we use shape morphing and transform.

Organic Shape Animations with SVG clipPath

Some shape morphing hover effects on images using SVG clipPath. The idea is to create an organic, fluid feel by animating several elements on hover.

CSS Grid Layout Slideshow

A slideshow where each slide has an individual CSS grid layout and a reveal effect when navigating.

Animated Image Pieces

A set of experiments with an animated image pieces effect where an image gets shattered into rectangular fragments. Powered by anime.js.

Inspiration for Menu Hover Effects

Some menu link hover effects for your inspiration. Powered by CSS and JavaScript for individual letter animations.

Morphing Page Transition

A simple morphing page transition effect where an SVG path gets morphed into another while the current page moves up.

Organic SVG Shape Morph Ideas

A small set of ideas for organic shape effects. The demos show some ways to use animated SVG morphs interactively on a website, including a menu hover and a content reveal effect.

Dynamic Shape Overlays with SVG

Some ideas for multi-layered SVG shape overlays that get generated dynamically with adjustable properties for a variety of effects.

Sliced Dual Image Layout

Some layouts with sliced background images, slideshow functionality and glitch effect.

Liquid Distortion Effects

A slideshow with liquid distortion effects in WebGL powered by PixiJS and GSAP.

Kylo Ren CSS Page Preloader

A Star Wars Kylo Ren page preloader made with HTML and CSS only.

Expanding Grid Item Animation

A grid item animation where the thumbnail scales up when the details view is opened. Based on the Dribbble shot "Surf Project" by Filip Slováček.

Animated SVG Frame Slideshow

An experimental slideshow that shows an animated SVG frame when transitioning between slides. Different shapes can be used for creating a variety of styles.

Decorative WebGL Backgrounds

A collection of decorative shapes displayed as backgrounds using WebGL. The shapes are created with Three.js and animated with the TweenMax library.

Creative SVG Strokes Animation

A creative strokes animation of a bike illustration powered by SVG and GSAP.

3D Particle Explorations

An inspirational set of demos that explores particle animations in 3D space with three.js. This type of animations could be very suitable for page loaders.

CSS Glitch Effect

An experimental glitch effect powered by CSS animations and the clip-path property. Inspired by the technique seen on the speakers page of the 404 conference.

CSS Reference

We've published a couple of CSS Reference entries, among them a complete guide to CSS Grid.

Freebies

We also released some freebies this year:

Dusk UI Icons (SVG, EPS, PDF, PNG)
EGO Illustrations (AI, Sketch, SVG)
Hand-drawn Geek’s Treasure Chest (AI, EPS, PDF, SVG, PNG)
Drone Icons (AI, Sketch, SVG, PNG, Iconjar)
Smoothies Icon Set (AI, SVG, PNG)

Collectives

Counting 378 Collectives, we have strived to collect the most interesting and inspiring web design and development news throughout the year.

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

Send us news items via the Collective submission form.

Collective Cover

Our Contributors

We had some fantastic contributions by our authors this year!
A big thank you to all of you!

Louis Hoebregts
Hui Jing Chen
(CSS Reference)
Jack Rugile
Alaric Baraou
Petr Urbánek
Yoichi Kobayashi
Yannis Yannakopoulos
Xoihazard
Icons8
Webalys
Tatiana Lapina
Round Icons
Manuela Langella
You!

And that was 2017 :)

Check out the previous editions of our yearly roundups:

We wish you all a healthy and exciting new year!

“You can't use up creativity. The more you use, the more you have.”
— Maya Angelou

Thank you all for supporting us!
From the heart,

Codrops 2017

Follow us: Twitter Facebook Instagram