Discover codyhouse/animated-svg-icon Open Source project

An easy to customize, responsive timeline.

1,166

vertical-timeline

page-scroll-effects

animated-headline

A collection of animated headlines

An easy to customize, horizontal timeline powered by CSS and JavaScript.

239

horizontal-timeline

A draggable slider to quickly compare 2 images

206

image-comparison-slider

A simple template that lets you display events on a timeline, as well as organize them in groups (week days, conference rooms etc…)

197

schedule-template

A resource to highlight the points of interest of your products.

183

points-of-interest

A full-width, responsive and easy to customise slideshow.

159

hero-slider

A responsive and easy to customise mega-dropdown component.

145

mega-dropdown

back-to-top

mega-site-navigation

A responsive navigation for mega sites

An easy-to-integrate side, vertical navigation, ideal for dashboards and admin areas.

114

responsive-sidebar-navigation

Virgo is a free HTML, CSS, JS template built using the CodyHouse Components and Framework.

112

virgo-template

A simple navigation that auto-hides when the user scrolls down, and becomes visible when the user scrolls up.

102

auto-hiding-navigation

An easy to customize template for the FAQ section of your project, with the questions/answers grouped in categories to ease the navigation.

102

faq-template

A floating cart that slides in when the user decides to buy an item.

add-to-cart-interaction

A slide-in filter panel powered by CSS and jQuery.

content-filter

A morphing dropdown that animates according to the size of its content.

stripe.com-navigation

A simple CSS accordion menu with support for sub level items.

multi-level-accordion-menu

How to create a dark\light mode switch in CSS and Javascript

dark-light-mode-switch

An ink bleed transition effect, powered by CSS animations.

ink-transition-effect

A tabbed navigation with support for both horizontal and vertical menu positioning.

responsive-tabbed-navigation

A library of animated transition effects, powered by CSS Animations

animated-transition-effects

A simple, interactive resource that can be used to provide a virtual tour of your product.

360-degrees-product-viewer

Lightweight CSS Grid System

flashgrid

A modal window to login/signup into your website

A side navigation which allows users to easily browse the page.

vertical-fixed-navigation

product-builder

A customizable Style Guide template

style-guide-template

stretchy-navigation

A fixed navigation to access the menu at any time while experiencing your website

smart-fixed-navigation

A 'product quick view' modal window, animated using CSS3 and Velocity.js

product-quick-view

A responsive table to compare and filter through multiple products.

products-comparison-table

The intuitive CSS framework.

codyframe

A full page menu, that replaces the current content by pushing it off the screen.

full-screen-pushing-navigation

breadcrumbs-and-multistep-indicator

A 3D rotating navigation, powered by CSS transformations.

3d-rotating-navigation

A call-to-action button that animates and turns into a full-size modal window

morphing-modal-window

Alternate fixed and scroll backgrounds

fixed-backgrounds

An immersive transition effect powered by image masks and CSS transforms.

image-mask-effect

Starting template for CodyHouse resources

nugget-template

Simple responsive pricing tables

pricing-tables

animated-page-transition

An easy to customise google map

custom-google-map

fixed-background-effect

An image that expands on click, going full-width and turning into a gallery.

expandable-image-gallery

A CSS3 and JavaScript powered slide-in panel, to quickly show side content, notifications or profile information.

slide-in-panel

A basic template to showcase the best features of your app

mobile-app-introduction-template

An intro page with a full width background image, a bold animated menu and an iOS-like blurred effect behind the navigation

full-page-intro-and-navigation

An experimental full-screen navigation that expands within a circle.

rounded-animated-navigation

reading-progress-indicator

Animated side shopping cart

side-shopping-cart

A simple responsive confirmation dialog box

confirmation-popup

A full-width figure element, with floating images distributed in a 3D space

parallax-hero-image

Secondary expandable navigation

secondary-expandable-navigation

sliding-panels-template

3d-folding-panel

A secondary navigation intended for users who want a quick overview of the page content, and be able to easily move from one section of the page to the other.

secondary-fixed-navigation

presentation-slideshow

product-tour

Animated side team member biography.

side-team-member-bio

A responsive cross reference table

cross-reference-table

A Fixed menu that drives users' attention to a couple of call-to-action buttons first, then let them explore the full-screen navigation

full-screen-popout-navigation

squeezebox-portfolio-template

animated-svg-hero-slider

animated-intro-section

contact-form

A responsive carousel showcasing selected client testimonials

client-testimonials-carousel

A full-screen video presentation, that is resized and animated to become the content of a mobile device.

immersive-video-template

radial-svg-slider

A simple slider, with morphing preview images animated using SVG properties.

clipped-svg-slider

Secondary menu that slides over the main navigation

secondary-sliding-navigation

3d-bold-navigation

A gallery of project preview images that expand on click to reveal the full case study.

expandable-project-presentation

advanced-search-form

animated-sign-up-flow

animated-page-transition-2

A simple 3D animation for your gallery items.

3d-items-quick-view

A list of split blocks that reunite on scrolling, simulating a movement along the z-axis.

3d-curtain-template

A full-width header image, animated using the CSS3 scale property to simulate a 3D zoom-out effect and reveal the main content of the page

zoom-out-intro-effect

A simple template to showcase your application features through a smooth 3d animation.

3d-animated-mockup

A space-saving content filter to switch from one category to the other in a fancy way

bouncy-content-filter

3d-portfolio-template

project-cards-template

vertical-fixed-navigation-2

quick-add-to-cart

A mobile-friendly pagination component

pagination

An eye-catching filling effect for your icons, that can be used to make a simple page look cool and dynamic.

icons-filling-effect

animated-svg-image-slider

product-preview-slider

A minimal and responsive newsletter form with the addition of some subtle CSS3 animations to enrich the user experience.

responsive-newsletter-form

A website template built with CodyFrame

codyframe-template-for-codrops

A full-screen navigation, with floating menu items.

bouncy-navigation

2-blocks-template

pointy-slider

CodyFrame Snippets for VSCode.

codyhouse-vscode-snippets

svg-modal-window

Gulp starter template for CodyFrame

codyframe-gulp-starter-template

Configuration files for your WordPress theme

100

codyhouse-wp-config