Typography Animations and Letter (hover) Effects

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… Continue reading Typography Animations and Letter (hover) Effects

Item Reveal Animations with SVG

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… Continue reading Item Reveal Animations with SVG

Folder Preview Examples With CSS Animation When Hovering

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… Continue reading Folder Preview Examples With CSS Animation When Hovering

Stack Motion Hover Effects With CSS and jQuery

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… Continue reading Stack Motion Hover Effects With CSS and jQuery

Ideas for block reveal effects with 3D Transforms

Latest experiment by Codrops consists of a small set of block reveal effects uncovering content of any kind in a schematic box look. On the demo page you can also find nice ready-made examples for revealing menus, modals, forms, etc. This approach takes advantages of scrollMonitor (a simple API to monitor elements as you scroll) and Flexbox and 3D Transforms, so… Continue reading Ideas for block reveal effects with 3D Transforms