Skip to content

@codrops Codrops

Change the repository type filter

All

    Repositories list

    148 repositories

    • ContextAwareLogoAnimationScroll

      Public
      Exploring how fixed elements can hide and reveal based on scroll interactions with playful, context-aware animations.
      JavaScript
      •
      MIT License
      •3•20•0•0•Updated Oct 9, 2024Oct 9, 2024

    • OnScrollSVGFilterText

      Public
      A small set of scroll-based SVG filter animations on HTML text.
      JavaScript
      •
      MIT License
      •3•27•0•0•Updated Aug 22, 2024Aug 22, 2024

    • ParticleEffectsButtons

      Public
      A little library that can be used for bursting particles effects on buttons and other elements
      animationbuttonjavascript-libraryparticlesanimejs
      JavaScript
      •149•1.2k•2•0•Updated Aug 5, 2024Aug 5, 2024

    • Animocons

      Public
      Animated icons powered by the motion graphics library mo.js by Oleg Solomka. Inspiration comes from the Dribbble shot ["Like Animation"](https://dribbble.com/shots/2527200-Like-Animation) by Daryl Ginn.
      JavaScript
      •176•1.5k•4•0•Updated Aug 5, 2024Aug 5, 2024

    • PushGridItems

      Public
      Animations for grid items based on a concept by Rémi Clauss.
      JavaScript
      •
      MIT License
      •9•20•0•0•Updated Jun 5, 2024Jun 5, 2024

    • IntroGridMotionTransition

      Public
      A little hover motion effect on a grid and an intro animation.
      JavaScript
      •
      MIT License
      •20•43•0•0•Updated May 29, 2024May 29, 2024

    • OnScrollTextHighlight

      Public
      Some scroll-based effects for text highlights
      JavaScript
      •
      MIT License
      •16•57•1•0•Updated May 23, 2024May 23, 2024

    • ScrollBlurTypography

      Public
      Animations for revealing blurry text on scroll.
      JavaScript
      •
      MIT License
      •15•89•1•0•Updated Apr 23, 2024Apr 23, 2024

    • ImageExpansionTypography

      Public
      An expanding image animation inside of a typographic block.
      JavaScript
      •
      MIT License
      •9•29•0•0•Updated Apr 2, 2024Apr 2, 2024

    • codrops-sketches

      Public
      A collection of demo variations, ideas, concepts & experiments.
      JavaScript
      •
      MIT License
      •49•144•0•0•Updated Feb 17, 2024Feb 17, 2024

    • SlicedTextEffect

      Public
      A scroll-based sliced text animation
      JavaScript
      •
      MIT License
      •11•49•0•0•Updated Dec 5, 2023Dec 5, 2023

    • OnScrollTypographyAnimations

      Public
      Inspiration and ideas for on-scroll typography animations that add an extra layer of creativity to a website design.
      JavaScript
      •
      MIT License
      •83•293•3•0•Updated Dec 5, 2023Dec 5, 2023

    • OnScrollShapeMorph

      Public
      Morphing shape animations on scroll
      JavaScript
      •
      MIT License
      •22•59•0•0•Updated Nov 16, 2023Nov 16, 2023

    • PixelGooeyTooltip

      Public
      A dynamic tooltip animation with various reveal effects, comprised of different amounts of fragments appearing.
      JavaScript
      •
      MIT License
      •9•45•0•0•Updated Nov 8, 2023Nov 8, 2023

    • LayersAnimation

      Public
      Some ideas for speedy page transition animations with layered images using clip-path.
      JavaScript
      •
      MIT License
      •8•58•1•0•Updated Oct 31, 2023Oct 31, 2023

    • CoverPageTransition

      Public
      A cover page transition based on Vitalii Burhonskyi's Dribbble shot.
      JavaScript
      •
      MIT License
      •28•65•0•0•Updated Oct 28, 2023Oct 28, 2023

    • Arctext

      Public
      While CSS3 allows us to rotate letters, it is quite complicated to arrange each letter along a curved path. Arctext.js is a jQuery plugin that let's you do exactly that. Based on Lettering.js, it calculates the right rotation of each letter and distributes the letters equally across the imaginary arc of the given radius.
      JavaScript
      •62•181•6•2•Updated Oct 27, 2023Oct 27, 2023

    • MotionTrailAnimations

      Public
      Some ideas for mouse/touch responsive image animations.
      JavaScript
      •
      MIT License
      •8•48•0•0•Updated Oct 18, 2023Oct 18, 2023

    • GridItemHoverEffect

      Public
      Some hover effects based on the grid design by Alena Orlova.
      JavaScript
      •
      MIT License
      •28•103•0•0•Updated Oct 5, 2023Oct 5, 2023

    • SlideshowAnimations

      Public
      A collection of ideas for slideshow animations.
      JavaScript
      •
      MIT License
      •53•280•1•0•Updated Sep 27, 2023Sep 27, 2023

    • GridFlowEffect

      Public
      A loading and navigation animation where thumbnails flow into a grid.
      JavaScript
      •
      MIT License
      •5•35•0•0•Updated Jul 27, 2023Jul 27, 2023

    • ZoomSlideshow

      Public
      JavaScript
      •
      MIT License
      •6•18•0•0•Updated Jun 23, 2023Jun 23, 2023

    • ClipHoverEffect

      Public
      A similar hover animation to the one seen on the website of Quai Network.
      JavaScript
      •
      MIT License
      •17•76•0•0•Updated Jun 21, 2023Jun 21, 2023

    • DoubleSlideshow

      Public
      JavaScript
      •
      MIT License
      •2•18•0•0•Updated Jun 18, 2023Jun 18, 2023

    • GridToSlider

      Public
      Some ideas for grid to slideshow switch animations using GSAP's Flip plugin.
      JavaScript
      •
      MIT License
      •15•46•0•0•Updated May 4, 2023May 4, 2023

    • FullscreenClipEffect

      Public
      Some inspiration for clip-path animations where a fullscreen image moves into a row/grid of smaller images, morphing its shape along the way.
      JavaScript
      •
      MIT License
      •16•51•0•0•Updated Mar 14, 2023Mar 14, 2023

    • RapidImageHoverMenu

      Public
      A hover effect for a menu where images appear with an animation for each item.
      JavaScript
      •
      MIT License
      •34•163•1•11•Updated Mar 5, 2023Mar 5, 2023

    • DoubleImageHoverEffects

      Public
      Some hover effects that use clip-path animations for revealing the same image again.
      JavaScript
      •
      MIT License
      •25•78•1•0•Updated Mar 1, 2023Mar 1, 2023

    • TypeShuffleAnimation

      Public
      A shuffling type animation based on the effect seen on LCD 1.
      JavaScript
      •
      MIT License
      •60•298•0•0•Updated Feb 8, 2023Feb 8, 2023

    • DraggableMenu

      Public
      A draggable menu that shows a thumbnail preview of an image grid
      templatenavigationlayoutgsapmenudraggabletweenmax
      JavaScript
      •36•142•1•1•Updated Jan 9, 2023Jan 9, 2023