Codrops's repositories
PageTransitions
A showcase collection of various page transition effects using CSS animations.
SidebarTransitions
Some inspiration for transition effects for off-canvas navigations.
HoverEffectIdeas
Some inspiration and modern ideas for subtle hover effects.
OnScrollTypographyAnimations
Inspiration and ideas for on-scroll typography animations that add an extra layer of creativity to a website design.
SlideshowAnimations
A collection of ideas for slideshow animations.
Arctext
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.
Scroll3DGrid
On-scroll animations for perspective image grids with different layouts.
codrops-sketches
A collection of demo variations, ideas, concepts & experiments.
CodropsTemplate
Codrops demo template. Wiki 👉
GridItemHoverEffect
Some hover effects based on the grid design by Alena Orlova.
OnScrollColumnsRows
Scroll-driven animations for columns and rows powered by GSAP.
astro-shop-view-transitions
Minimalist Shop with Browser View Transitions API and Astro for a smoother navigation experience.
CoverPageTransition
A cover page transition based on Vitalii Burhonskyi's Dribbble shot.
3DStackMotion
An experimental 3D card stack animation on scroll.
LayersAnimation
Some ideas for speedy page transition animations with layered images using clip-path.
OnScrollShapeMorph
Morphing shape animations on scroll
ScrollBlurTypography
Animations for revealing blurry text on scroll.
ConnectedGrid
Some ideas for simple on-scroll animations for connected grid items.
StickySections
Some ideas of how sticky sections can be animated while exiting the viewport.
ContentLayoutTransition
An experimental layout transition where a stack of images animates to a gallery view, showing some more content.
SlicedTextEffect
A scroll-based sliced text animation
MotionTrailAnimations
Some ideas for mouse/touch responsive image animations.
TextClipScroll
Experimental on-scroll typography effects using SVG clip-paths.
PixelGooeyTooltip
A dynamic tooltip animation with various reveal effects, comprised of different amounts of fragments appearing.
LoopScrolling
Infinite loop scrolling based on the animation seen on Bureau DAM.
OnScrollTextHighlight
Some scroll-based effects for text highlights
ImageExpansionTypography
An expanding image animation inside of a typographic block.
ReflectionScroll
An decorative reflection effect where we simulate a reflected page and scroll it along with the content.