Codrops

Pinned Repositories

Animocons
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.
Language:JavaScript1.5k 39 4176
BookBlock
A jQuery plugin that will create a booklet-like component that let's you navigate through its items by flipping the pages.
Language:HTML976 73 66264
DistortedButtonEffects
A set of inspirational, highly experimental distortion effects for buttons using SVG filters. By Adrien Denat.
Language:CSS1.1k 36 7132
HoverEffectIdeas
Some inspiration and modern ideas for subtle hover effects.
Language:CSS1.6k 79 7314
ModalWindowEffects
A set of experimental modal window appearance effects with CSS transitions and animations.
Language:JavaScript1k 50 23238
PageTransitions
A showcase collection of various page transition effects using CSS animations.
Language:CSS2.2k 123 15448
ParticleEffectsButtons
A little library that can be used for bursting particles effects on buttons and other elements
Language:JavaScript1.2k 39 9150
RainEffect
Some experimental rain and water drop effects in different scenarios using WebGL, by Lucas Bebber.
Language:JavaScript1.6k 48 14282
SeatPreview
An experimental demo where a 3D perspective preview is shown for a selected seat in a cinema room.
Language:HTML1.2k 66 3194
SidebarTransitions
Some inspiration for transition effects for off-canvas navigations.
Language:CSS1.6k 72 14247

Codrops's Repositories

codrops/RainEffect
Some experimental rain and water drop effects in different scenarios using WebGL, by Lucas Bebber.
Language:JavaScript1.6k 48 14282
codrops/Interactive3DMallMap
An interactive 3D mall map concept with a sidebar search and pin indicators for every level.
Language:HTML743 53 7218
codrops/AnimatedResponsiveImageGrid
A jQuery plugin for creating a responsive image grid that will switch images using different animations and timings. This can work nicely as a background or decorative element of a website since we can randomize the appearance of new images and their transitions.
Language:HTML322 30 20108
codrops/TypeShuffleAnimation
A shuffling type animation based on the effect seen on LCD 1.
Language:JavaScript305 7 061
codrops/ButtonHoverStyles
Some ideas for CSS-only button hover styles and animations
Language:CSS271 9 171
codrops/GridZoom
A simple image grid layout where a small grid image zooms to become larger while a content view opens.
Language:JavaScript200 4 160
codrops/ColumnScroll
A grid layout with columns that scroll in opposite directions.
Language:JavaScript196 5 238
codrops/3DGridContentPreview
A grid layout with a magnetic hover effect and a content preview animation.
Language:JavaScript167 8 353
codrops/DraggableMenu
A draggable menu that shows a thumbnail preview of an image grid
Language:JavaScript142 7 136
codrops/FullscreenScroll
A fullscreen scroll-based slideshow with a content view powered by GreenSock's Observer plugin.
Language:JavaScript130 5 158
codrops/MakeWayGridEffect
A little grid interaction effect where adjoining items make way to a selected one that expands.
Language:HTML115 4 030
codrops/MenuToGrid
A simple layout animation where the thumbnails of a menu row animate to their position in a content preview grid using GSAP's Flip plugin.
Language:HTML111 5 026
codrops/ImageToContent
A simple scroll effect and page transition inspired by Vitalii Burhonskyi’s Dribbble shot.
Language:HTML105 4 032
codrops/TextRepetitionEffect
An on-scroll animation that shows repeated fragments of a big text as seen on the website of Dr. Dabber.
Language:HTML103 5 023
codrops/ScrollAnimationsGrid
Various effects for images when scrolling a page with a grid.
Language:HTML101 4 044
codrops/OnScrollPathAnimations
Animating SVG paths on smooth scroll.
Language:HTML94 6 025
codrops/LinesToLayout
A simple layout switch example where we go from a typography row view with inline images to a large image preview with more content.
Language:JavaScript80 4 214
codrops/BackgroundShift
A background color shift effect using a CSS blend mode and a multi-layer animation.
Language:HTML54 4 114
codrops/ExpandingRoundedMenu
An expanding menu animation with a cover unreveal effect in the background.
Language:CSS54 5 019
codrops/ScrollPanels
An exploration of smooth panel scroll effects based on Margot Priolet's website.
Language:HTML51 5 016
codrops/GlitchPerspective
A fun hover effect that shows a pixelated image with a glitch animation as seen on buōy's website.
Language:HTML48 4 018
codrops/RepetitionHoverEffect
A hover effect with repeated image layers that get scaled up and down.
Language:HTML46 4 121
codrops/OnScrollViewSwitch
A layout with some scroll animations and a view switch where the content items animate to a grid.
Language:JavaScript44 4 026
codrops/GridLayoutAnimation
A simple layout transition where a small grid animates to a larger view, using the Flip plugin from GreenSock.
Language:CSS43 4 05
codrops/LetterShuffleMenu
A little animation for a big menu where the letters of a word shuffle to become the first letter of each menu item.
Language:JavaScript43 4 116
codrops/HoverPreviewMiniMap
An experimental hover effect, where a content preview is shown while a mini map indicates the position of the cursor.
Language:JavaScript37 4 010
codrops/ImageToGridTransition
A simple transition where a large image animates to its place in a grid.
Language:JavaScript36 4 04
codrops/IntroTrailEffect
An intro animation with several layout changes and various effect.
Language:JavaScript31 4 19
codrops/TooltipTransition
A concept for page transitions where a tooltip image animates to a gallery layout and fullscreen image.
Language:JavaScript26 4 06
codrops/InlineLayoutSwitch
Two ideas for animating images from an inline layout to a column and grid-based one.
Language:HTML13 4 08