Skip to content

@codrops Codrops

Change the repository type filter

All

    Repositories list

    70 repositories

    • 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

    • CodropsTemplate

      Public template
      Codrops demo template. Wiki 👉
      CSS
      •
      MIT License
      •31•114•0•0•Updated Apr 23, 2024Apr 23, 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

    • LineTypeEffect

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

    • HoverEffectIdeas

      Public
      Some inspiration and modern ideas for subtle hover effects.
      CSS
      •314•1.6k•2•2•Updated Oct 17, 2023Oct 17, 2023

    • ImageTilesMenu

      Public
      An animation featuring image tiles that transform into a full image when a menu item is clicked.
      CSS
      •
      MIT License
      •15•26•2•0•Updated Apr 26, 2023Apr 26, 2023

    • ButtonHoverStyles

      Public
      Some ideas for CSS-only button hover styles and animations
      CSS
      •
      MIT License
      •72•270•1•0•Updated Feb 20, 2023Feb 20, 2023

    • GridLayoutAnimation

      Public
      A simple layout transition where a small grid animates to a larger view, using the Flip plugin from GreenSock.
      javascriptanimationlayoutwebdesigngsap-flip
      CSS
      •
      MIT License
      •5•42•0•0•Updated Jul 13, 2022Jul 13, 2022

    • ExpandingRoundedMenu

      Public
      An expanding menu animation with a cover unreveal effect in the background.
      CSS
      •
      MIT License
      •19•53•0•0•Updated Mar 16, 2022Mar 16, 2022

    • Theodore

      Public
      A little menu effect with an SVG overlay and an infinite background CSS animation.
      csstemplatefront-endanimation
      CSS
      •
      MIT License
      •27•83•0•0•Updated Nov 2, 2021Nov 2, 2021

    • LineHoverStyles

      Public
      A couple of simple & subtle line hover animations for links using CSS only.
      CSS
      •
      MIT License
      •69•344•2•1•Updated Feb 19, 2021Feb 19, 2021

    • CSSProgress

      Public
      A tutorial on how to create shaded CSS-only progress bars with Sass. By Rafael González.
      CSS
      •27•95•1•8•Updated Oct 2, 2020Oct 2, 2020

    • IconHoverEffects

      Public
      A set of simple round icon hover effects with CSS transitions and animations for your inspiration.
      CSS
      •178•724•1•0•Updated Oct 2, 2020Oct 2, 2020

    • CreativeButtons

      Public
      Some creative and modern button styles and effects for your inspiration.
      CSS
      •140•735•2•1•Updated Oct 1, 2020Oct 1, 2020

    • TriplePanelImageSlider

      Public
      A tutorial about how to create a triple panel jQuery image slider with a 3D look and swipe-like transitions.
      CSS
      •11•22•0•1•Updated Oct 1, 2020Oct 1, 2020

    • ShapeHoverEffectSVG

      Public
      Hover effect as seen on The Christmas Experiments website using SVG for the shape and Snap.svg for the animations.
      CSS
      •58•190•0•1•Updated Sep 30, 2020Sep 30, 2020

    • CSSMarqueeMenu

      Public
      A simple CSS based marquee effect for a menu.
      CSS
      •
      MIT License
      •44•163•0•0•Updated Apr 2, 2020Apr 2, 2020

    • SlitSlider

      Public
      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
      •135•458•19•1•Updated Aug 14, 2019Aug 14, 2019

    • PerspectivePageViewNavigation

      Public
      Some effects for a perspective page view navigation where the page itself gets pushed away in 3D to reveal a menu or other items.
      CSS
      •71•350•4•1•Updated Jan 16, 2019Jan 16, 2019

    • MultiboxMenu

      Public
      A simple grid-powered multibox menu that shows with a reveal animation.
      CSS
      •41•151•2•0•Updated Oct 3, 2018Oct 3, 2018

    • CollapsingLogo

      Public
      A recreation of the collapsing logo effect seen on PracticalVR.
      CSS
      •17•57•0•0•Updated Jun 5, 2018Jun 5, 2018

    • LineMenuStyles

      Public
      An open collection of menu styles that use the line as creative design element.
      CSS
      •207•747•4•1•Updated Mar 16, 2018Mar 16, 2018

    • GlitchSlideshow

      Public
      A slideshow that uses a CSS glitch effect for slide transitions.
      javascriptcssslideshow
      CSS
      •31•113•0•0•Updated Mar 10, 2018Mar 10, 2018

    • NotificationStyles

      Public
      Various simple ideas and effects for unobtrusive notifications on a website.
      CSS
      •124•931•6•0•Updated Mar 5, 2018Mar 5, 2018

    • Calendario

      Public
      A jQuery calendar plugin for creating flexible calendars.
      CSS
      •169•679•29•2•Updated Jan 17, 2018Jan 17, 2018

    • CSSGlitchEffect

      Public
      An experimental glitch effect powered by CSS animations and the clip-path property. Inspired by the technique seen on the speakers page of the 404 conference.
      CSS
      •120•690•0•0•Updated Dec 22, 2017Dec 22, 2017

    • CircularProgressButton

      Public
      Implementation of Colin Garvin's [submit button concept](http://dribbble.com/shots/1426764-Submit-Button)
      CSS
      •63•320•0•0•Updated Oct 18, 2017Oct 18, 2017

    • SelectInspiration

      Public
      Creative styles and ideas for custom select elements.
      CSS
      •128•544•11•1•Updated Aug 22, 2017Aug 22, 2017

    • TextInputEffects

      Public
      Simple styles and effects for enhancing text input interactions.
      CSS
      •172•967•3•0•Updated Mar 19, 2017Mar 19, 2017