Skip to content

@codrops Codrops

Change the repository type filter

All

    Repositories list

    336 repositories

    • Staggered3DGridAnimations

      Public
      A playful concept where we use scroll-based animations to create 3D grid effects and other transitions.
      HTML
      •
      MIT License
      •1•16•0•0•Updated Oct 16, 2024Oct 16, 2024

    • 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

    • OnScrollLayoutFormations

      Public
      Layout formations on scroll using GSAP
      gsapgsap-scrolltrigger
      HTML
      •
      MIT License
      •10•39•2•0•Updated Sep 19, 2024Sep 19, 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

    • GooeyTextHoverEffect

      Public
      A gooey text hover effect using SVG filters
      javascriptcssweb-designsvg-filter
      HTML
      •
      MIT License
      •34•137•1•0•Updated Aug 6, 2024Aug 6, 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

    • SidebarTransitions

      Public
      Some inspiration for transition effects for off-canvas navigations.
      CSS
      •248•1.6k•9•1•Updated Aug 5, 2024Aug 5, 2024

    • PageTransitions

      Public
      A showcase collection of various page transition effects using CSS animations.
      CSS
      •451•2.2k•13•2•Updated Aug 5, 2024Aug 5, 2024

    • LineTextHoverAnimations

      Public
      Some hover animations for a terminal-like look
      HTML
      •
      MIT License
      •13•80•0•0•Updated Jun 19, 2024Jun 19, 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

    • CodropsTemplate

      Public template
      Codrops demo template. Wiki 👉
      CSS
      •
      MIT License
      •31•114•0•0•Updated Apr 23, 2024Apr 23, 2024

    • ReflectionScroll

      Public
      An decorative reflection effect where we simulate a reflected page and scroll it along with the content.
      HTML
      •
      MIT License
      •7•25•0•0•Updated Apr 14, 2024Apr 14, 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

    • HoverGrid

      Public
      A grid item reveal animation on hover inspired by Metalab
      CSS
      •
      MIT License
      •11•26•0•0•Updated Mar 13, 2024Mar 13, 2024

    • 3DStackMotion

      Public
      An experimental 3D card stack animation on scroll.
      HTML
      •
      MIT License
      •15•75•0•0•Updated Mar 6, 2024Mar 6, 2024

    • astro-shop-view-transitions

      Public
      Minimalist Shop with Browser View Transitions API and Astro for a smoother navigation experience.
      astro
      Astro
      •
      MIT License
      •18•83•0•0•Updated Feb 28, 2024Feb 28, 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

    • StickySections

      Public
      Some ideas of how sticky sections can be animated while exiting the viewport.
      HTML
      •
      MIT License
      •31•80•0•0•Updated Feb 4, 2024Feb 4, 2024

    • ConnectedGrid

      Public
      Some ideas for simple on-scroll animations for connected grid items.
      HTML
      •
      MIT License
      •17•58•1•0•Updated Jan 30, 2024Jan 30, 2024

    • TextClipScroll

      Public
      Experimental on-scroll typography effects using SVG clip-paths.
      scrollingsvg-animationsgsap-scroll
      HTML
      •
      MIT License
      •13•53•0•0•Updated Jan 10, 2024Jan 10, 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

    • ContentLayoutTransition

      Public
      An experimental layout transition where a stack of images animates to a gallery view, showing some more content.
      HTML
      •
      MIT License
      •14•48•1•0•Updated Dec 2, 2023Dec 2, 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

    • LineTypeEffect

      Public
      CSS
      •
      MIT License
      •4•10•0•1•Updated Nov 6, 2023Nov 6, 2023