codrops/GammaGallery

Gamma Gallery is an experimental responsive image gallery that attempts to provide an adjustable responsive images approach taking its grid layout and the full slideshow view into account.

Language: JavaScript - Size: 1.57 MB - Last synced: about 11 hours ago - Pushed: almost 8 years ago - Stars: 397 - Forks: 111

codrops/MultiLevelPushMenu

An experimental push menu with multi-level functionality that allows endless nesting of navigation elements.

Language: JavaScript - Size: 416 KB - Last synced: about 11 hours ago - Pushed: about 7 years ago - Stars: 740 - Forks: 202

codrops/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.

Language: JavaScript - Size: 300 KB - Last synced: 7 days ago - Pushed: 7 months ago - Stars: 179 - Forks: 62

codrops/CaptionHoverEffects

A tutorial on how to create some subtle and modern caption hover effects.

Language: JavaScript - Size: 235 KB - Last synced: 8 days ago - Pushed: almost 11 years ago - Stars: 409 - Forks: 86

codrops/AnimatedGridLayout

A responsive, magazine-like website layout with a grid item animation effect when opening the content

Language: HTML - Size: 621 KB - Last synced: about 11 hours ago - Pushed: over 3 years ago - Stars: 397 - Forks: 125

codrops/ZoomSlideshow

Language: JavaScript - Size: 966 KB - Last synced: 16 days ago - Pushed: 11 months ago - Stars: 17 - Forks: 5

codrops/TooltipStylesInspiration

Various hover tooltip styles, shapes and effects for your inspiration.

Language: CSS - Size: 593 KB - Last synced: 16 days ago - Pushed: over 9 years ago - Stars: 211 - Forks: 52

codrops/ScrollBlurTypography

Animations for revealing blurry text on scroll.

Language: JavaScript - Size: 90.8 KB - Last synced: 16 days ago - Pushed: 24 days ago - Stars: 34 - Forks: 5

codrops/ShazamButtonEffect

Demo for the tutorial on how to create a Shazam-like button that morphs into a music player using Snap.svg.

Language: JavaScript - Size: 118 KB - Last synced: 16 days ago - Pushed: over 8 years ago - Stars: 69 - Forks: 18

codrops/ScrollingLettersAnimation

A switching title effect where a fixed element changes depending on the scroll position.

Language: HTML - Size: 1.18 MB - Last synced: 16 days ago - Pushed: over 6 years ago - Stars: 226 - Forks: 49

codrops/Scroll3DGrid

On-scroll animations for perspective image grids with different layouts.

Language: HTML - Size: 1.11 MB - Last synced: 16 days ago - Pushed: 10 months ago - Stars: 135 - Forks: 44

codrops/RotatedRevealers

Animated rotated overlays, or "reveal" elements for interesting page transition effects.

Language: JavaScript - Size: 398 KB - Last synced: 16 days ago - Pushed: about 4 years ago - Stars: 147 - Forks: 37

codrops/OnScrollTypoAnimations

Language: HTML - Size: 314 KB - Last synced: 16 days ago - Pushed: 11 months ago - Stars: 12 - Forks: 4

codrops/OnScrollShapeMorph

Morphing shape animations on scroll

Language: JavaScript - Size: 1.26 MB - Last synced: 16 days ago - Pushed: 6 months ago - Stars: 54 - Forks: 19

codrops/OnScrollColumnsRows

Scroll-driven animations for columns and rows powered by GSAP.

Language: HTML - Size: 2.6 MB - Last synced: 16 days ago - Pushed: 9 months ago - Stars: 97 - Forks: 16

codrops/MotionTrailAnimations

Some ideas for mouse/touch responsive image animations.

Language: JavaScript - Size: 2 MB - Last synced: 16 days ago - Pushed: 7 months ago - Stars: 44 - Forks: 7

codrops/MenuFullGrid

A layout with a menu and background image grid that animates to an inner content page.

Language: JavaScript - Size: 1.94 MB - Last synced: 16 days ago - Pushed: over 3 years ago - Stars: 78 - Forks: 23

codrops/InlineMenuLayout

An inline menu layout with a playful hover animation and a gallery content preview panel.

Language: HTML - Size: 16.2 MB - Last synced: 16 days ago - Pushed: over 3 years ago - Stars: 63 - Forks: 18

codrops/GridLayoutScrollableContent

A Masonry-powered grid layout with a motion hover effect on the grid items and a scrollable content view

Language: HTML - Size: 938 KB - Last synced: 16 days ago - Pushed: over 5 years ago - Stars: 187 - Forks: 44

codrops/GooeyCursor

A gooey cursor background effect with SVG filters and CSS blend modes.

Language: HTML - Size: 1.03 MB - Last synced: 16 days ago - Pushed: 12 months ago - Stars: 69 - Forks: 17

codrops/GridGallery

A responsive grid gallery based on the [Google Chromebook getting started](https://gweb-gettingstartedguide.appspot.com/) guide gallery. In this Blueprint we use Masonry for the grid and 3D transforms for navigating the items.

Language: HTML - Size: 206 KB - Last synced: 16 days ago - Pushed: almost 9 years ago - Stars: 236 - Forks: 127

codrops/FullWidthTabs

100% width tabbed content with some example media queries for smaller screens.

Language: CSS - Size: 27.3 KB - Last synced: 16 days ago - Pushed: about 7 years ago - Stars: 177 - Forks: 53

codrops/ButtonStylesInspiration

Some ideas for modern and subtle button styles and effects

Language: CSS - Size: 222 KB - Last synced: 16 days ago - Pushed: about 9 years ago - Stars: 228 - Forks: 58

codrops/Blueprint-VerticalTimeline

A responsive vertical timeline layout with icons and example media queries.

Language: CSS - Size: 193 KB - Last synced: 16 days ago - Pushed: about 10 years ago - Stars: 465 - Forks: 80

codrops/Blueprint-ResponsiveFullWidthGrid

A responsive grid layout for multiple items in a row that fill all the available width.

Size: 115 KB - Last synced: 16 days ago - Pushed: about 11 years ago - Stars: 38 - Forks: 16

codrops/Interactive3DMallMap

An interactive 3D mall map concept with a sidebar search and pin indicators for every level.

Language: HTML - Size: 120 KB - Last synced: 16 days ago - Pushed: about 2 years ago - Stars: 730 - Forks: 217

codrops/Baraja

Baraja is a jQuery plugin that allows to move elements in a card-like fashion and spread them like one would spread a deck of cards on a table. It uses CSS transforms for rotating and translating the items. There are several options available that will create various spreading possibilities of the items, for example, moving the items laterally or rotating them in a fan-like way.

Language: JavaScript - Size: 303 KB - Last synced: 16 days ago - Pushed: about 7 years ago - Stars: 403 - Forks: 85

codrops/DistortedButtonEffects

A set of inspirational, highly experimental distortion effects for buttons using SVG filters. By Adrien Denat.

Language: CSS - Size: 751 KB - Last synced: 16 days ago - Pushed: over 7 years ago - Stars: 1,119 - Forks: 133

codrops/SlideshowAnimations

A collection of ideas for slideshow animations.

Language: JavaScript - Size: 4.13 MB - Last synced: 16 days ago - Pushed: 8 months ago - Stars: 274 - Forks: 48

codrops/GridViewSwitch

A proof-of-concept for a view switch animation from grid to slideshow.

Language: HTML - Size: 1.4 MB - Last synced: 16 days ago - Pushed: about 1 year ago - Stars: 30 - Forks: 5

codrops/MultiboxMenu

A simple grid-powered multibox menu that shows with a reveal animation.

Language: CSS - Size: 252 KB - Last synced: 16 days ago - Pushed: over 5 years ago - Stars: 151 - Forks: 42

codrops/SearchUIEffects

A couple of schematic, inspirational proof-of-concepts for how to show the search interface on a website using CSS animations.

Language: HTML - Size: 28.3 KB - Last synced: 15 days ago - Pushed: over 7 years ago - Stars: 275 - Forks: 47

codrops/OnScrollTypographyAnimations

Inspiration and ideas for on-scroll typography animations that add an extra layer of creativity to a website design.

Language: JavaScript - Size: 70.3 KB - Last synced: 16 days ago - Pushed: 5 months ago - Stars: 275 - Forks: 73

codrops/TypeShuffleAnimation

A shuffling type animation based on the effect seen on LCD 1.

Language: JavaScript - Size: 25.4 KB - Last synced: 16 days ago - Pushed: over 1 year ago - Stars: 275 - Forks: 54

codrops/FullscreenClipEffect

Some inspiration for clip-path animations where a fullscreen image moves into a row/grid of smaller images, morphing its shape along the way.

Language: JavaScript - Size: 2 MB - Last synced: 16 days ago - Pushed: about 1 year ago - Stars: 50 - Forks: 15

codrops/ExpandingRoundedMenu

An expanding menu animation with a cover unreveal effect in the background.

Language: CSS - Size: 531 KB - Last synced: 16 days ago - Pushed: about 2 years ago - Stars: 50 - Forks: 16

codrops/FullscreenScroll

A fullscreen scroll-based slideshow with a content view powered by GreenSock's Observer plugin.

Language: JavaScript - Size: 1.18 MB - Last synced: 16 days ago - Pushed: over 1 year ago - Stars: 126 - Forks: 48

codrops/ImageToContent

A simple scroll effect and page transition inspired by Vitalii Burhonskyi’s Dribbble shot.

Language: HTML - Size: 1.79 MB - Last synced: 16 days ago - Pushed: almost 2 years ago - Stars: 99 - Forks: 30

codrops/GlitchPerspective

A fun hover effect that shows a pixelated image with a glitch animation as seen on buōy's website.

Language: HTML - Size: 443 KB - Last synced: 16 days ago - Pushed: over 1 year ago - Stars: 43 - Forks: 17

codrops/MarqueeMenu

A recreation of the marquee menu hover effect seen on the website of K72 made by Locomotive.

Language: HTML - Size: 2.96 MB - Last synced: 16 days ago - Pushed: almost 3 years ago - Stars: 73 - Forks: 17

codrops/RepetitiveTypography

An experimental typography animation based on a kinetic type design by Domagoj Štrok where words get duplicated several times.

Language: JavaScript - Size: 21.8 MB - Last synced: 16 days ago - Pushed: over 2 years ago - Stars: 41 - Forks: 3

codrops/ParanoiaSlideshow

A slideshow page layout with a filter enhanced navigation effect on the images.

Language: JavaScript - Size: 13.4 MB - Last synced: 16 days ago - Pushed: over 2 years ago - Stars: 55 - Forks: 8

codrops/BackgroundShift

A background color shift effect using a CSS blend mode and a multi-layer animation.

Language: HTML - Size: 1.13 MB - Last synced: 16 days ago - Pushed: over 2 years ago - Stars: 50 - Forks: 13

codrops/HoverPreviewMiniMap

An experimental hover effect, where a content preview is shown while a mini map indicates the position of the cursor.

Language: JavaScript - Size: 645 KB - Last synced: 16 days ago - Pushed: about 2 years ago - Stars: 34 - Forks: 9

codrops/ImageDraggingEffects

A set of playful dragging effects for images using various techniques.

Language: JavaScript - Size: 520 KB - Last synced: 16 days ago - Pushed: over 4 years ago - Stars: 78 - Forks: 18

codrops/BackgroundScaleHoverEffect

Recreation of the background scale hover effect seen on the DDD Hotel website using CSS clip paths.

Language: HTML - Size: 2.01 MB - Last synced: 16 days ago - Pushed: about 4 years ago - Stars: 116 - Forks: 30

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: HTML - Size: 1.39 MB - Last synced: 16 days ago - Pushed: over 1 year ago - Stars: 108 - Forks: 24

codrops/RainEffect

Some experimental rain and water drop effects in different scenarios using WebGL, by Lucas Bebber.

Language: JavaScript - Size: 2.95 MB - Last synced: 16 days ago - Pushed: over 1 year ago - Stars: 1,575 - Forks: 273

codrops/ImagePixelLoading

A recreation of the on-scroll pixelated image loading effect seen on Felicity Ingram's website

Language: HTML - Size: 1.37 MB - Last synced: 16 days ago - Pushed: 12 months ago - Stars: 78 - Forks: 11

codrops/astro-shop-view-transitions

Minimalist Shop with Browser View Transitions API and Astro for a smoother navigation experience.

Language: Astro - Size: 317 KB - Last synced: 16 days ago - Pushed: 3 months ago - Stars: 71 - Forks: 13

codrops/OnScrollFilter

Combining GSAP's Scroll Trigger and Flip with a SVG Filter, based on a demo by Fabio Ottaviani.

Language: HTML - Size: 864 KB - Last synced: 16 days ago - Pushed: 11 months ago - Stars: 70 - Forks: 25

codrops/SidebarTransitions

Some inspiration for transition effects for off-canvas navigations.

Language: CSS - Size: 106 KB - Last synced: 15 days ago - Pushed: 3 months ago - Stars: 1,624 - Forks: 242

codrops/CSSGlitchEffect

An experimental glitch effect powered by CSS animations and the clip-path property. Inspired by the technique seen on the speakers page of the 404 conference.

Language: CSS - Size: 669 KB - Last synced: 16 days ago - Pushed: over 6 years ago - Stars: 679 - Forks: 118

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: HTML - Size: 1.52 MB - Last synced: 15 days ago - Pushed: over 1 year ago - Stars: 323 - Forks: 108

codrops/SimpleDropDownEffects

A jQuery plugin for transforming select inputs into drop-down lists with some simple expanding effects.

Language: HTML - Size: 76.2 KB - Last synced: 15 days ago - Pushed: about 8 years ago - Stars: 446 - Forks: 110

codrops/CodropsTemplate

Codrops demo template. Wiki 👉

Language: CSS - Size: 532 KB - Last synced: 16 days ago - Pushed: 24 days ago - Stars: 110 - Forks: 30

codrops/CreativeButtons

Some creative and modern button styles and effects for your inspiration.

Language: CSS - Size: 154 KB - Last synced: 15 days ago - Pushed: over 3 years ago - Stars: 735 - Forks: 139

codrops/OnScrollTextHighlight

Some scroll-based effects for text highlights

Language: JavaScript - Size: 101 KB - Last synced: 16 days ago - Pushed: about 1 month ago - Stars: 28 - Forks: 2

codrops/HoverEffectIdeas

Some inspiration and modern ideas for subtle hover effects.

Language: CSS - Size: 2.09 MB - Last synced: 15 days ago - Pushed: 7 months ago - Stars: 1,582 - Forks: 308

codrops/PixelGooeyTooltip

A dynamic tooltip animation with various reveal effects, comprised of different amounts of fragments appearing.

Language: JavaScript - Size: 47.9 KB - Last synced: 16 days ago - Pushed: 6 months ago - Stars: 38 - Forks: 5

codrops/ConnectedGrid

Some ideas for simple on-scroll animations for connected grid items.

Language: HTML - Size: 4.75 MB - Last synced: 16 days ago - Pushed: 4 months ago - Stars: 49 - Forks: 13

codrops/ButtonHoverStyles

Some ideas for CSS-only button hover styles and animations

Language: CSS - Size: 10.7 KB - Last synced: 16 days ago - Pushed: about 1 year ago - Stars: 252 - Forks: 67

codrops/CSSProgress

A tutorial on how to create shaded CSS-only progress bars with Sass. By Rafael González.

Language: CSS - Size: 605 KB - Last synced: 16 days ago - Pushed: over 3 years ago - Stars: 95 - Forks: 30

codrops/ReflectionScroll

An decorative reflection effect where we simulate a reflected page and scroll it along with the content.

Language: HTML - Size: 1.32 MB - Last synced: 16 days ago - Pushed: about 1 month ago - Stars: 18 - Forks: 3

codrops/GridMenu

A CSS Grid powered menu with a box look and a sliding animation.

Language: HTML - Size: 910 KB - Last synced: 16 days ago - Pushed: about 6 years ago - Stars: 369 - Forks: 71

codrops/ResponsiveMultiLevelMenu

A responsive multi-level menu that shows its submenus in their own context, allowing for a space-saving presentation and usage.

Language: HTML - Size: 272 KB - Last synced: 15 days ago - Pushed: almost 7 years ago - Stars: 703 - Forks: 231

codrops/BookBlock

A jQuery plugin that will create a booklet-like component that let's you navigate through its items by flipping the pages.

Language: HTML - Size: 875 KB - Last synced: 16 days ago - Pushed: almost 7 years ago - Stars: 971 - Forks: 265

codrops/DiagonalSlideshow

A slideshow with a diagonal look and a content preview

Language: JavaScript - Size: 320 KB - Last synced: 16 days ago - Pushed: over 5 years ago - Stars: 300 - Forks: 63

codrops/CreativeLinkEffects

An inspirational collection of experimental link effects mostly using transitions on pseudo-elements.

Language: CSS - Size: 143 KB - Last synced: 15 days ago - Pushed: almost 10 years ago - Stars: 722 - Forks: 156

codrops/LineHoverStyles

A couple of simple & subtle line hover animations for links using CSS only.

Language: CSS - Size: 8.79 KB - Last synced: 16 days ago - Pushed: about 3 years ago - Stars: 333 - Forks: 67

codrops/PageTransitions

A showcase collection of various page transition effects using CSS animations.

Language: CSS - Size: 34.2 KB - Last synced: 15 days ago - Pushed: about 7 years ago - Stars: 2,194 - Forks: 444

codrops/3DGridContentPreview

A grid layout with a magnetic hover effect and a content preview animation.

Language: JavaScript - Size: 4.75 MB - Last synced: 16 days ago - Pushed: over 1 year ago - Stars: 164 - Forks: 50

codrops/3DStackMotion

An experimental 3D card stack animation on scroll.

Language: HTML - Size: 459 KB - Last synced: 16 days ago - Pushed: 2 months ago - Stars: 53 - Forks: 11

codrops/LetterInteractions

Some inspiration for playful typographical effects and hover interactions on letters.

Language: HTML - Size: 402 KB - Last synced: 16 days ago - Pushed: almost 7 years ago - Stars: 217 - Forks: 50

codrops/OrganicShapeAnimations

Some shape morphing hover effects on images using SVG clipPath.

Language: HTML - Size: 525 KB - Last synced: 16 days ago - Pushed: almost 7 years ago - Stars: 217 - Forks: 54

codrops/GradientTopographyAnimation

Shape layers animation based on Polar Vector's work "Gradient Topography"

Language: HTML - Size: 30.3 KB - Last synced: 16 days ago - Pushed: over 6 years ago - Stars: 335 - Forks: 81

codrops/BookPreview

A "look inside" book preview with BookBlock. A concept for book showcases or online book stores that shows a grid of books with the options to view the details and to look inside of the book, opening the BookBlock in fullscreen and allowing for a 3D page navigation.

Language: CSS - Size: 884 KB - Last synced: 16 days ago - Pushed: almost 10 years ago - Stars: 172 - Forks: 57

codrops/RecordPlayer

An experimental template with an interactive old school record player powered by the [Web Audio API](https://www.w3.org/TR/webaudio/).

Language: HTML - Size: 8.22 MB - Last synced: 16 days ago - Pushed: almost 8 years ago - Stars: 181 - Forks: 58

codrops/SlicedTextEffect

A scroll-based sliced text animation

Language: JavaScript - Size: 705 KB - Last synced: 16 days ago - Pushed: 5 months ago - Stars: 46 - Forks: 7

codrops/StickySections

Some ideas of how sticky sections can be animated while exiting the viewport.

Language: HTML - Size: 847 KB - Last synced: 16 days ago - Pushed: 3 months ago - Stars: 48 - Forks: 15

codrops/HoverGrid

A grid item reveal animation on hover inspired by Metalab

Language: CSS - Size: 6.15 MB - Last synced: 16 days ago - Pushed: 2 months ago - Stars: 16 - Forks: 3

codrops/CSSMarqueeMenu

A simple CSS based marquee effect for a menu.

Language: CSS - Size: 464 KB - Last synced: 16 days ago - Pushed: about 4 years ago - Stars: 156 - Forks: 41

codrops/OnScrollPathAnimations

Animating SVG paths on smooth scroll.

Language: HTML - Size: 73 MB - Last synced: 16 days ago - Pushed: almost 2 years ago - Stars: 88 - Forks: 24

codrops/LoopScrolling

Infinite loop scrolling based on the animation seen on Bureau DAM.

Language: HTML - Size: 113 KB - Last synced: 16 days ago - Pushed: 7 months ago - Stars: 35 - Forks: 10

codrops/ParticleEffectsButtons

A little library that can be used for bursting particles effects on buttons and other elements

Language: JavaScript - Size: 25.4 KB - Last synced: 16 days ago - Pushed: about 5 years ago - Stars: 1,222 - Forks: 148

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: JavaScript - Size: 412 KB - Last synced: 16 days ago - Pushed: about 2 years ago - Stars: 77 - Forks: 13

codrops/codrops-sketches

A collection of demo variations, ideas, concepts & experiments.

Language: JavaScript - Size: 5 MB - Last synced: 16 days ago - Pushed: 3 months ago - Stars: 131 - Forks: 43

codrops/KineticTypePageTransition

A concept for a kinetic typography based page transition.

Language: JavaScript - Size: 6.05 MB - Last synced: 16 days ago - Pushed: over 2 years ago - Stars: 91 - Forks: 29

codrops/ColumnScroll

A grid layout with columns that scroll in opposite directions.

Language: JavaScript - Size: 5.66 MB - Last synced: 16 days ago - Pushed: over 2 years ago - Stars: 192 - Forks: 37

codrops/TextBlockTransitions

Some inspiration for transitioning text blocks with different word animations.

Language: HTML - Size: 49.8 KB - Last synced: 16 days ago - Pushed: 10 months ago - Stars: 73 - Forks: 13

codrops/MorphingBackgroundShapes

A decorative website background effect where SVG shapes morph and transform on scroll.

Language: HTML - Size: 346 KB - Last synced: 16 days ago - Pushed: almost 7 years ago - Stars: 380 - Forks: 68

codrops/ScrollBasedLayoutAnimations

An exploration of different scroll based layout switch animations using GSAP's ScrollTrigger and Flip.

Language: HTML - Size: 3.02 MB - Last synced: 16 days ago - Pushed: 10 months ago - Stars: 280 - Forks: 78

codrops/MagneticButtons

A set of buttons with a magnetic interaction and a hover effect.

Language: JavaScript - Size: 487 KB - Last synced: 16 days ago - Pushed: about 3 years ago - Stars: 466 - Forks: 89

codrops/PreviewContentTransition

An experimental page transition concept for magazines and blogs where an excerpt item opens for a full page view.

Language: HTML - Size: 9.32 MB - Last synced: 16 days ago - Pushed: about 3 years ago - Stars: 86 - Forks: 29

codrops/GridItemHoverEffect

Some hover effects based on the grid design by Alena Orlova.

Language: JavaScript - Size: 1.64 MB - Last synced: 16 days ago - Pushed: 8 months ago - Stars: 99 - Forks: 25

codrops/ImageGridMotionEffect

A motion hover effect for a background grid of images.

Language: JavaScript - Size: 391 KB - Last synced: 16 days ago - Pushed: over 2 years ago - Stars: 139 - Forks: 19

codrops/PageLoadingEffects

Modern ways of revealing new content using SVG animations.

Language: CSS - Size: 171 KB - Last synced: 16 days ago - Pushed: about 10 years ago - Stars: 640 - Forks: 109

codrops/ItemSlider

A tutorial on how to create a simple category slider with a minimal design using CSS animations and jQuery. The idea is to slide the items sequentially depending on the slide direction.

Language: CSS - Size: 404 KB - Last synced: 15 days ago - Pushed: almost 10 years ago - Stars: 133 - Forks: 56

codrops/ImageExpansionTypography

An expanding image animation inside of a typographic block.

Language: JavaScript - Size: 1.19 MB - Last synced: 16 days ago - Pushed: about 2 months ago - Stars: 19 - Forks: 3

codrops/StackMotionHoverEffects

Experimental hover effects that reveal a stack of multiple colored cards behind the hovered item.

Language: HTML - Size: 68.4 KB - Last synced: 16 days ago - Pushed: about 7 years ago - Stars: 494 - Forks: 85