Codrops

Repositories

• MagneticButtons

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

  button-animation
  JavaScript MIT 52 234 1 0 Updated Feb 24, 2021

• LineHoverStyles

  A couple of simple & subtle line hover animations for links using CSS only.
  CSS MIT 18 117 0 1 Updated Feb 19, 2021

• ButtonHoverStyles

  Some ideas for CSS-only button hover styles and animations
  CSS MIT 4 52 0 0 Updated Feb 17, 2021

• MusicalInteractions

  Some experimental ideas for playful musical interactions powered by MIDI.js.
  JavaScript 64 315 0 0 Updated Feb 4, 2021

• WebGLBlobs

  Demos for the tutorial on how to deform and color spheres in Three.js.

  threejs sphere
  HTML MIT 3 9 0 0 Updated Jan 25, 2021

• DecorativeLetterAnimations

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

  animation letters webdesign animejs charmingjs
  HTML 73 264 1 2 Updated Jan 23, 2021

• RapidImageHoverMenu

  A hover effect for a menu where images appear with an animation for each item.
  JavaScript MIT 11 56 1 2 Updated Jan 20, 2021

• OnScrollLetterAnimations

  Some examples of how to animate letters on scroll.
  HTML MIT 2 34 0 0 Updated Jan 20, 2021

• codrops2020

  A roundup of Codrops resources from 2020.
  HTML MIT 5 33 0 0 Updated Dec 31, 2020

• HorizontalSmoothScrollLayout

  Some ideas for horizontal smooth scroll layouts and animations using Locomotive Scroll
  HTML MIT 8 73 0 0 Updated Dec 9, 2020

• ImageStackGrid

  A simple intro animation where an image stack moves to become a grid.

  template ui-design animation layout gsap
  JavaScript MIT 5 29 0 0 Updated Nov 24, 2020

• AnimatedCustomCursor

  Some ideas for interactive custom cursor animations using SVG filters.
  JavaScript MIT 16 101 1 1 Updated Nov 11, 2020

• InlineMenuLayout

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

  javascript css layout webdesign
  HTML MIT 4 37 1 0 Updated Nov 11, 2020

• TypographyMotion

  Recreation of Thibaud Allie's letter stagger animation.

  animation gsap web-design splittingjs
  JavaScript MIT 6 39 0 0 Updated Nov 11, 2020

• MenuFullGrid

  A layout with a menu and background image grid that animates to an inner content page.
  JavaScript MIT 21 48 0 0 Updated Nov 11, 2020

• ThumbFullTransition

  An experimental animation where an image goes from thumbnail to full width, allowing for a classy entry to an article view.

  css animation gsap
  JavaScript MIT 4 56 1 0 Updated Nov 11, 2020

• AnimatedGridLayout

  A responsive, magazine-like website layout with a grid item animation effect when opening the content
  HTML 119 363 3 10 Updated Oct 16, 2020

• TileScroll

  Scroll animations for image grids using Locomotive Scroll
  HTML MIT 30 116 1 0 Updated Oct 15, 2020

• CSSProgress

  A tutorial on how to create shaded CSS-only progress bars with Sass. By Rafael González.
  CSS 28 86 1 9 Updated Oct 2, 2020

• IconHoverEffects

  A set of simple round icon hover effects with CSS transitions and animations for your inspiration.
  CSS 174 705 1 0 Updated Oct 2, 2020

• PhotographyWebsiteConcept

  A photography-inspired website layout with an expanding stack slider and a background image tilt effect.
  HTML 59 141 1 4 Updated Oct 2, 2020

• GoogleNexusWebsiteMenu

  A tutorial on how to recreate the slide out sidebar menu that can be seen on the Google Nexus 7 website.
  JavaScript 107 317 4 2 Updated Oct 1, 2020

• CreativeButtons

  Some creative and modern button styles and effects for your inspiration.
  CSS 139 711 2 1 Updated Oct 1, 2020

• BlockRevealers

  Ideas for revealing content in a schematic box look as seen around the Web lately.
  HTML 93 545 3 1 Updated Oct 1, 2020

• TriplePanelImageSlider

  A tutorial about how to create a triple panel jQuery image slider with a 3D look and swipe-like transitions.
  CSS 13 19 0 1 Updated Oct 1, 2020

• MenuHoverEffects

  Some inspiration for menu hover effects.

  javascript css hover animation-effects animejs
  HTML 68 286 0 0 Updated Sep 30, 2020

• ShapeHoverEffectSVG

  Hover effect as seen on The Christmas Experiments website using SVG for the shape and Snap.svg for the animations.
  CSS 61 179 0 1 Updated Sep 30, 2020

• OutdoorsTemplate

  An implementation of Gil Huybrecht “Outdoors” design project powered by layered CSS grids.
  JavaScript 48 102 2 1 Updated Sep 16, 2020

• DiagonalThumbnails

  A simple slideshow with tilted thumbnails and large titles that animate when navigating.
  HTML MIT 15 50 0 0 Updated Sep 1, 2020

• RapidImageHoverMenuEffects

  A set of hover effects on menu items with images.
  JavaScript MIT 11 58 2 0 Updated Jul 8, 2020