Best jQuery Animation Plugins & Tutorials with Demo

    CSS-Only Marquee Effect

    CSS-Only Marquee Effect

    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).

    Rapid Image Layers Animation with CSS & Javascript

    Rapid Image Layers Animation with CSS & Javascript

    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.

    Creepyface : Pointer following Animated Face JavaScript Library

    Creepyface : Pointer following Animated Face JavaScript Library

    Creepyface is a little JavaScript library that makes your face look at the pointer.

    Background Scale Hover Effect with CSS Clip-path

    Background Scale Hover Effect with CSS Clip-path

    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.

    Distorted Link Effects with SVG Filters

    Distorted Link Effects with SVG Filters

    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.

    Image Dragging Effects with TweenMax & Draggabilly

    Image Dragging Effects with TweenMax & Draggabilly

    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.

    Building a Physics-based 3D Menu with Cannon.js and Three.js

    Building a Physics-based 3D Menu with Cannon.js and Three.js

    Learn the basics of doing physics in WebGL by building a 3D menu with Cannon.js and Three.js as renderer.

    Scroll, Refraction and Shader Effects in Three.js and React

    Discover how to use react-three-fiber and combine some common techniques to create a Three.js powered layout with shader effects.

    Gooey Image Hover Effects with Three.js

    Gooey Image Hover Effects with Three.js

    Learn how to create gooey reveal hover effects on images with Three.js using noise within a shader. For the demo itself, I’ve created a more practical example that shows a vertical scrollable layout with images, where each one has a variation of the effect. You can click on an image and it will expand to a larger version while some other content shows up (just a mock-up). We’ll go over the most interesting parts of the effect, so that you get an understanding of how it works and how to create your own.

    Motion Hover Effects with Image Distortions using Three.js

    In this tutorial you will learn how to achieve interesting looking hover effects with image distortions using Three.js. The aim is to add fluid and interesting motion to the effects. We will be exploring three different types of animations.