Codrops (@codrops)
  • Stars
    star
    75,163
  • Global Org. Rank 173 (Top 0.06 %)
  • Registered almost 14 years ago
  • Most used languages
    JavaScript
    44.7 %
    HTML
    33.2 %
    CSS
    21.7 %
    Others
    0.3 %

Top repositories

1

PageTransitions

A showcase collection of various page transition effects using CSS animations.
CSS
2,158
star
2

SidebarTransitions

Some inspiration for transition effects for off-canvas navigations.
CSS
1,592
star
3

HoverEffectIdeas

Some inspiration and modern ideas for subtle hover effects.
CSS
1,555
star
4

RainEffect

Some experimental rain and water drop effects in different scenarios using WebGL, by Lucas Bebber.
JavaScript
1,535
star
5

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.
JavaScript
1,529
star
6

ParticleEffectsButtons

A little library that can be used for bursting particles effects on buttons and other elements
JavaScript
1,223
star
7

SeatPreview

An experimental demo where a 3D perspective preview is shown for a selected seat in a cinema room.
HTML
1,175
star
8

DistortedButtonEffects

A set of inspirational, highly experimental distortion effects for buttons using SVG filters. By Adrien Denat.
CSS
1,119
star
9

ModalWindowEffects

A set of experimental modal window appearance effects with CSS transitions and animations.
JavaScript
998
star
10

TextInputEffects

Simple styles and effects for enhancing text input interactions.
CSS
965
star
11

BookBlock

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

NotificationStyles

Various simple ideas and effects for unobtrusive notifications on a website.
CSS
929
star
13

ElasticProgress

Creates a button that turns into a progress bar with a elastic effect. Based on the Dribbble shot "Download" by xjw
JavaScript
875
star
14

LineMenuStyles

An open collection of menu styles that use the line as creative design element.
CSS
745
star
15

MultiLevelPushMenu

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

CreativeButtons

Some creative and modern button styles and effects for your inspiration.
CSS
734
star
17

FullscreenLayoutPageTransitions

This responsive layout is based on an initial grid of four boxes. Once a box is clicked, it gets resized to fullscreen and the other boxes scale down and fade out. In the work section we experiment with another transition which is to show a panel by making it appear from the bottom while scaling the current one down. To see it in action, open the work section and click on one of the portfolio items and navigate through them.
JavaScript
726
star
18

IconHoverEffects

A set of simple round icon hover effects with CSS transitions and animations for your inspiration.
CSS
720
star
19

CreativeLinkEffects

An inspirational collection of experimental link effects mostly using transitions on pseudo-elements.
CSS
720
star
20

Interactive3DMallMap

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

ResponsiveMultiLevelMenu

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

OffCanvasMenuEffects

Some inspiration for off-canvas menu effects and styles using CSS transitions and SVG path animations.
CSS
682
star
23

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.
CSS
675
star
24

Calendario

A jQuery calendar plugin for creating flexible calendars.
CSS
670
star
25

PageLoadingEffects

Modern ways of revealing new content using SVG animations.
CSS
636
star
26

ProgressButtonStyles

A set of flat and 3D progress button styles where the button itself serves as a progress indicator. 3D styles are used for showing the progress indication on one side of the button while rotating the button in perspective.
CSS
606
star
27

MinimalForm

A simplistic form with inputs shown one at a time. Inspired by the form seen on the end of the [PageLanes website](http://www.pagelanes.com/).
JavaScript
600
star
28

ButtonComponentMorph

Inspiration for revealing content by morphing the action element.
HTML
590
star
29

DragDropInteractions

Some inspiration for drag and drop interactions for the modern UI.
HTML
579
star
30

ImageTiltEffect

A subtle tilt effect for images. The idea is to move and rotate semi-transparent copies with the same background image in order to create a subtle motion or depth effect.
HTML
573
star
31

BlockRevealers

Ideas for revealing content in a schematic box look as seen around the Web lately.
HTML
556
star
32

FullscreenForm

An experimental fullscreen form concept where the idea is to allow distraction-free form filling with some fancy animations when moving between form fields.
CSS
542
star
33

SelectInspiration

Creative styles and ideas for custom select elements.
CSS
540
star
34

SegmentEffect

Background image segment effect as seen on [Filippo Bello's Portfolio](http://www.filippobello.com/portfolio).
HTML
534
star
35

AnimatedSVGIcons

Using SVGs on websites is becoming more and more easy with great libraries like Snap.svg. Today we want to explore what we can do with it and animate some SVG icons as a practical example.
JavaScript
524
star
36

FullscreenOverlayStyles

Some simple and creative overlay styles and effects. From sliding the overlay into the viewport to using SVG morphing shapes, we explore some effects for fullscreen overlays.
CSS
498
star
37

GridLoadingEffects

Some inspiration for loading effects of grid items using CSS animations.
HTML
495
star
38

StackMotionHoverEffects

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

MagneticButtons

A set of buttons with a magnetic interaction and a hover effect.
JavaScript
465
star
40

Blueprint-VerticalTimeline

A responsive vertical timeline layout with icons and example media queries.
CSS
465
star
41

SlitSlider

A responsive slideshow with a twist: the idea is to slice open the current slide when navigating to the next or previous one. Using jQuery and CSS animations we can create unique slide transitions for the content elements.
CSS
461
star
42

LiquidDistortion

A slideshow with liquid distortion effects in WebGL powered by PixiJS and GSAP
JavaScript
447
star
43

AnimatedHeader

A fixed header that will animate its size on scroll. The inner elements will also adjust their size with a transition.
HTML
446
star
44

SimpleDropDownEffects

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

ClickEffects

A set of subtle effects for click or touch interactions inspired by the visualization of screen taps in mobile app showcases. The effects are done with CSS animations mostly on pseudo-elements.
CSS
438
star
46

Slicebox

Slicebox is  a jQuery 3D image slider plugin that makes use of CSS 3D Transforms and provides a graceful fallback for older browsers that don't support the new properties.
JavaScript
437
star
47

GridLoadingAnimations

Some inspiration for loading effects on grid items.
HTML
421
star
48

ImageRevealHover

A set of link hover effects that reveal a thumbnail in different creative ways.
JavaScript
415
star
49

ProximityFeedback

Some ideas for proximity feedback through progressive hover effects.
HTML
412
star
50

TiltHoverEffects

Some ideas for hover effects with a fancy tilt effect. Inspired by the effect seen on Kikk 2015.
HTML
410
star
51

CaptionHoverEffects

A tutorial on how to create some subtle and modern caption hover effects.
JavaScript
405
star
52

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.
JavaScript
398
star
53

DirectionAwareHoverEffect

How to create a direction-aware hover effect using CSS3 and jQuery. The idea is to slide in an overlay from the direction we are moving with the mouse.
HTML
397
star
54

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.
JavaScript
393
star
55

AnimatedGridLayout

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

TooltipAnimations

Some little ideas for bouncy and playful tooltip shapes and animations with SVG and anime.js. Among other styles, we use shape morphing and transform.
JavaScript
385
star
57

Blueprint-SlidePushMenus

Fixed menus that will slide out from the sides of the page and in case of the right and left side optionally move the body.
CSS
371
star
58

GridMenu

A CSS Grid powered menu with a box look and a sliding animation.
HTML
368
star
59

Elastislide

Elastislide is a responsive image carousel that will adapt fluidly in a layout. It is a jQuery plugin that can be laid out horizontally or vertically with a pre-defined minimum number of shown images
JavaScript
364
star
60

MorphingBackgroundShapes

A decorative website background effect where SVG shapes morph and transform on scroll.
HTML
360
star
61

ThumbnailGridExpandingPreview

A tutorial on how to create a thumbnail grid with an expanding image preview similar to the effect seen on Google Images.
JavaScript
357
star
62

PerspectivePageViewNavigation

Some effects for a perspective page view navigation where the page itself gets pushed away in 3D to reveal a menu or other items.
CSS
346
star
63

MusicalInteractions

Some experimental ideas for playful musical interactions powered by MIDI.js.
JavaScript
341
star
64

GradientTopographyAnimation

Shape layers animation based on Polar Vector's work "Gradient Topography"
HTML
336
star
65

LineHoverStyles

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

SmoothScrollingImageEffects

A small set of ideas on animating images and other elements while smooth scrolling a page.
JavaScript
331
star
67

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.
HTML
324
star
68

DecorativeLetterAnimations

Some decorative shape and letter animations based on the Dribbble shot "Us By Night" by Animography.
HTML
323
star
69

GoogleNexusWebsiteMenu

A tutorial on how to recreate the slide out sidebar menu that can be seen on the Google Nexus 7 website.
JavaScript
323
star
70

CircularProgressButton

Implementation of Colin Garvin's [submit button concept](http://dribbble.com/shots/1426764-Submit-Button)
CSS
319
star
71

CreativeGooeyEffects

Practical examples of how to apply the Gooey effect by Lucas Bebber
HTML
317
star
72

GridLayoutSlideshow

A slideshow where each slide has an individual CSS grid layout and a reveal effect when navigating.
HTML
306
star
73

MenuHoverEffects

Some inspiration for menu hover effects.
HTML
306
star
74

InteractivePoints

An interactive transparency background effect that makes images visible when specific points are hovered, showing some content once clicked.
HTML
301
star
75

DialogEffects

A collection of dialog effects using CSS (and SVG) animations.
HTML
301
star
76

DiagonalSlideshow

A slideshow with a diagonal look and a content preview
JavaScript
300
star
77

NaturalLanguageForm

An experimental form that uses natural language instead of the usual form layout. Values are entered using custom input elements.
CSS
300
star
78

ElasticSVGElements

Adding elasticity with SVG shape animations for enhanced UI interactions.
CSS
288
star
79

SmoothScrollAnimations

Demo of a tutorial on how to add smooth page scrolling with an inner image animation
JavaScript
287
star
80

ScrollBasedLayoutAnimations

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

PagePreloadingEffect

A simple page preloading animation based on the effect seen on [Fontface Ninja](http://fontface.ninja/)
CSS
278
star
82

TypeShuffleAnimation

A shuffling type animation based on the effect seen on LCD 1.
JavaScript
276
star
83

OnScrollTypographyAnimations

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

AnimatedFrameSlideshow

An experimental slideshow that shows an animated SVG frame when transitioning between slides.
JavaScript
274
star
85

SlideshowAnimations

A collection of ideas for slideshow animations.
JavaScript
273
star
86

AnimatedBorderMenus

A tutorial on how to create a off-canvas icon navigation with an animated border effect.
CSS
273
star
87

SearchUIEffects

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

InteractiveColoringConcept

A fun experimental coloring concept where a color droplet can be dragged from a palette and dropped on designated areas in a website mockup.
HTML
269
star
89

Stapel

An experimental jQuery plugin that will group thumbnails by a shared data-attribute into a pile. When clicking on the pile, the thumbnails that belong to that pile will be spread into a grid using CSS transitions.
JavaScript
266
star
90

MorphingSearch

A simple effect idea for a search input that morphs into a fullscreen overlay. The idea is to enlarge the search input and show some relevant content or search results.
CSS
259
star
91

ButtonHoverStyles

Some ideas for CSS-only button hover styles and animations
CSS
253
star
92

GridLayoutMotion

A retro-style grid layout with a playful motion hover effect on the grid items.
HTML
245
star
93

MotionBlurEffect

A tutorial on how to create a motion blur effect on HTML elements using JavaScript and an SVG filter.
HTML
238
star
94

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.
HTML
234
star
95

MultiLevelMenu

A simple menu with multiple levels and an optional breadcrumb navigation and back button.
JavaScript
228
star
96

ScrollingLettersAnimation

A switching title effect where a fixed element changes depending on the scroll position.
HTML
227
star
97

ButtonStylesInspiration

Some ideas for modern and subtle button styles and effects
CSS
222
star
98

OnScrollEffectLayout

An on scroll effect template that animates the sides of sections once they are in the viewport.
JavaScript
222
star
99

ScrollSpiral

WebGL Scroll Spiral
HTML
217
star
100

ExpandingGridItemAnimation

Grid item animation based on the Dribbble shot "Surf Project" by Filip Slováček.
JavaScript
216
star