All Articles on Codrops

new-year roundup

A Look Back at 2017: Round-up of Codrops Resources

In Articles Dec 31, 2017 by Manoela Ilic

A look back at all Codrops resources of 2017. Thank you all for supporting us!

clip-path glitch hover

CSS Glitch Effect

In Tutorials Dec 21, 2017 by Manoela Ilic

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.

3d particles three-js webgl

3D Particle Explorations

In Playground Dec 12, 2017 by Jack Rugile

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.

slideshow svg

Creative SVG Strokes Animation

In Playground Dec 5, 2017 by Alaric Baraou

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

particles three-js webgl

Decorative WebGL Backgrounds

In Playground Nov 28, 2017 by Louis Hoebregts

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

morphing slideshow svg

Animated SVG Frame Slideshow

In Playground Nov 15, 2017 by Manoela Ilic

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

grid page-transition

Expanding Grid Item Animation

In Playground Nov 8, 2017 by Manoela Ilic

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.

css-only preloader

Kylo Ren CSS Page Preloader

In Playground Oct 31, 2017 by Petr Urbánek

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

menu overlay svg

Dynamic Shape Overlays with SVG

In Playground Oct 17, 2017 by Yoichi Kobayashi

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

distortion pixijs slideshow webgl

Liquid Distortion Effects

In Playground Oct 10, 2017 by Yannis Yannakopoulos

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

clip-path menu slideshow

Sliced Dual Image Layout

In Playground Sep 28, 2017 by Manoela Ilic

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

hover morphing page-transition svg

Organic SVG Shape Morph Ideas

In Playground Sep 19, 2017 by Manoela Ilic

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.