Projects in Awesome Lists by codrops

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.

Last synced: 16 May 2025

https://github.com/codrops/Animocons

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.

Last synced: 17 Mar 2025

https://github.com/codrops/ParticleEffectsButtons

A little library that can be used for bursting particles effects on buttons and other elements

animation animejs button javascript-library particles

Last synced: 30 Mar 2025

https://github.com/codrops/SeatPreview

An experimental demo where a 3D perspective preview is shown for a selected seat in a cinema room.

Last synced: 23 Apr 2025

https://github.com/codrops/DistortedButtonEffects

A set of inspirational, highly experimental distortion effects for buttons using SVG filters. By Adrien Denat.

Last synced: 09 May 2025

https://github.com/codrops/modalwindoweffects

A set of experimental modal window appearance effects with CSS transitions and animations.

Last synced: 04 Apr 2025

https://github.com/codrops/ModalWindowEffects

A set of experimental modal window appearance effects with CSS transitions and animations.

Last synced: 02 Apr 2025

https://github.com/codrops/BookBlock

A jQuery plugin that will create a booklet-like component that let's you navigate through its items by flipping the pages.

Last synced: 31 Mar 2025

https://github.com/codrops/TextInputEffects

Simple styles and effects for enhancing text input interactions.

Last synced: 15 Mar 2025

https://github.com/codrops/NotificationStyles

Various simple ideas and effects for unobtrusive notifications on a website.

Last synced: 21 Mar 2025

https://github.com/codrops/ElasticProgress

Creates a button that turns into a progress bar with a elastic effect. Based on the Dribbble shot "Download" by xjw

Last synced: 02 Apr 2025

https://github.com/codrops/interactive3dmallmap

An interactive 3D mall map concept with a sidebar search and pin indicators for every level.

Last synced: 06 Jul 2025

https://github.com/codrops/LineMenuStyles

An open collection of menu styles that use the line as creative design element.

Last synced: 29 Oct 2025

https://github.com/codrops/Interactive3DMallMap

An interactive 3D mall map concept with a sidebar search and pin indicators for every level.

Last synced: 26 Apr 2025

https://github.com/codrops/CreativeButtons

Some creative and modern button styles and effects for your inspiration.

Last synced: 16 Nov 2025

https://github.com/codrops/fullscreenlayoutpagetransitions

This responsive layout is based on an initial grid of four boxes. Once a box is clicked, it gets resized to fullscreen and the other boxes scale down and fade out. In the work section we experiment with another transition which is to show a panel by making it appear from the bottom while scaling the current one down. To see it in action, open the work section and click on one of the portfolio items and navigate through them.

Last synced: 06 Jul 2025

https://github.com/codrops/ResponsiveMultiLevelMenu

A responsive multi-level menu that shows its submenus in their own context, allowing for a space-saving presentation and usage.

Last synced: 14 Mar 2025

https://github.com/codrops/calendario

A jQuery calendar plugin for creating flexible calendars.

Last synced: 04 Oct 2025

https://github.com/codrops/OffCanvasMenuEffects

Some inspiration for off-canvas menu effects and styles using CSS transitions and SVG path animations.

Last synced: 13 Mar 2025

https://github.com/codrops/CSSGlitchEffect

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.

Last synced: 14 May 2025

https://github.com/codrops/PageLoadingEffects

Modern ways of revealing new content using SVG animations.

Last synced: 16 Mar 2025

https://github.com/codrops/ProgressButtonStyles

A set of flat and 3D progress button styles where the button itself serves as a progress indicator. 3D styles are used for showing the progress indication on one side of the button while rotating the button in perspective.

Last synced: 16 Nov 2025

https://github.com/codrops/ButtonComponentMorph

Inspiration for revealing content by morphing the action element.

Last synced: 09 May 2025

https://github.com/codrops/DragDropInteractions

Some inspiration for drag and drop interactions for the modern UI.

Last synced: 17 Apr 2025

https://github.com/codrops/ImageTiltEffect

A subtle tilt effect for images. The idea is to move and rotate semi-transparent copies with the same background image in order to create a subtle motion or depth effect.

Last synced: 02 Apr 2025

https://github.com/codrops/SelectInspiration

Creative styles and ideas for custom select elements.

Last synced: 13 Mar 2025

https://github.com/codrops/SegmentEffect

Background image segment effect as seen on [Filippo Bello's Portfolio](http://www.filippobello.com/portfolio).

Last synced: 02 Apr 2025

https://github.com/codrops/GridLoadingEffects

Some inspiration for loading effects of grid items using CSS animations.

Last synced: 03 Apr 2025

https://github.com/codrops/MagneticButtons

A set of buttons with a magnetic interaction and a hover effect.

button-animation

Last synced: 02 Apr 2025

https://github.com/codrops/SlitSlider

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.

Last synced: 15 Mar 2025

https://github.com/codrops/simpledropdowneffects

A jQuery plugin for transforming select inputs into drop-down lists with some simple expanding effects.

Last synced: 19 Jun 2025

https://github.com/codrops/AnimatedHeader

A fixed header that will animate its size on scroll. The inner elements will also adjust their size with a transition.

Last synced: 18 Apr 2025

https://github.com/codrops/animatedheader

A fixed header that will animate its size on scroll. The inner elements will also adjust their size with a transition.

Last synced: 10 Aug 2025

https://github.com/codrops/ImageRevealHover

A set of link hover effects that reveal a thumbnail in different creative ways.

Last synced: 16 May 2025

https://github.com/codrops/Baraja

Baraja is a jQuery plugin that allows to move elements in a card-like fashion and spread them like one would spread a deck of cards on a table. It uses CSS transforms for rotating and translating the items. There are several options available that will create various spreading possibilities of the items, for example, moving the items laterally or rotating them in a fan-like way.

Last synced: 24 Apr 2025

https://github.com/codrops/DirectionAwareHoverEffect

How to create a direction-aware hover effect using CSS3 and jQuery. The idea is to slide in an overlay from the direction we are moving with the mouse.

Last synced: 15 Mar 2025

https://github.com/codrops/GammaGallery

Gamma Gallery is an experimental responsive image gallery that attempts to provide an adjustable responsive images approach taking its grid layout and the full slideshow view into account.

Last synced: 15 Mar 2025

https://github.com/codrops/TooltipAnimations

Some little ideas for bouncy and playful tooltip shapes and animations with SVG and anime.js. Among other styles, we use shape morphing and transform.

Last synced: 10 May 2025

https://github.com/codrops/MorphingBackgroundShapes

A decorative website background effect where SVG shapes morph and transform on scroll.

Last synced: 02 Apr 2025

https://github.com/codrops/thumbnailgridexpandingpreview

A tutorial on how to create a thumbnail grid with an expanding image preview similar to the effect seen on Google Images.

Last synced: 06 Jul 2025

https://github.com/codrops/ThumbnailGridExpandingPreview

A tutorial on how to create a thumbnail grid with an expanding image preview similar to the effect seen on Google Images.

Last synced: 02 Apr 2025

https://github.com/codrops/linehoverstyles

A couple of simple & subtle line hover animations for links using CSS only.

Last synced: 24 Jul 2025

https://github.com/codrops/LineHoverStyles

A couple of simple & subtle line hover animations for links using CSS only.

Last synced: 17 Apr 2025

https://github.com/codrops/GradientTopographyAnimation

Shape layers animation based on Polar Vector's work "Gradient Topography"

Last synced: 16 Mar 2025

https://github.com/codrops/smoothscrollingimageeffects

A small set of ideas on animating images and other elements while smooth scrolling a page.

css demo javascript layout smooth-scrolling

Last synced: 06 Jul 2025

https://github.com/codrops/SmoothScrollingImageEffects

A small set of ideas on animating images and other elements while smooth scrolling a page.

css demo javascript layout smooth-scrolling

Last synced: 17 Apr 2025

https://github.com/codrops/AnimatedResponsiveImageGrid

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.

Last synced: 15 Mar 2025

https://github.com/codrops/gridlayoutslideshow

A slideshow where each slide has an individual CSS grid layout and a reveal effect when navigating.

Last synced: 13 Aug 2025

https://github.com/codrops/menuhovereffects

Some inspiration for menu hover effects.

animation-effects animejs css hover javascript

Last synced: 16 Aug 2025

https://github.com/codrops/DialogEffects

A collection of dialog effects using CSS (and SVG) animations.

Last synced: 16 Nov 2025

https://github.com/codrops/NaturalLanguageForm

An experimental form that uses natural language instead of the usual form layout. Values are entered using custom input elements.

Last synced: 04 Apr 2025

https://github.com/codrops/DiagonalSlideshow

A slideshow with a diagonal look and a content preview

Last synced: 09 Jul 2025

https://github.com/codrops/TypeShuffleAnimation

A shuffling type animation based on the effect seen on LCD 1.

Last synced: 10 Apr 2025

https://github.com/codrops/ElasticSVGElements

Adding elasticity with SVG shape animations for enhanced UI interactions.

Last synced: 30 Apr 2025

https://github.com/codrops/smoothscrollanimations

Demo of a tutorial on how to add smooth page scrolling with an inner image animation

css demo javascript scrolling smooth-scrolling tutorial

Last synced: 21 Jul 2025

https://github.com/codrops/SmoothScrollAnimations

Demo of a tutorial on how to add smooth page scrolling with an inner image animation

css demo javascript scrolling smooth-scrolling tutorial

Last synced: 09 Jul 2025

https://github.com/codrops/PagePreloadingEffect

A simple page preloading animation based on the effect seen on [Fontface Ninja](http://fontface.ninja/)

Last synced: 15 Mar 2025

https://github.com/codrops/animatedframeslideshow

An experimental slideshow that shows an animated SVG frame when transitioning between slides.

Last synced: 19 Sep 2025

https://github.com/codrops/SearchUIEffects

A couple of schematic, inspirational proof-of-concepts for how to show the search interface on a website using CSS animations.

Last synced: 15 Mar 2025

https://github.com/codrops/Stapel

An experimental jQuery plugin that will group thumbnails by a shared data-attribute into a pile. When clicking on the pile, the thumbnails that belong to that pile will be spread into a grid using CSS transitions.

Last synced: 13 Jul 2025

https://github.com/codrops/stapel

An experimental jQuery plugin that will group thumbnails by a shared data-attribute into a pile. When clicking on the pile, the thumbnails that belong to that pile will be spread into a grid using CSS transitions.

Last synced: 06 Jul 2025

https://github.com/codrops/MorphingSearch

A simple effect idea for a search input that morphs into a fullscreen overlay. The idea is to enlarge the search input and show some relevant content or search results.

Last synced: 15 Mar 2025

https://github.com/codrops/gridgallery

A responsive grid gallery based on the [Google Chromebook getting started](https://gweb-gettingstartedguide.appspot.com/) guide gallery. In this Blueprint we use Masonry for the grid and 3D transforms for navigating the items.

Last synced: 14 Jul 2025

https://github.com/codrops/scrollinglettersanimation

A switching title effect where a fixed element changes depending on the scroll position.

animation css effect intersection-observer javascript scrolling typography

Last synced: 24 Jul 2025

https://github.com/codrops/letterinteractions

Some inspiration for playful typographical effects and hover interactions on letters.

Last synced: 07 Oct 2025

https://github.com/codrops/OrganicShapeAnimations

Some shape morphing hover effects on images using SVG clipPath.

Last synced: 02 Apr 2025

https://github.com/codrops/ImageTrailEffects

A set of effects for mouse-following image trails that show a random series of images.

Last synced: 02 Apr 2025

https://github.com/codrops/ImageGridEffects

Some inspiration for effects on image grids. The ideas include animations on the opening grid item, the disappearance of the grid and the resulting view.

Last synced: 10 Apr 2025

https://github.com/codrops/tooltipstylesinspiration

Various hover tooltip styles, shapes and effects for your inspiration.

Last synced: 27 Jul 2025

https://github.com/codrops/AnimatedGridPreviews

A template where one can switch between little image previews that are scattered around the page.

Last synced: 09 Jul 2025

https://github.com/codrops/animatedgridpreviews

A template where one can switch between little image previews that are scattered around the page.

Last synced: 20 Jul 2025

https://github.com/codrops/Windy

A jQuery Plugin for Swift Content Navigation

Last synced: 31 Mar 2025

https://github.com/codrops/GridZoom

A simple image grid layout where a small grid image zooms to become larger while a content view opens.

Last synced: 10 Apr 2025

https://github.com/codrops/NavigationIndicators

Some navigation style ideas for slideshows, pages and other components that require a navigation. Shown on the example of a vertical slideshow.

Last synced: 13 Mar 2025

https://github.com/codrops/pfold

A highly experimental jQuery plugin that let's you unfold elements to reveal more content just like a piece of paper. Unfolding directions and number of steps can be specified.

Last synced: 14 Oct 2025

https://github.com/codrops/PFold

A highly experimental jQuery plugin that let's you unfold elements to reveal more content just like a piece of paper. Unfolding directions and number of steps can be specified.

Last synced: 15 Mar 2025

https://github.com/codrops/morphingpagetransition

A simple morphing page transition effect where an SVG path gets morphed into another while the current page moves up.

Last synced: 15 Oct 2025

https://github.com/codrops/FullWidthTabs

100% width tabbed content with some example media queries for smaller screens.

Last synced: 14 Mar 2025

https://github.com/codrops/rapidimagehovermenu

A hover effect for a menu where images appear with an animation for each item.

Last synced: 09 Oct 2025

https://github.com/codrops/audiovisualizers

An exploration of modern, line-style sound visualization powered by p5js and its p5.sound library.

Last synced: 29 Jul 2025

https://github.com/codrops/3DRestaurantMenu

A responsive 3D menu concept for a restaurant website. The idea is to show the menu as a folded flyer and unfold it in order to show the menu items.

Last synced: 15 Mar 2025

https://github.com/codrops/scroll3dgrid

On-scroll animations for perspective image grids with different layouts.

Last synced: 15 Jul 2025

https://github.com/codrops/FullImageReveal

A full image reveal effect with fancy thumbnail sliding.

Last synced: 02 Apr 2025

https://github.com/codrops/animatedcustomcursor

Some ideas for interactive custom cursor animations using SVG filters.

Last synced: 30 Jul 2025

https://github.com/codrops/CardStackEffects

Some effect inspiration for card stacks. The idea is to show animation ideas for positive (accept) or negative (reject) feedback on a generic card element.

Last synced: 29 Oct 2025

https://github.com/codrops/RotatedRevealers

Animated rotated overlays, or "reveal" elements for interesting page transition effects.

animation demo gsap javascript prototype webdesign

Last synced: 10 May 2025

https://github.com/codrops/imagegridmotioneffect

A motion hover effect for a background grid of images.

css gsap hover javascript layout webdesign

Last synced: 28 Jul 2025

Last synced: 02 Apr 2025

https://github.com/codrops/ItemSlider

A tutorial on how to create a simple category slider with a minimal design using CSS animations and jQuery. The idea is to slide the items sequentially depending on the slide direction.

Last synced: 15 Mar 2025