Codrops

Repositories

• AnimatedGridLayout

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

• TileScroll

  Scroll animations for image grids using Locomotive Scroll
  HTML MIT 21 70 0 0 Updated Oct 14, 2020

• CSSProgress

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

• IconHoverEffects

  A set of simple round icon hover effects with CSS transitions and animations for your inspiration.
  CSS 173 688 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 137 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 105 316 4 2 Updated Oct 1, 2020

• CreativeButtons

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

• BlockRevealers

  Ideas for revealing content in a schematic box look as seen around the Web lately.
  HTML 91 534 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 18 0 1 Updated Oct 1, 2020

• MenuHoverEffects

  Some inspiration for menu hover effects.

  javascript css hover animation-effects animejs
  HTML 65 279 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 176 0 1 Updated Sep 30, 2020

• DecorativeLetterAnimations

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

  animation letters webdesign animejs charmingjs
  HTML 69 246 1 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 17, 2020

• MenuFullGrid

  A layout with a menu and background image grid that animates to an inner content page.
  JavaScript MIT 20 37 0 0 Updated Sep 16, 2020

• DiagonalThumbnails

  A simple slideshow with tilted thumbnails and large titles that animate when navigating.
  HTML MIT 12 44 0 0 Updated Sep 1, 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 3 51 1 0 Updated Aug 19, 2020

• AnimatedCustomCursor

  Some ideas for interactive custom cursor animations using SVG filters.
  JavaScript MIT 15 74 1 0 Updated Aug 11, 2020

• MagneticButtons

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

  button-animation
  JavaScript MIT 46 183 0 0 Updated Aug 5, 2020

• RapidImageHoverMenu

  A hover effect for a menu where images appear with an animation for each item.
  JavaScript MIT 5 42 1 1 Updated Jul 21, 2020

• RapidImageHoverMenuEffects

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

• GlitchyGrid

  An experimental grid layout slideshow with a stack-like navigation and glitch effect.

  javascript css demo slideshow grid gsap glitch
  JavaScript MIT 8 24 0 0 Updated Jun 24, 2020

• TypographyMotion

  Recreation of Thibaud Allie's letter stagger animation.

  animation gsap web-design splittingjs
  JavaScript MIT 6 25 0 0 Updated Jun 18, 2020

• ImageGridMotionEffect

  A motion hover effect for a background grid of images.

  javascript css layout gsap hover webdesign
  JavaScript MIT 10 57 0 0 Updated Jun 12, 2020

• DraggableMenu

  A draggable menu that shows a thumbnail preview of an image grid

  template navigation layout gsap menu draggable tweenmax
  JavaScript 26 110 1 0 Updated Jun 9, 2020

• AnimateSVGTextPath

  Animating SVG text on a path on scroll using the Intersection Observer API and SVG filters.

  svg animation layout scroll svg-filters intersectionobserver-api textpath
  HTML MIT 9 22 0 0 Updated Jun 5, 2020

• ScrollLoopMenu

  A simple infinitely scrollable menu based on the looping scroll illusion of cloned items.
  JavaScript MIT 6 36 0 0 Updated May 23, 2020

• 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 155 412 14 1 Updated May 7, 2020

• CrossroadsSlideshow

  An experimental slideshow with an inclined look with three slide previews and a content view on click.
  JavaScript 27 78 1 0 Updated May 7, 2020

• GooeyTextHoverEffect

  A gooey text hover effect using SVG filters

  javascript css web-design svg-filter
  HTML MIT 22 82 0 0 Updated Apr 28, 2020

• RapidLayersAnimation

  A rapid layers animation of images as a splash intro or page transition on a website.
  JavaScript MIT 11 47 0 0 Updated Apr 7, 2020