Codrops

Fueling web creativity since 2009.

Portugal

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.6k 38 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:HTML981 72 66264
DistortedButtonEffects
A set of inspirational, highly experimental distortion effects for buttons using SVG filters. By Adrien Denat.
Language:CSS1.1k 35 7131
HoverEffectIdeas
Some inspiration and modern ideas for subtle hover effects.
Language:CSS1.6k 78 7314
ModalWindowEffects
A set of experimental modal window appearance effects with CSS transitions and animations.
Language:JavaScript1k 49 23232
PageTransitions
A showcase collection of various page transition effects using CSS animations.
Language:CSS2.3k 122 15451
ParticleEffectsButtons
A little library that can be used for bursting particles effects on buttons and other elements
Language:JavaScript1.3k 38 9150
RainEffect
Some experimental rain and water drop effects in different scenarios using WebGL, by Lucas Bebber.
Language:JavaScript1.7k 47 14294
SeatPreview
An experimental demo where a 3D perspective preview is shown for a selected seat in a cinema room.
Language:HTML1.2k 65 3194
SidebarTransitions
Some inspiration for transition effects for off-canvas navigations.
Language:CSS1.6k 71 14250

Codrops's Repositories

codrops/PageTransitions
A showcase collection of various page transition effects using CSS animations.
Language:CSS2.3k 122 15451
codrops/SidebarTransitions
Some inspiration for transition effects for off-canvas navigations.
Language:CSS1.6k 71 14250
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.6k 38 4176
codrops/ParticleEffectsButtons
A little library that can be used for bursting particles effects on buttons and other elements
Language:JavaScript1.3k 38 9150
codrops/OnScrollTypographyAnimations
Inspiration and ideas for on-scroll typography animations that add an extra layer of creativity to a website design.
Language:JavaScript325 6 388
codrops/codrops-sketches
A collection of demo variations, ideas, concepts & experiments.
Language:JavaScript166 6 054
codrops/GooeyTextHoverEffect
A gooey text hover effect using SVG filters
Language:HTML145 4 134
codrops/CodropsTemplate
Codrops demo template. Wiki 👉
Language:CSS128 13 230
codrops/StickySections
Some ideas of how sticky sections can be animated while exiting the viewport.
Language:HTML118 6 144
codrops/LineTextHoverAnimations
Some hover animations for a terminal-like look
Language:HTML117 3 023
codrops/ScrollBlurTypography
Animations for revealing blurry text on scroll.
Language:JavaScript115 3 120
codrops/astro-shop-view-transitions
Minimalist Shop with Browser View Transitions API and Astro for a smoother navigation experience.
Language:Astro97 2 019
codrops/3DStackMotion
An experimental 3D card stack animation on scroll.
Language:HTML83 3 019
codrops/OnScrollTextHighlight
Some scroll-based effects for text highlights
Language:JavaScript79 5 122
codrops/OnScrollLayoutFormations
Layout formations on scroll using GSAP
Language:HTML72 2 218
codrops/OnScrollShapeMorph
Morphing shape animations on scroll
Language:JavaScript67 4 023
codrops/TextClipScroll
Experimental on-scroll typography effects using SVG clip-paths.
Language:HTML64 4 018
codrops/Staggered3DGridAnimations
A playful concept where we use scroll-based animations to create 3D grid effects and other transitions.
Language:HTML61 2 010
codrops/ConnectedGrid
Some ideas for simple on-scroll animations for connected grid items.
Language:HTML60 3 217
codrops/SlicedTextEffect
A scroll-based sliced text animation
Language:JavaScript59 3 013
codrops/PixelGooeyTooltip
A dynamic tooltip animation with various reveal effects, comprised of different amounts of fragments appearing.
Language:JavaScript58 3 013
codrops/IntroGridMotionTransition
A little hover motion effect on a grid and an intro animation.
Language:JavaScript55 2 024
codrops/ContentLayoutTransition
An experimental layout transition where a stack of images animates to a gallery view, showing some more content.
Language:HTML54 4 114
codrops/ContextAwareLogoAnimationScroll
Exploring how fixed elements can hide and reveal based on scroll interactions with playful, context-aware animations.
Language:JavaScript51 3 011
codrops/OneElementScroll
A simple concept of animating one element across different waypoints on scroll using GSAP Flip and ScrollTrigger.
Language:JavaScript45 2 316
codrops/OnScrollSVGFilterText
A small set of scroll-based SVG filter animations on HTML text.
Language:JavaScript43 2 06
codrops/ImageExpansionTypography
An expanding image animation inside of a typographic block.
Language:JavaScript39 3 011
codrops/HoverGrid
A grid item reveal animation on hover inspired by Metalab
Language:CSS33 3 013
codrops/ReflectionScroll
An decorative reflection effect where we simulate a reflected page and scroll it along with the content.
Language:HTML31 4 08
codrops/PushGridItems
Animations for grid items based on a concept by Rémi Clauss.
Language:JavaScript29 2 111