Velocity.js – Accelerated JavaScript animation

Velocity is a jQuery plugin that re-implements $.animate() to produce significantly greater performance (making Velocity also faster than CSS animation libraries) while including new features to improve animation workflow. Velocity includes all of $.animate()’s features while packing in color animation, transforms, loops, easings, sequences, and scrolling. Velocity is the best of jQuery, jQuery UI, and CSS transitions combined.

Just swap out .animate() with .velocity():

$("div").velocity({ left: 100 }, 1000);
$("div").velocity({ left: 100 }, 1000, "swing");
$("div").velocity({ left: 100 }, "swing");

Velocity.js →
Improving UI Animation Workflow with Velocity.js →

From jQuery to JavaScript: A Reference

Whether we like it or not, more and more developers are being introduced to the world of JavaScript through jQuery first. In many ways, these newcomers are the lucky ones. They have access to a plethora of new JavaScript APIs, which make the process of DOM traversal (something that many folks depend on jQuery for) considerably easier. Unfortunately, they don’t know about these APIs!
In this article, we’ll take a variety of common jQuery tasks, and convert them to both modern and legacy JavaScript.

Great to see that this article contains both Modern and Legacy JS. Take jQuery#addClass for example: in the olden days we’d use Element.className. Nowadays we can use Element.classList.

From jQuery to JavaScript: A Reference →

Related: I know jQuery. Now what? →
Related: Advanced JS, a chapter from the course materials I teach.

Scroll Animations

A little Pen I knocked together to demonstrate “CSS Animations triggered on scroll” to some of my students. The key part is the animated class which actually starts the animation: it is only added once the element is in view.

Check out this Pen!

Note that the event handler is not debounced as we need to actually trigger the animations on actual scroll. Is partially optimised by removing the event handler once all elements are visible. Could be further optimised by throttling the event handler.

CSS animations are borrowed from http://glifo.uiparade.com/. Integration with animate.css of course also possible.

Did this help you out? Like what you see?
Consider donating.

I don’t run ads on my blog nor do I do this for profit. A donation however would always put a smile on my face though. Thanks!

☕️ Buy me a Coffee ($3)

UPDATE June 2016: For a project I’m building I need the animations to reverse when scrolling up. And so I build’eth.

Check out this Pen!

jquery.unevent.js

A jQuery/Zepto plugin I’ve been using a lot lately to debounce (= attach with delay) event handlers. To be applied on scroll events for example, as you don’t want one long single scroll to pull down the performance of your webpage by constantly triggering the attached handling function.

$(window).on('scroll', function(e) {
    // update stuff *after* the scroll
}, 250);

I prefer jquery.unevent.js over this jQuery#debounce() for example as jquery.unevent.js extends jquery#on() with a simple third timing parameter.

jquery.unevent.js (demo) →
jquery.unevent.js (source) →

Yes, I know: a repost. It’s just that good!