223 open source projects by codrops

An experimental slideshow that shows an animated SVG frame when transitioning between slides.

A set of buttons with a magnetic interaction and a hover effect.

Demo of a tutorial on how to add smooth page scrolling with an inner image animation

A retro-style grid layout with a playful motion hover effect on the grid items.

A responsive grid gallery based on the [Google Chromebook getting started](https://gweb-gettingstartedguide.appspot.com/) guide gallery. In this Blueprint we use Masonry for the grid and 3D transforms for navigating the items.

A tutorial on how to create a motion blur effect on HTML elements using JavaScript and an SVG filter.

An on scroll effect template that animates the sides of sections once they are in the viewport.

Mirror effect as seen around the Web lately, 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.

A draggable slideshow with two views: fullscreen and small carousel. In fullscreen view, a related content area can be viewed.

A simple menu with multiple levels and an optional breadcrumb navigation and back button.

Some ideas for interacting, previewing or just playing with folders on hover

Some ideas for modern and subtle button styles and effects

Various hover tooltip styles, shapes and effects for your inspiration.

WebGL Scroll Spiral

A jQuery Plugin for Swift Content Navigation

Demo for the tutorial on how to animate an SVG menu icon based on Tamas Kojo's Dribbble shot hamburger menu and implemented Segment. By Luis Manuel.

Some inspiration for playful typographical effects and hover interactions on letters.

A switching title effect where a fixed element changes depending on the scroll position.

Some inspiration for effects on image grids. The ideas include animations on the opening grid item, the disappearance of the grid and the resulting view.

Grid item animation based on the Dribbble shot "Surf Project" by Filip Slováček.

A set of subtle effects and styles for simple dot navigation.

A highly experimental jQuery plugin that let's you unfold elements to reveal more content just like a piece of paper. Unfolding directions and number of steps can be specified.

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

A template where one can switch between little image previews that are scattered around the page.

Hover effect as seen on The Christmas Experiments website using SVG for the shape and Snap.svg for the animations.

100% width tabbed content with some example media queries for smaller screens.

A set of inspirational letter animations for display typography effects powered by anime.js

A flat-style Polaroid gallery where the items are scattered randomly in a container. When a specific item is selected, it will move to the middle while the other Polaroids will make space for it by moving to the sides. Optionally, an item can have a backface which will be shown by flipping the Polaroid when clicking on the current navigation dot again.

A tutorial on how to create a mobile-friendly and responsive expanding search bar.

ElastiStack is a little script that let's you navigate through a stack of items by dragging away the first one. It comes with an elastic touch meaning that when dragging the top-most item, the other ones will follow as if they were connected elastically. When reaching a certain distance, the dragged item will release itself and the next item will pop out.

A showcase collection of various page transition effects using CSS animations.

While CSS3 allows us to rotate letters, it is quite complicated to arrange each letter along a curved path. Arctext.js is a jQuery plugin that let's you do exactly that. Based on Lettering.js, it calculates the right rotation of each letter and distributes the letters equally across the imaginary arc of the given radius.

A set of creative and modern inline anchor styles and effects for your inspiration.

A simple decorative slideshow component with individual slide layouts and effects. Powered by anime.js. http://tympanus.net/Development/MultiLayoutSlideshow/

A couple of creative text styles and hover effects for your inspiration. Some effects use experimental techniques including SVG masking and Canvas.

Some shape morphing hover effects on images using SVG clipPath.

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

A Masonry-powered grid layout with a motion hover effect on the grid items and a scrollable content view

Some inspiration for arrow navigation styles and hover effects using SVG icons for the arrows, and CSS transitions and animations for the effects.

A "look inside" book preview with BookBlock. A concept for book showcases or online book stores that shows a grid of books with the options to view the details and to look inside of the book, opening the BookBlock in fullscreen and allowing for a 3D page navigation.

An experimental template with an interactive old school record player powered by the [Web Audio API](https://www.w3.org/TR/webaudio/).

A details menu with boxes that slide out in an irregular grid https://tympanus.net/codrops/?p=35517

A template for a simple page stack navigation.

Some effect inspiration for card stacks. The idea is to show animation ideas for positive (accept) or negative (reject) feedback on a generic card element.

Creating a color palette from images in a fun way using CSS Filters and Vibrant.js

A full image reveal effect with fancy thumbnail sliding.

A responsive 3D menu concept for a restaurant website. The idea is to show the menu as a folded flyer and unfold it in order to show the menu items.

A fixed background image scrolling layout with 100% height panels and smooth scrolling.

A photography-inspired website layout with an expanding stack slider and a background image tilt effect.

Recreating the grid loading effect as seen on the Samsung Corporate Design Center website.