Codrops

Repositories

• GlitchyGrid

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

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

• TypographyMotion

  Recreation of Thibaud Allie's letter stagger animation.

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

• ImageGridMotionEffect

  A motion hover effect for a background grid of images.

  javascript css layout gsap hover webdesign
  JavaScript MIT 3 36 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 24 99 0 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 5 16 0 0 Updated Jun 5, 2020

• ScrollLoopMenu

  A simple infinitely scrollable menu based on the looping scroll illusion of cloned items.
  JavaScript MIT 2 18 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 153 409 13 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 70 1 0 Updated May 7, 2020

• GooeyTextHoverEffect

  A gooey text hover effect using SVG filters

  javascript css web-design svg-filter
  HTML MIT 11 68 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 7 40 0 0 Updated Apr 7, 2020

• CSSMarqueeMenu

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

• AnimatedCustomCursor

  Some ideas for interactive custom cursor animations using SVG filters.
  JavaScript MIT 7 43 0 0 Updated Mar 24, 2020

• DistortedMenuLinkEffects

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

• DistortedLinkEffects

  Some ideas for decorative link distortion effects using SVG filters.

  links svg-filters hover-effects
  JavaScript MIT 8 76 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 14 49 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 27 102 1 0 Updated Feb 25, 2020

• ImageDraggingEffects

  A set of playful dragging effects for images using various techniques.
  JavaScript 8 47 0 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 46 266 3 1 Updated Jan 29, 2020

• HoverEffectIdeas

  Some inspiration and modern ideas for subtle hover effects.
  CSS 291 1,461 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 171 441 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 53 207 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 131 463 19 1 Updated Aug 14, 2019

• ImageTrailEffects

  A set of effects for mouse-following image trails that show a random series of images.
  JavaScript 29 115 0 0 Updated Aug 7, 2019

• DraggableImageStrip

  A draggable image strip layout with a content preview powered by Draggabilly and TweenMax.

  javascript css html-template gsap draggable tweenmax
  HTML 18 63 1 0 Updated Jun 11, 2019

• AnimatedGridPreviews

  A template where one can switch between little image previews that are scattered around the page.
  JavaScript 46 175 1 0 Updated May 19, 2019

• AnimatedImageColumns

  An experimental layout where image columns get animated when a menu item is clicked.
  JavaScript 31 82 0 0 Updated May 16, 2019

• ImageRevealHover

  A set of link hover effects that reveal a thumbnail in different creative ways.
  JavaScript 54 328 3 0 Updated May 13, 2019

• ParticleEffectsButtons

  A little library that can be used for bursting particles effects on buttons and other elements

  animation button javascript-library particles animejs
  JavaScript 133 1,099 2 0 Updated Apr 25, 2019

• SVGImageHover

  Some SVG filters-powered distortion effects shown on images when hovering a link.
  JavaScript 16 61 0 0 Updated Mar 12, 2019