Best jQuery Animation Plugins & Tutorials with Demo

Toolgif : Simple jQuery GIF Tooltip Plugin

Toolgif : Simple jQuery GIF Tooltip Plugin

Toolgif is a lightweight and very simple jQuery gif tooltip plugin. Also there area some options for customize tooltip.

Transition Effect with CSS Masks

Transition Effect with CSS Masks

Today we’d like to show you how to create an intriguingly simple, yet eye-catching transition effect using CSS Masks. Together with clipping, masking is another way of defining visibility and composite with an element. In the following tutorial we’ll show you how to apply the new properties for a modern transition effect on a simple slideshow. We’ll be applying animations utilizing the steps() timing function and move a mask PNG over an image to achieve an interesting transition effect.

Choreographer.js : JavaScript Library for Complex CSS Animations

Choreographer.js : JavaScript Library for Complex CSS Animations

Choreographer.js is a simple library to take care of complex CSS animations.

Background Segment Effect with CSS & Anime.js

Background Segment Effect with CSS & Anime.js

Today we’d like to share a little decorative effect with you that we’ve encountered on Filippo Bello’s Portfolio, maybe you’ve seen it. It’s a really neat way to add some jazz to background images. The idea is to replicate boxes from a background with the same background image and make these boxes move in perspective towards the viewer. Adding a fitting shadow and some parallax makes all this look quite interesting. Furthermore, we’re employing anime.js, the easy-to-use JavaScript animation library by Julian Garnier.

Fancy SVG Letter Animation

Fancy SVG Letter Animation

Today we’d like to show you a fancy little lettering animation made with SVG and anime.js. The idea is inspired by Jake Bartlett’s gorgeous opening animation for the “Shading Letters in Illustrator” Skillshare class by Jamie Bartlett. While we didn’t do any shading, we wanted to animate the stroke of each letter multiple times to achieve a similar effect.

Barba.js : Fluid and Smooth Transition Between Websites Pages

Barba.js : Fluid and Smooth Transition Between Websites Pages

Barba.js is a small, flexible and dependency free library that helps you creating fluid and smooth transitions between your website’s pages.

It helps reducing the delay between your pages, minimizing browser HTTP requests and enhancing your user’s web experience.

Features:

  • Pjax
  • Transitions
  • Views
  • Events
  • Cache
  • Prefetch

jQuery Scroll to Top – 32 Animations

jQuery Scroll to Top - 32 Animations

Scroll to top is a multi-purpose, fully responsive scroll to top button which allows you to scroll to the top of the website with silky-smooth animation (32 animation types). Release you users from endless scrolling back to top with this one click add-on.

Based on HTML5 & CSS3 to deliver best user experience on any smartphone, tablet and notebook/desktop computer.

 

  • 32 animation effects
  • 8 predefined, awesome color themes
  • 6 button positions
  • 4 button layouts
  • responsive
  • CSS3 animated button
  • Font Awesome
  • cross browser support
  • 100% Bootstrap compatible

 

Granim.js : Create fluid and interactive Gradients Animations

Granim.js : Create fluid and interactive Gradients Animations

Create fluid and interactive gradients animations with this small (< 10 kB) js library.

Animate.js : Trigger Animations on elements when Scrolling

Animate.js : Trigger Animations on elements when Scrolling

Animate js is a tiny (5KB) vanilla JS script to trigger animations on elements when they are within the viewport.

Inspiration for Navigation Indicators with CSS

Inspiration for Navigation Indicators with CSS

Today we’d like to share some style inspiration with you. The topic of this inspirational collection is navigation indicators. Pages, slideshows and other components often need some kind of navigation that tells the user where he is currently. In this collection we want to explore a couple of subtle designs that make navigating fun and interesting. The example that we are using is a vertical slideshow but the styles can be envisioned and adjusted for many other components.



Best jQuery websites design awards