This is a couple of ideas for typography animations and letter (hover) effects for playful interactions developed by Codrops. You can find awesome text animations that you can use in your web projects. Letters are such a great thing to play with and they allow for so many interesting interactions and effects to enhance a design and make decorative headlines stand out. The below examples have been created using anime.js. and Charming.js So just see…
This is an experiment where grid items get revealed and unrevealed with animated, morphing SVG paths using anime.js. It’s been developed by Codrops. These effects can look quite interesting on image grids, covering and uncovering every grid item when navigating. The idea was sparked by the beautiful and creative JOHO’s website. The main idea is to use fitting coupled effects that work well with each other, and to play with organic looking shapes. Using SVG…
These are some ideas for previewing or just playing with folders on hover developed by Codrops. The idea is to show a little animation when hovering a folder icon and reveal some kind of preview for what’s inside. The animations are intended as a fun micro-interaction that give the user some kind of hint of what’s inside the hovered folder. A couple of modern CSS properties have been used so this demo only works in…
This is an off-canvas sidebar component with a collection of animations and styles using CSS transitions. It’s been developed by Offir Golan. This addon utilizes contextual components to be able to correctly control and animate necessary elements. If you’re not impressed with the in-house animations and want to create your own, all you have to do is pass the following class to the customAnimation property in the {{burger-menu}} component. If you think your animation would…
Designers are always divided on which tech or software to use. There is no single piece of software that can do it all. They’re all better in some areas and less strong in others. Many designers end up using the software that they started out with because it is quick and simple for them to use, rather than taking a harder look at what is available. Obviously as the years pass this can leave them…
mini.css is a tiny CSS toolkit (under 7KB gzipped) that works well on most modern browsers and devices and allows you to customize it quickly and easily. It’s written in Sass and tries to make use of HTML5 semantics and modern patterns to deal with common web design problems. You can learn all about using it, its modules and components. mini.css is crafted with both desktops and mobile devices in mind. All of its components…
This is an experimental hover effects that reveal a stack of multiple colored cards behind the hovered item. It’s been developed by Codrops. The concept stems from the hover effect seen on Merci-Michel which has a really nice feel to it because of its fluidity. The idea is to show a stack behind the hovered thumbnail that has the same main color as the image and then animate the elements in a swift motion. …
This is myth style Photoshop action. You can easily create awesome atmospheric lighting effects on your photos with ease. You can choose from 8 different lighting angles and you also have 30 color options to choose from. Everything remains layered giving you lots of flexibility over the look of the effect. For the best results, it is recommended to use high resolution photos in the range of 1500px – 3500px. The optimal range is from…
GridTab is a lightweight jQuery plugin to create grid based responsive tabs. Girdtab could be a perfect solution for the following UI design pattern. Gridtab supports two layout modes grid and tab. By default, it uses the grid layout. Click any tab in demo and resize the window to see how it works. Features: – Responsive – Lightweight and based on CSS3 flexbox – Set Grid for each breakpoint – Switch between Grid and Tab…
Propeller is a front-end responsive framework based on Google’s Material Design Standards & Bootstrap. You know Material Design is a visual language created by Google that synthesises the classic principles of good design with the innovation and possibility of technology and science and Bootstrap is the most popular HTML, CSS, and JS framework in the world for building responsive, mobile-first projects on the web so this CSS framework is the combination of Material Design and…