223 open source projects by codrops

A couple of simple & subtle line hover animations for links using CSS only.

A dynamic grid layout that let's you choose how many rows and columns of items are shown. Partly based on the visualization of Google Trends, except that you can add transitions.

A set of effects for mouse-following image trails that show a random series of images.

A text trail effect for a slideshow inspired by the "Abstract is hiring" Dribbble shot.

A template with a magazine-like layout and a flat page flip animation

An experimental SVG letter animation inspired by the Dribbble shot ["Shading Letters in Illustrator"](https://dribbble.com/shots/2943049-Shading-Letters-in-Illustrator) by Jake Bartlett's. Powered by Julian Garnier's [anime.js](http://anime-js.com/).

A simple grid-powered multibox menu that shows with a reveal animation.

A plugin that animates an artistic font using Segment, the SVG strokes animation library. By Luis Manuel.

A responsive product grid layout with touch-friendly Flickity galleries and Isotope-powered filter functionality.

A template for a split layout with two sides. When clicking on a half in the initial view, the layout moves into the respective direction with some transition effects.

Animated rotated overlays, or "reveal" elements for interesting page transition effects.

A tutorial on how to create a simple category slider with a minimal design using CSS animations and jQuery. The idea is to slide the items sequentially depending on the slide direction.

A tutorial on how to recreate the effect of YouTube's little left side menu. The idea is to slide a little menu icon to the right side while revealing some menu item list beneath.

Some inspiration for transition effects for off-canvas navigations.

A draggable menu that shows a thumbnail preview of an image grid

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

Some inspiration and modern ideas for subtle hover effects.

A small set of ideas for organic shape effects with SVG.

Animated icons powered by the motion graphics library mo.js by Oleg Solomka. Inspiration comes from the Dribbble shot ["Like Animation"](https://dribbble.com/shots/2527200-Like-Animation) by Daryl Ginn.

Some simple ideas for enhancing the checkout process.

A simple content slider with depth-like zoom functionality for a predefined area in each slide.

Some ideas for modern multi-layer page transitions using CSS Animations.

Some ideas for interactive custom cursor animations using SVG filters.

An implementation of Gil Huybrecht “Outdoors” design project powered by layered CSS grids.

An experimental image slider that flips through images in 3D. Two stacks resemble image piles where images will be lifted off from and rotated to the center for viewing.

Visual feedback for password strength on an image based on Colibro's sign up form.

Some ideas for decorative link distortion effects using SVG filters.

This is a simple tooltip menu that will show a tooltip submenu when hovering over an item. The submenu will either appear above or below the main menu, depending on where more space is available. Using Modernizr's touch detection, the menu will either react on hover or on click. Example media queries show how to adjust the style for smaller screens.

A gooey text hover effect using SVG filters

A slideshow that uses a CSS glitch effect for slide transitions.

A basic responsive product grid layout with comparison functionality and a slide-in effect.

An experimental morphing device slideshow with CSS Transitions for showcasing responsive web design screenshots.

An experimental layout where image columns get animated when a menu item is clicked.

A tutorial on how to create shaded CSS-only progress bars with Sass. By Rafael González.

Some experimental pop up hover/touch effects for little media items.

A horizontal slide out menu with a grid-like thumbnail layout for the submenu. With media query examples for smaller devices.

A couple of styles and inspiration for responsive, flexbox-based HTML pricing tables.

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

A simple view mode switch that has two example layouts, a grid and a list.

Some experiments with the new staggering system of Anime.js

Some ideas for horizontal smooth scroll layouts and animations using Locomotive Scroll

A mobile "pull to share" interaction that allows to share a page by using the familiar "pull to refresh" movement. Based on the [action](https://plus.google.com/+Chrome/posts/1GyqEu2opAE) for refreshing and opening/closing a tab in Google Chrome for mobile.

An experimental circular SVG text animation

A draggable image strip layout with a content preview powered by Draggabilly and TweenMax.

A very simple 100% width slider that scales down to mobile.

An experimental slider pagination using the jQuery UI slider. The idea is to use a simple navigation concept that preserves layout and style while allowing content to stay easily accessible.

A responsive product grid layout with some UI details for inspiration.

A layout with a fullscreen header that slides up to reveal a content area with an image grid.

Some experimental rain and water drop effects in different scenarios using WebGL, by Lucas Bebber.

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