A tutorial on how to create a hover effect for a menu where images appear with an animation on each item.
Best jQuery Animation Plugins & Tutorials with Demo
A short tutorial on how to recreate a letter stagger animation with GSAP and Splitting.js. It happens when you click on “About” (and then “Close”). This kind of show/hide animation on the typographic elements is being used in many designs lately. At Codrops we call it a “reveal” animation.
CindyJS is a framework to create interactive (mathematical) content for the web.It aims to be compatible with Cinderella, providing an interpreter for the scripting language CindyScript as well as a set of geometric operations which can be used to describe constructions. Together, these components make it very easy to visualize various concepts, from geometry in particular and mathematics in general, but also from various other fields.
Rough Notation uses RoughJS to create a hand-drawn look and feel. Elements can be annotated in a number of different styles. Animation duration and delay can be configured, or just turned off.
A simple CSS-only marquee effect for a menu based on Francesco Zagami’s Dribbble shot.It has a really nice marquee animation when hovering a menu item (you have to wait a couple of seconds to see the menu).
A rapid animation of multiple layers of images for intros or page transitions. The idea is to animate some fullscreen images rapidly, like a sequence of covering layers. It’s a nice idea for an intro splash or even a page transition.
A simple recreation of the background scale hover effect seen on the DDD Hotel website using CSS clip-path.The idea is to scale down the background image and “fitting” it to a clip shape which contains the same background image. The shape is visible because the opacity of the background is a bit lower.
Today we’d like to share some ideas for distorted link effects with you.A couple of ideas for decorative link distortion effects using SVG filters on lines, circles and squares.
Today we’d like to share a little set of playful dragging effects with you. The idea is to animate images as they are being dragged, and distort, scale or apply filters to them. For some examples we tie the intensity of the effect to the speed of the dragging motion.