Best jQuery Animation Plugins & Tutorials with Demo

Popmotion : JavaScript Reactive Animation Library

Popmotion : JavaScript Reactive Animation Library

Popmotion is a functional, reactive JavaScript motion library.It allows developers to create animations and interactions from actions.Actions are streams of values that can be started and stopped, like tweens, physics and pointer input.

Actions are unopinionated, so those values can be used to create animations with CSS, SVG, React, Three.js… any API that accepts a number as an input.

Slice Revealer : Simple Reveal Animation with Anime.js

Slice Revealer : Simple Reveal Animation with Anime.js

Today we’d like to share a simple reveal animation.The idea is to cover and uncover an image with slices to either hide or show it. The slices can be vertical or horizontal and can come from different directions. Playing with the number of slices, delays and colors, creates a plethora of possible looks for this effect.We are using anime.js for the animations.

Sequence.js : Step based Animations Slider

Sequence.js : Step based Animations Slider

Sequence.js is a CSS-driven framework for building responsive touch-enabled step-based animations. It is ideal for creating sliders, presentations, banners and other sorts of dynamic components. Among the several premium plans you will find a free one that grants you with a personal open-source license.

Tuesday : Quirky CSS Animation Library

Tuesday : Quirky CSS Animation Library

Tuesday is a stand-alone library you can use without any dependencies, but you can use Tuesday alongside other animation libraries as well. All Tuesday animation names start with td prefix so there is a low chance two libraries will collide unless there is another one that uses the same prefix and animation name.

Gradient Topography Animation with Anime.js

Gradient Topography Animation with Anime.js

An organic SVG shape layer animation based on Diana Hlevnjak’s work “Gradient Topography”. Powered by anime.js.

Easy Wheel : jQuery Easy Controlled Wheel of Fortune

Easy Wheel : jQuery Easy Controlled Wheel of Fortune

Easywheel is a jQuery Plugin created to allow you to Build and Controle the Wheel of fortune.

Features:

  • 70% of styles is Editable with JSON Parameters.
  • You can choose the winner from parameters or Remotely from your server using AJAX.
  • 100% Responsive and compatible with any resolution.
  • There no Third-party libraries ( Except jQuery ) is required to run the plugin.
  • The generated SVG is customizable via JSON/CSS.

Anime.js : JavaScript Animation Engine

Anime.js : JavaScript Animation Engine

Anime.js is a lightweight JavaScript animation library. It works with any CSS Properties, individual CSS transforms, SVG or any DOM attributes, and JavaScript Objects.

Features:

  • Keyframes: Chain multiple animation properties.
  • Timeline: Synchronize multiple instances together.
  • Playback controls: Play, pause, restart, seek animations or timelines.
  • CSS transforms: Animate CSS transforms individually.
  • Function based values: Multiple animated targets can have individual value.
  • SVG Animations: Motion path, line drawing and morphing animations.
  • Easing functions: Use the built in functions or create your own Cubic Bézier curve easing.

Mo.js : Motion Graphics Toolbelt for the Web

Mo.js : Motion Graphics Toolbelt for the Web

Mo.js is a motion graphics toolbelt for the web.Silky smooth animations and effects for staggering user’s experience.Screen density independent effects look good on any device.

Decorative Letter Animations with CSS & Anime.js

Decorative Letter Animations with CSS & Anime.js

Today we’d like to share some fun letter animations with you. The idea is based on Animography’s Dribbble shot “Us By Night” where various little shapes animate with some letters. We wanted to explore some similar animations using different typographies and shape effects. We are using anime.js for the animations and Charming for working with the words.

CSS Glitch Effect

CSS Glitch Effect

Today we’d like to show you how to create a little experimental glitch-like effect on an image. The effect will be powered by CSS animations and the clip-path property. The technique involves using several layers of images where each one will have a clip-path, a blend mode and a translation applied to it.