Interactive Record Player
In Playground
An experimental template with an interactive old school record player powered by the Web Audio API.
In Playground
An experimental template with an interactive old school record player powered by the Web Audio API.
In Tutorials
A tutorial on how to create multi-layer page reveal effects with a couple of ideas for inspiration.
In Playground
Some experimental isometric and 3D grids. The idea is to use isometric/3D grids as decorative elements or with some interaction.
In Playground
An interactive 3D mall map concept with a sidebar search and pin indicators for every level.
In Playground
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.
In Tutorials
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.
In Playground
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.
In Playground
An experimental demo where a 3D perspective preview is shown for a selected seat in a cinema room.
In Playground
Some ideas for menu styles and effects that employ the line as a creative design element. This is an open collection; contributions are welcome!
In Articles
A look back at 2015 with a summary of all Codrops resources. Thank you all for supporting us!
In Tutorials
A tutorial on how to create a Shazam-like button that morphs into a music player using Snap.svg.
In Playground
A couple of styles and inspiration for responsive, flexbox-based HTML pricing tables.
In Blueprints
A simple multi-level menu with delayed item animations and an optional breadcrumb navigation and back button.
In Playground
An experimental interactive room slideshow based on the prototype concept by Bilal Mechairia’s Dribbble shot “Spaces”.
In Playground
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.
In Playground
A mobile “pull to share” interaction that allows to share a page by using the familiar “pull to refresh” movement. Based on the action for refreshing and opening/closing a tab in Google Chrome for mobile.
In Blueprints
A template for a simple page stack navigation based on the Dribbble shot by Ilya Kostin, Stacked navigation.
In Playground
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.