Codrops

Repositories

• OutdoorsTemplate

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

• MenuFullGrid

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

• DiagonalThumbnails

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

• AnimatedCustomCursor

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

• MagneticButtons

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

  button-animation
  JavaScript MIT 29 157 0 0 Updated Aug 5, 2020

• RapidImageHoverMenu

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

• RapidImageHoverMenuEffects

  A set of hover effects on menu items with images.
  JavaScript MIT 10 45 0 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 3 21 0 0 Updated Jun 24, 2020

• TypographyMotion

  Recreation of Thibaud Allie's letter stagger animation.

  animation gsap web-design splittingjs
  JavaScript MIT 5 22 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 7 51 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 23 108 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 6 20 0 0 Updated Jun 5, 2020

• ScrollLoopMenu

  A simple infinitely scrollable menu based on the looping scroll illusion of cloned items.
  JavaScript MIT 4 32 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 410 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 24 75 1 0 Updated May 7, 2020

• GooeyTextHoverEffect

  A gooey text hover effect using SVG filters

  javascript css web-design svg-filter
  HTML MIT 18 76 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 9 42 0 0 Updated Apr 7, 2020

• CSSMarqueeMenu

  A simple CSS based marquee effect for a menu.
  CSS MIT 11 62 0 0 Updated Apr 2, 2020

• DistortedMenuLinkEffects

  Some menu styles and ideas for decorative link distortion effects using SVG filters.
  HTML MIT 10 47 0 0 Updated Mar 18, 2020

• DistortedLinkEffects

  Some ideas for decorative link distortion effects using SVG filters.

  links svg-filters hover-effects
  JavaScript MIT 9 82 1 0 Updated Mar 13, 2020

• BackgroundScaleHoverEffect

  Recreation of the background scale hover effect seen on the DDD Hotel website using CSS clip paths.
  HTML MIT 16 59 0 0 Updated Mar 11, 2020

• RotatedRevealers

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

  javascript demo prototype animation gsap webdesign
  JavaScript 29 112 1 0 Updated Feb 25, 2020

• ImageDraggingEffects

  A set of playful dragging effects for images using various techniques.
  JavaScript 11 52 1 1 Updated Feb 7, 2020

• SmoothScrollingImageEffects

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

  javascript css demo layout smooth-scrolling
  JavaScript 52 277 3 1 Updated Jan 29, 2020

• HoverEffectIdeas

  Some inspiration and modern ideas for subtle hover effects.
  CSS 291 1,474 2 1 Updated Jan 28, 2020

• SamsungGrid

  Recreating the grid loading effect as seen on the Samsung Corporate Design Center website.
  JavaScript 51 139 1 1 Updated Oct 22, 2019

• AnimatedHeader

  A fixed header that will animate its size on scroll. The inner elements will also adjust their size with a transition.
  HTML 173 446 8 1 Updated Oct 11, 2019

• SmoothScrollAnimations

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

  javascript css demo tutorial scrolling smooth-scrolling
  JavaScript 58 220 3 1 Updated Sep 13, 2019

• 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 132 463 19 1 Updated Aug 14, 2019