Best jQuery Animation Plugins & Tutorials with Demo

Dynamic Shape Overlays with SVG

Dynamic Shape Overlays with SVG

Today we’d like to share another way of achieving morphing page transitions. This time, we’ll generate multiple SVG curves with JavaScript, making many different looking shapes possible. By controlling the individual coordinates of the several layers of SVG paths, the curved shapes animate to a rectangle (the overlay) with a gooey motion. We use some nice easing functions from glsl-easings and by tuning the curve, speed and the delay value, we can generate many interesting effects.

Moving Letters Animation Effect with AnimeJs

Moving Letters Animation Effect with AnimeJs

Here is a collection of some beautiful text letter animation effects with anime.js

Organic SVG Shape Morph Ideas

Organic SVG Shape Morph Ideas

A small set of ideas for organic shape effects. The demos show some ways to use animated SVG morphs interactively on a website, including a menu hover and a content reveal effect.

jQuery Blink Animation Plugin

jQuery Blink Animation Plugin

jQuery plugin to blink animation effect on any html element.

Morphing Page Transition with CSS & SVG

Morphing Page Transition with CSS & SVG

Today we’d like to share a simple morphing page transition effect with you. The idea is to morph an SVG path while moving an intro page up, creating an interesting, flowy look. For the animations we use anime.js and for some letter effects we use Charming. In the demos we use an “intro transition” in order to showcase the effect, but that’s of course only one of the many use cases for this kind of page transition.

Inspiration for Menu Hover Effects with CSS & JavaScript

Inspiration for Menu Hover Effects with CSS & JavaScript

Some menu link hover effects for your inspiration. Powered by CSS and JavaScript for individual letter animations.

Animated Image Pieces with JavaScript & CSS

Animated Image Pieces with JavaScript & CSS

A set of experiments with an animated image pieces effect where an image gets shattered into rectangular fragments. Powered by anime.js.

jQuery Border Color Animate Plugin

jQuery Border Color Animate Plugin

jQuery plugin to animate border color.

Organic Shape Animations with SVG clipPath

Organic Shape Animations with SVG clipPath

Some shape morphing hover effects on images using SVG clipPath. The idea is to create an organic, fluid feel by animating several elements on hover.

After playing with some on-scroll morphing background shapes, we wanted to explore some hover effects in this demo. By morphing SVG paths we can create some organic, flowy movements on hover. Doing so on an SVG clipPath allows us to use this effect on an image.

ScrollPress : jQuery plugin to make a Smooth Animation on Scroll Top

ScrollPress : jQuery plugin to make a Smooth Animation on Scroll Top

ScrollPress is a jQuery plugin to make a Smooth Animation on Scroll Top.

Features:

  • Animate scroll top
  • Animate DOM elements scroll top
  • JQuery UI easing functions
  • Back to top button
  • Fade in button with animation
  • Animation when click on button
  • Animate self link ( href + ID )
  • Scroll between elements with custom ease and duration