Codrops's repositories
CreativeButtons
Some creative and modern button styles and effects for your inspiration.
IconHoverEffects
A set of simple round icon hover effects with CSS transitions and animations for your inspiration.
BlockRevealers
Ideas for revealing content in a schematic box look as seen around the Web lately.
MagneticButtons
A set of buttons with a magnetic interaction and a hover effect.
AnimatedGridLayout
A responsive, magazine-like website layout with a grid item animation effect when opening the content
MusicalInteractions
Some experimental ideas for playful musical interactions powered by MIDI.js.
LineHoverStyles
A couple of simple & subtle line hover animations for links using CSS only.
GoogleNexusWebsiteMenu
A tutorial on how to recreate the slide out sidebar menu that can be seen on the Google Nexus 7 website.
DecorativeLetterAnimations
Some decorative shape and letter animations based on the Dribbble shot "Us By Night" by Animography.
MenuHoverEffects
Some inspiration for menu hover effects.
TileScroll
Scroll animations for image grids using Locomotive Scroll
PhotographyWebsiteConcept
A photography-inspired website layout with an expanding stack slider and a background image tilt effect.
ShapeHoverEffectSVG
Hover effect as seen on The Christmas Experiments website using SVG for the shape and Snap.svg for the animations.
CircularTextEffect
An experimental circular SVG text animation
HorizontalSmoothScrollLayout
Some ideas for horizontal smooth scroll layouts and animations using Locomotive Scroll
OutdoorsTemplate
An implementation of Gil Huybrecht “Outdoors” design project powered by layered CSS grids.
RapidImageHoverMenuEffects
A set of hover effects on menu items with images.
CSSProgress
A tutorial on how to create shaded CSS-only progress bars with Sass. By Rafael González.
ThumbFullTransition
An experimental animation where an image goes from thumbnail to full width, allowing for a classy entry to an article view.
TypographyMotion
Recreation of Thibaud Allie's letter stagger animation.
MenuFullGrid
A layout with a menu and background image grid that animates to an inner content page.
DiagonalThumbnails
A simple slideshow with tilted thumbnails and large titles that animate when navigating.
WebGLBlobs
Demos for the tutorial on how to deform and color spheres in Three.js.
ScrollLoopMenu
A simple infinitely scrollable menu based on the looping scroll illusion of cloned items.
ImageStackGrid
A simple intro animation where an image stack moves to become a grid.
InlineMenuLayout
An inline menu layout with a playful hover animation and a gallery content preview panel.
AnimateSVGTextPath
Animating SVG text on a path on scroll using the Intersection Observer API and SVG filters.
codrops2020
A roundup of Codrops resources from 2020.
GlitchyGrid
An experimental grid layout slideshow with a stack-like navigation and glitch effect.
TriplePanelImageSlider
A tutorial about how to create a triple panel jQuery image slider with a 3D look and swipe-like transitions.