Best jQuery Animation Plugins & Tutorials with Demo

    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.

    Framer Motion : Animation & Gesture Library for React

    Framer Motion : Animation & Gesture Library for React

    Framer Motion is a new open source, production-ready motion library for React on the web.Design fluid animations for the web, across desktop and mobile.

    Image Trail Effects with TweenMax & CSS

    Image Trail Effects with TweenMax & CSS

    A set of brutalist effects for mouse-following image trails that show a random series of images with tweenmax and css.The idea is to follow the mouse and show a trail of random images. It’s a kind of brutalist effect and there are various possibilities when it comes to showing and hiding the images. So we compiled a set of demos that explores different animations.

    Smooth Scrolling Image Effects with CSS & Tweenmax

    Smooth Scrolling Image Effects with CSS & Tweenmax

    A small set of ideas on animating images and other elements while smooth scrolling a page. We’ve made a small set of effects that show how you can apply some interesting transforms to elements like images and text while scrolling the page smoothly.

    Smooth Scrolling with Inner Image Animations to a Web Page

    Smooth Scrolling with Inner Image Animations to a Web Page
    A tutorial on how to add a smooth scrolling effect to a website and also animate the images that enter the viewport.

    Freezeframe.js : Library that Pauses Animated Gifs

    Freezeframe.js : Library that Pauses Animated Gifs

    Freezeframe.js is a library that pauses animated .gifs and enables them to animate on mouse hover / mouse click / touch event, or triggered manually.

    Draggable Menu with Image Grid Previews

    Draggable Menu with Image Grid Previews

    A draggable inline menu with a scattered thumbnail preview of an image grid.After our little draggable image strip experiment, we wanted to explore using the dragging functionality on a menu. The idea is to show a large inline menu with some scattered thumbnails. The menu can be dragged and while doing so, the thumbnails get moved with an animation. Each menu item also changes the letters to show an outlined version. When clicking on the “explore” link under a menu item, the thumbnails move and enlarge to form a grid.

    Creating Grid-to-Fullscreen Animations with Three.js

    Creating Grid-to-Fullscreen Animations with Three.js

    Learn how to create thumbnail to fullscreen animations for image grids using Three.js.In this tutorial we want to look at how to create some interesting grid-to-fullscreen animations on images. The idea is to have a grid of smaller images and when clicking on one, the image enlarges with a special animation to cover the whole screen. We’ll aim for making them accessible, unique and visually appealing. Additionally, we want to show you the steps for making your own.

    Ola.js : A Library for Smoothly Animating Values

    Ola.js : A Library for Smoothly Animating Values

    Ola.js is a smooth animation library for interpolating numbers.