Skip to content

@codrops Codrops

Change the repository type filter

All

    Repositories list

    340 repositories

    • KineticTypePageTransition

      Public
      A concept for a kinetic typography based page transition.
      JavaScript
      •
      MIT License
      •33•102•0•0•Updated May 30, 2025May 30, 2025

    • coding-challenge-planner

      Public
      Daily Frontend Coding Challenge Planner built with Bolt.new
      MIT License
      •1•1•0•0•Updated May 12, 2025May 12, 2025

    • 3DCarousel

      Public
      An on-scroll 3D carousel
      HTML
      •
      MIT License
      •3•18•0•0•Updated May 7, 2025May 7, 2025

    • RepeatingImageTransition

      Public
      HTML
      •
      MIT License
      •5•10•0•0•Updated May 1, 2025May 1, 2025

    • SlideshowAnimations

      Public
      A collection of ideas for slideshow animations.
      JavaScript
      •
      MIT License
      •56•299•1•0•Updated Apr 13, 2025Apr 13, 2025

    • CodropsTemplate

      Public template
      Codrops demo template. Wiki 👉
      CSS
      •
      MIT License
      •30•127•0•0•Updated Mar 22, 2025Mar 22, 2025

    • OneElementScroll

      Public
      A simple concept of animating one element across different waypoints on scroll using GSAP Flip and ScrollTrigger.
      JavaScript
      •
      MIT License
      •16•49•2•0•Updated Nov 20, 2024Nov 20, 2024

    • Staggered3DGridAnimations

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

    • ContextAwareLogoAnimationScroll

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

    • OnScrollLayoutFormations

      Public
      Layout formations on scroll using GSAP
      gsapgsap-scrolltrigger
      HTML
      •
      MIT License
      •18•81•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
      •6•46•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•144•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
      •150•1.3k•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
      •177•1.5k•4•0•Updated Aug 5, 2024Aug 5, 2024

    • SidebarTransitions

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

    • PageTransitions

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

    • LineTextHoverAnimations

      Public
      Some hover animations for a terminal-like look
      HTML
      •
      MIT License
      •23•123•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
      •12•30•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
      •25•55•0•0•Updated May 29, 2024May 29, 2024

    • OnScrollTextHighlight

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

    • ScrollBlurTypography

      Public
      Animations for revealing blurry text on scroll.
      JavaScript
      •
      MIT License
      •20•118•1•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
      •9•31•0•0•Updated Apr 14, 2024Apr 14, 2024

    • ImageExpansionTypography

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

    • HoverGrid

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

    • 3DStackMotion

      Public
      An experimental 3D card stack animation on scroll.
      HTML
      •
      MIT License
      •21•84•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
      •23•101•0•0•Updated Feb 28, 2024Feb 28, 2024

    • codrops-sketches

      Public
      A collection of demo variations, ideas, concepts & experiments.
      JavaScript
      •
      MIT License
      •56•172•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
      •39•111•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•61•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
      •18•63•0•0•Updated Jan 10, 2024Jan 10, 2024