Codrops

Repositories

• ImageStackGrid

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

  template ui-design animation layout gsap
  JavaScript MIT 2 13 0 0 Updated Nov 24, 2020

• AnimatedCustomCursor

  Some ideas for interactive custom cursor animations using SVG filters.
  JavaScript MIT 16 92 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 3 28 1 0 Updated Nov 11, 2020

• TypographyMotion

  Recreation of Thibaud Allie's letter stagger animation.

  animation gsap web-design splittingjs
  JavaScript MIT 6 29 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 41 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 5 55 1 0 Updated Nov 11, 2020

• AnimatedGridLayout

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

• TileScroll

  Scroll animations for image grids using Locomotive Scroll
  HTML MIT 28 97 1 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 84 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 697 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 138 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 106 317 4 2 Updated Oct 1, 2020

• CreativeButtons

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

• BlockRevealers

  Ideas for revealing content in a schematic box look as seen around the Web lately.
  HTML 92 539 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 281 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 177 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 251 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 16, 2020

• DiagonalThumbnails

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

• MagneticButtons

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

  button-animation
  JavaScript MIT 48 184 0 0 Updated Aug 5, 2020

• RapidImageHoverMenu

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

• RapidImageHoverMenuEffects

  A set of hover effects on menu items with images.
  JavaScript MIT 12 54 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 9 25 0 0 Updated Jun 24, 2020

• ImageGridMotionEffect

  A motion hover effect for a background grid of images.

  javascript css layout gsap hover webdesign
  JavaScript MIT 10 58 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 27 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 23 0 0 Updated Jun 5, 2020

• ScrollLoopMenu

  A simple infinitely scrollable menu based on the looping scroll illusion of cloned items.
  JavaScript MIT 6 37 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 156 415 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