Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
Projects in Awesome Lists by codrops
A curated list of projects in awesome lists by codrops .
https://github.com/codrops/PageTransitions
A showcase collection of various page transition effects using CSS animations.
Last synced: 31 Jul 2024
https://github.com/codrops/SidebarTransitions
Some inspiration for transition effects for off-canvas navigations.
Last synced: 30 Jul 2024
https://github.com/codrops/HoverEffectIdeas
Some inspiration and modern ideas for subtle hover effects.
Last synced: 30 Jul 2024
https://github.com/codrops/RainEffect
Some experimental rain and water drop effects in different scenarios using WebGL, by Lucas Bebber.
Last synced: 31 Jul 2024
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: 31 Jul 2024
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: 01 Aug 2024
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: 02 Aug 2024
https://github.com/codrops/DistortedButtonEffects
A set of inspirational, highly experimental distortion effects for buttons using SVG filters. By Adrien Denat.
Last synced: 03 Aug 2024
https://github.com/codrops/ModalWindowEffects
A set of experimental modal window appearance effects with CSS transitions and animations.
Last synced: 01 Aug 2024
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: 01 Aug 2024
https://github.com/codrops/TextInputEffects
Simple styles and effects for enhancing text input interactions.
Last synced: 31 Jul 2024
https://github.com/codrops/NotificationStyles
Various simple ideas and effects for unobtrusive notifications on a website.
Last synced: 31 Jul 2024
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: 01 Aug 2024
https://github.com/codrops/Interactive3DMallMap
An interactive 3D mall map concept with a sidebar search and pin indicators for every level.
Last synced: 02 Aug 2024
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: 30 Jul 2024
https://github.com/codrops/OffCanvasMenuEffects
Some inspiration for off-canvas menu effects and styles using CSS transitions and SVG path animations.
Last synced: 30 Jul 2024
https://github.com/codrops/PageLoadingEffects
Modern ways of revealing new content using SVG animations.
Last synced: 31 Jul 2024
https://github.com/codrops/ButtonComponentMorph
Inspiration for revealing content by morphing the action element.
Last synced: 03 Aug 2024
https://github.com/codrops/DragDropInteractions
Some inspiration for drag and drop interactions for the modern UI.
Last synced: 01 Aug 2024
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: 01 Aug 2024
https://github.com/codrops/SelectInspiration
Creative styles and ideas for custom select elements.
Last synced: 30 Jul 2024
https://github.com/codrops/SegmentEffect
Background image segment effect as seen on [Filippo Bello's Portfolio](http://www.filippobello.com/portfolio).
Last synced: 01 Aug 2024
https://github.com/codrops/GridLoadingEffects
Some inspiration for loading effects of grid items using CSS animations.
Last synced: 01 Aug 2024
https://github.com/codrops/MagneticButtons
A set of buttons with a magnetic interaction and a hover effect.
Last synced: 01 Aug 2024
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: 31 Jul 2024
https://github.com/codrops/ImageRevealHover
A set of link hover effects that reveal a thumbnail in different creative ways.
Last synced: 04 Aug 2024
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: 02 Aug 2024
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: 31 Jul 2024
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: 31 Jul 2024
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: 03 Aug 2024
https://github.com/codrops/MorphingBackgroundShapes
A decorative website background effect where SVG shapes morph and transform on scroll.
Last synced: 01 Aug 2024
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: 01 Aug 2024
https://github.com/codrops/GradientTopographyAnimation
Shape layers animation based on Polar Vector's work "Gradient Topography"
Last synced: 31 Jul 2024
https://github.com/codrops/LineHoverStyles
A couple of simple & subtle line hover animations for links using CSS only.
Last synced: 01 Aug 2024
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: 01 Aug 2024
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: 31 Jul 2024
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: 01 Aug 2024
https://github.com/codrops/DiagonalSlideshow
A slideshow with a diagonal look and a content preview
Last synced: 04 Aug 2024
https://github.com/codrops/ElasticSVGElements
Adding elasticity with SVG shape animations for enhanced UI interactions.
Last synced: 02 Aug 2024
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: 04 Aug 2024
https://github.com/codrops/PagePreloadingEffect
A simple page preloading animation based on the effect seen on [Fontface Ninja](http://fontface.ninja/)
Last synced: 31 Jul 2024
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: 31 Jul 2024
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: 04 Aug 2024
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: 31 Jul 2024
https://github.com/codrops/OrganicShapeAnimations
Some shape morphing hover effects on images using SVG clipPath.
Last synced: 01 Aug 2024
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: 01 Aug 2024
https://github.com/codrops/ImageTrailEffects
A set of effects for mouse-following image trails that show a random series of images.
Last synced: 01 Aug 2024
https://github.com/codrops/AnimatedGridPreviews
A template where one can switch between little image previews that are scattered around the page.
Last synced: 04 Aug 2024
https://github.com/codrops/Windy
A jQuery Plugin for Swift Content Navigation
Last synced: 01 Aug 2024
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: 30 Jul 2024
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: 31 Jul 2024
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: 01 Aug 2024
https://github.com/codrops/FullWidthTabs
100% width tabbed content with some example media queries for smaller screens.
Last synced: 30 Jul 2024
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: 31 Jul 2024
https://github.com/codrops/FullImageReveal
A full image reveal effect with fancy thumbnail sliding.
Last synced: 01 Aug 2024
https://github.com/codrops/RotatedRevealers
Animated rotated overlays, or "reveal" elements for interesting page transition effects.
animation demo gsap javascript prototype webdesign
Last synced: 03 Aug 2024
https://github.com/codrops/css-reference-issues
A repo for collecting issues and suggestions for the Codrops CSS Reference http://tympanus.net/codrops/css_reference/
Last synced: 03 Aug 2024
https://github.com/codrops/FancyLetterAnimation
An experimental SVG letter animation inspired by the Dribbble shot ["Shading Letters in Illustrator"](https://dribbble.com/shots/2943049-Shading-Letters-in-Illustrator) by Jake Bartlett's. Powered by Julian Garnier's [anime.js](http://anime-js.com/).
Last synced: 01 Aug 2024
https://github.com/codrops/DynamicGrid
A dynamic grid layout that let's you choose how many rows and columns of items are shown. Partly based on the visualization of Google Trends, except that you can add transitions.
Last synced: 01 Aug 2024
https://github.com/codrops/ImageGridMotionEffect
A motion hover effect for a background grid of images.
css gsap hover javascript layout webdesign
Last synced: 01 Aug 2024
https://github.com/codrops/DistortedLinkEffects
Some ideas for decorative link distortion effects using SVG filters.
hover-effects links svg-filters
Last synced: 01 Aug 2024
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: 31 Jul 2024
https://github.com/codrops/PageRevealEffects
Some ideas for modern multi-layer page transitions using CSS Animations.
Last synced: 01 Aug 2024
https://github.com/codrops/FullscreenScroll
A fullscreen scroll-based slideshow with a content view powered by GreenSock's Observer plugin.
Last synced: 02 Aug 2024
https://github.com/codrops/BackgroundScaleHoverEffect
Recreation of the background scale hover effect seen on the DDD Hotel website using CSS clip paths.
Last synced: 01 Aug 2024
https://github.com/codrops/PasswordStrengthVisualization
Visual feedback for password strength on an image based on Colibro's sign up form.
Last synced: 01 Aug 2024
https://github.com/codrops/GlitchSlideshow
A slideshow that uses a CSS glitch effect for slide transitions.
Last synced: 30 Jul 2024
https://github.com/codrops/WobblySlideshowEffect
The slides in this slideshow wobble as they move. The effect is based on Sergey Valiukh's Dribbble shot and was made using Snap.svg and morphing SVG paths.
Last synced: 01 Aug 2024
https://github.com/codrops/CrossroadsSlideshow
An experimental slideshow with an inclined look with three slide previews and a content view on click.
Last synced: 04 Aug 2024
https://github.com/codrops/PricingTablesInspiration
A couple of styles and inspiration for responsive, flexbox-based HTML pricing tables.
Last synced: 31 Jul 2024
https://github.com/codrops/MotionRevealSlideshow
simple image slideshow with a motion reveal effect and a fullscreen details view.
Last synced: 04 Aug 2024
https://github.com/codrops/DraggableImageStrip
A draggable image strip layout with a content preview powered by Draggabilly and TweenMax.
css draggable gsap html-template javascript tweenmax
Last synced: 04 Aug 2024
https://github.com/codrops/AboveBeneath
A landing page template with a featured content section and background sounds that change according to the view.
Last synced: 31 Jul 2024
https://github.com/codrops/PullToShare
A mobile "pull to share" interaction that allows to share a page by using the familiar "pull to refresh" movement. Based on the [action](https://plus.google.com/+Chrome/posts/1GyqEu2opAE) for refreshing and opening/closing a tab in Google Chrome for mobile.
Last synced: 01 Aug 2024
https://github.com/codrops/ImageDraggingEffects
A set of playful dragging effects for images using various techniques.
Last synced: 01 Aug 2024
https://github.com/codrops/3DLettersMenuHover
A hover animation for a menu with 3D letters and image effect.
Last synced: 01 Aug 2024
https://github.com/codrops/PixelTransition
Ideas for pixel page transitions based on an animation by Niccolò Miranda.
Last synced: 01 Aug 2024
https://github.com/codrops/Blueprint-FullWidthImageSlider
A very simple 100% width slider that scales down to mobile.
Last synced: 31 Jul 2024
https://github.com/codrops/InlineMenuLayout
An inline menu layout with a playful hover animation and a gallery content preview panel.
css javascript layout webdesign
Last synced: 03 Aug 2024
https://github.com/codrops/MotionTransitionEffect
A speedy motion transition effect for an image slideshow.
Last synced: 01 Aug 2024
https://github.com/codrops/ExpandingBarMenus
An experimental tab-like navigation that expands a content area when clicked.
Last synced: 31 Jul 2024
https://github.com/codrops/codrops2020
A roundup of Codrops resources from 2020.
Last synced: 01 Aug 2024