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 14283
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/PageTransitions
A showcase collection of various page transition effects using CSS animations.
Language:CSS2.2k 123 15448
codrops/SidebarTransitions
Some inspiration for transition effects for off-canvas navigations.
Language:CSS1.6k 72 14247
codrops/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
codrops/ParticleEffectsButtons
A little library that can be used for bursting particles effects on buttons and other elements
Language:JavaScript1.2k 39 9150
codrops/OnScrollTypographyAnimations
Inspiration and ideas for on-scroll typography animations that add an extra layer of creativity to a website design.
Language:JavaScript304 7 384
codrops/codrops-sketches
A collection of demo variations, ideas, concepts & experiments.
Language:JavaScript151 7 049
codrops/GooeyTextHoverEffect
A gooey text hover effect using SVG filters
Language:HTML139 5 134
codrops/CodropsTemplate
Codrops demo template. Wiki 👉
Language:CSS117 14 231
codrops/ScrollBlurTypography
Animations for revealing blurry text on scroll.
Language:JavaScript98 3 115
codrops/LineTextHoverAnimations
Some hover animations for a terminal-like look
Language:HTML95 3 017
codrops/StickySections
Some ideas of how sticky sections can be animated while exiting the viewport.
Language:HTML88 6 133
codrops/astro-shop-view-transitions
Minimalist Shop with Browser View Transitions API and Astro for a smoother navigation experience.
Language:Astro87 3 018
codrops/3DStackMotion
An experimental 3D card stack animation on scroll.
Language:HTML80 3 017
codrops/OnScrollTextHighlight
Some scroll-based effects for text highlights
Language:JavaScript68 4 118
codrops/OnScrollShapeMorph
Morphing shape animations on scroll
Language:JavaScript60 4 023
codrops/ConnectedGrid
Some ideas for simple on-scroll animations for connected grid items.
Language:HTML59 4 217
codrops/TextClipScroll
Experimental on-scroll typography effects using SVG clip-paths.
Language:HTML58 4 016
codrops/OnScrollLayoutFormations
Layout formations on scroll using GSAP
Language:HTML54 2 213
codrops/SlicedTextEffect
A scroll-based sliced text animation
Language:JavaScript51 3 011
codrops/ContentLayoutTransition
An experimental layout transition where a stack of images animates to a gallery view, showing some more content.
Language:HTML50 5 114
codrops/PixelGooeyTooltip
A dynamic tooltip animation with various reveal effects, comprised of different amounts of fragments appearing.
Language:JavaScript50 4 010
codrops/IntroGridMotionTransition
A little hover motion effect on a grid and an intro animation.
Language:JavaScript48 2 021
codrops/Staggered3DGridAnimations
A playful concept where we use scroll-based animations to create 3D grid effects and other transitions.
Language:HTML45 2 05
codrops/ContextAwareLogoAnimationScroll
Exploring how fixed elements can hide and reveal based on scroll interactions with playful, context-aware animations.
Language:JavaScript34 3 05
codrops/OnScrollSVGFilterText
A small set of scroll-based SVG filter animations on HTML text.
Language:JavaScript31 2 04
codrops/ImageExpansionTypography
An expanding image animation inside of a typographic block.
Language:JavaScript30 3 010
codrops/HoverGrid
A grid item reveal animation on hover inspired by Metalab
Language:CSS29 3 011
codrops/ReflectionScroll
An decorative reflection effect where we simulate a reflected page and scroll it along with the content.
Language:HTML27 4 08
codrops/PushGridItems
Animations for grid items based on a concept by Rémi Clauss.
Language:JavaScript22 2 110
codrops/OneElementScroll
A simple concept of animating one element across different waypoints on scroll using GSAP Flip and ScrollTrigger.
Language:JavaScript199