Skip to content

@codrops Codrops

Change the repository type filter

All

    Repositories list

    111 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

    • OnScrollLayoutFormations

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

    • LineTextHoverAnimations

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

    • 3DStackMotion

      Public
      An experimental 3D card stack animation on scroll.
      HTML
      •
      MIT License
      •15•75•0•0•Updated Mar 6, 2024Mar 6, 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

    • 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

    • LoopScrolling

      Public
      Infinite loop scrolling based on the animation seen on Bureau DAM.
      scrollinggsaplenis
      HTML
      •
      MIT License
      •12•37•1•1•Updated Oct 6, 2023Oct 6, 2023

    • OnScrollColumnsRows

      Public
      Scroll-driven animations for columns and rows powered by GSAP.
      HTML
      •
      MIT License
      •23•106•0•0•Updated Aug 15, 2023Aug 15, 2023

    • Scroll3DGrid

      Public
      On-scroll animations for perspective image grids with different layouts.
      HTML
      •
      MIT License
      •51•149•1•0•Updated Aug 3, 2023Aug 3, 2023

    • ScrollBasedLayoutAnimations

      Public
      An exploration of different scroll based layout switch animations using GSAP's ScrollTrigger and Flip.
      HTML
      •
      MIT License
      •82•299•2•0•Updated Jul 20, 2023Jul 20, 2023

    • TextBlockTransitions

      Public
      Some inspiration for transitioning text blocks with different word animations.
      HTML
      •
      MIT License
      •17•77•0•0•Updated Jul 13, 2023Jul 13, 2023

    • OnScrollFilter

      Public
      Combining GSAP's Scroll Trigger and Flip with a SVG Filter, based on a demo by Fabio Ottaviani.
      HTML
      •
      MIT License
      •28•75•0•0•Updated Jul 5, 2023Jul 5, 2023

    • OnScrollTypoAnimations

      Public
      HTML
      •
      MIT License
      •5•12•0•0•Updated Jun 16, 2023Jun 16, 2023

    • GooeyCursor

      Public
      A gooey cursor background effect with SVG filters and CSS blend modes.
      HTML
      •
      MIT License
      •22•81•1•0•Updated Jun 7, 2023Jun 7, 2023

    • ImagePixelLoading

      Public
      A recreation of the on-scroll pixelated image loading effect seen on Felicity Ingram's website
      HTML
      •
      MIT License
      •13•85•0•0•Updated May 24, 2023May 24, 2023

    • AnimatedCodeBackground

      Public
      recreation of the hover effect seen on the customer grid on Evervault.
      HTML
      •
      MIT License
      •17•67•0•0•Updated May 17, 2023May 17, 2023

    • GridViewSwitch

      Public
      A proof-of-concept for a view switch animation from grid to slideshow.
      HTML
      •
      MIT License
      •6•30•0•0•Updated Apr 12, 2023Apr 12, 2023

    • PixelTransition

      Public
      Ideas for pixel page transitions based on an animation by Niccolò Miranda.
      javascriptanimationgsap
      HTML
      •
      MIT License
      •22•74•0•0•Updated Apr 5, 2023Apr 5, 2023

    • UnrevealEffects

      Public
      Some explorations of page transitions using covering elements and CSS clip-paths.
      HTML
      •
      MIT License
      •27•66•1•1•Updated Feb 23, 2023Feb 23, 2023

    • InlineLayoutSwitch

      Public
      Two ideas for animating images from an inline layout to a column and grid-based one.
      HTML
      •
      MIT License
      •8•13•0•0•Updated Nov 22, 2022Nov 22, 2022

    • AnimatedResponsiveImageGrid

      Public
      A jQuery plugin for creating a responsive image grid that will switch images using different animations and timings. This can work nicely as a background or decorative element of a website since we can randomize the appearance of new images and their transitions.
      HTML
      •108•321•19•2•Updated Oct 23, 2022Oct 23, 2022

    • ScrollPanels

      Public
      An exploration of smooth panel scroll effects based on Margot Priolet's website.
      HTML
      •
      MIT License
      •16•49•0•0•Updated Oct 12, 2022Oct 12, 2022

    • MenuToGrid

      Public
      A simple layout animation where the thumbnails of a menu row animate to their position in a content preview grid using GSAP's Flip plugin.
      HTML
      •
      MIT License
      •26•109•0•1•Updated Sep 19, 2022Sep 19, 2022

    • GlitchPerspective

      Public
      A fun hover effect that shows a pixelated image with a glitch animation as seen on buōy's website.
      HTML
      •
      MIT License
      •18•46•0•0•Updated Sep 7, 2022Sep 7, 2022

    • ImageToContent

      Public
      A simple scroll effect and page transition inspired by Vitalii Burhonskyi’s Dribbble shot.
      HTML
      •
      MIT License
      •32•102•0•0•Updated Aug 3, 2022Aug 3, 2022

    • ScrollAnimationsGrid

      Public
      Various effects for images when scrolling a page with a grid.
      scrollinglenisgsap-scrolltrigger
      HTML
      •
      MIT License
      •44•97•0•0•Updated Jul 13, 2022Jul 13, 2022