lurkingdeath Goto Github PK

animatedsvgicons

Using SVGs on websites is becoming more and more easy with great libraries like Snap.svg. Today we want to explore what we can do with it and animate some SVG icons as a practical example.

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.

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.

blockrevealers

Ideas for revealing content in a schematic box look as seen around the Web lately.

bookblock

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

bookmark

buttoncomponentmorph

Inspiration for revealing content by morphing the action element.

creativebuttons

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

customcursor

Custom Cursor Demos and Tutorial for Codrops

design-code-app

React Native Application

distortedbuttoneffects

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

draggabledualviewslideshow

A draggable slideshow with two views: fullscreen and small carousel. In fullscreen view, a related content area can be viewed.

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.

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.

gridlayoutslideshow

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

gridloadinganimations

Some inspiration for loading effects on grid items.

iconhovereffects

A set of simple round icon hover effects with CSS transitions and animations for your inspiration.

minimalform

A simplistic form with inputs shown one at a time. Inspired by the form seen on the end of the [PageLanes website](http://www.pagelanes.com/).

modalwindoweffects

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

notificationstyles

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

pagetransitions

A showcase collection of various page transition effects using CSS animations.

perspectivepageviewnavigation

Some effects for a perspective page view navigation where the page itself gets pushed away in 3D to reveal a menu or other items.

portfolios

prismagram

Instagram Clone with Express + React + Node + Prisma and React Native

responsivemultilevelmenu

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

segmenteffect

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

selectinspiration

Creative styles and ideas for custom select elements.

sidebartransitions

Some inspiration for transition effects for off-canvas navigations.

slicerevealer

A reveal effect where animated slices cover and uncover an image

smoothscrollingimageeffects

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