Joe Pagan

By Joe P

Web Development

Velocity.js vs Animate.css – Which is faster, smoother & more controllable?

A discussion over two of the most popular animation packages available to front end developers

Velocity.js vs Animate.css – Which is faster, smoother & more controllable?

In the past couple of years I used to use Dan Eden’s Animate.css on nearly all of my projects, it works brilliantly and it’s easy to use. Still got a love for the man’s efforts, but with no real updates in like… forever. I found it hard to not look elsewhere.

Animate.css

If you are unaware what Animate.css is, it’s basically a stylesheet you can add to your website, you can then add classes to elements, in order to make them enter or exit the web page by either sliding, fading, or animating in a cool way.

“What’s your problem with it then?” You may ask. Well, read on to discover the wonders of Velocity.js.

Velocity.js

Velocity.js is an animation library built in Javascript. It uses the same API as jQuery’s $.animate() (but also works without jQuery). It’s fast, and offers a huge bunch of features.

Here are a few reasons as to why I think Velocity.js is much better than Animate.css:

You get more Frames Per Second (FPS) with Velocity.js

Every developer should strive for the maximum FPS so our users get the best experience possible! We should not make excuses, like the games industry are doing at the moment (cinematic experience).

Velocity.js can play your animation in reverse!

If you generate random maths for your animation on the fly, velocity can do the same animation backwards!

Callback Functions - Begin, Complete & Progress

You can do anything you want within a begin/complete/progress callback. What if you wanted to: Spin a bottle 360 degrees, at 39.7% through that animation maybe you would want to shrink an elephant to half its size, when that’s completed, maybe you would want to make doge pop up. Great news everyone! Now you can!

Easing is built in, and you get more than you think!

Easing is built in to the plugin, you don’t even have to download a separate plugin for it jQuery UI’s easing and CSS3’s named easing (“ease”, “ease-in”, “ease-out”, and “ease-in-out”) also work. You can use CSS3’s bezier curves as a parameter if you want something custom, Spring Physics (where you can add tension and friction as parameters) and Step Easing (how many steps you want an element to animate). Finally you can add different types of easing for each property you set.

      $div.velocity({
    borderBottomWidth: [ "2px", "spring" ], // Uses "spring"
  width: [ "100px", [ 250, 15 ] ], // Uses custom spring physics
  height: "100px" // Defaults to easeInSine, the call's default easing
}, {
  easing: "easeInSine" // Default easing
});
    

Scrolling to an element

This could previously be achieved by using $.animate to scroll the body to with something similar to this:

      $('html, body').animate({ scrollTop: $("#element").offset().top }, 300);
    

This can now be achieved using velocity (faster than jQuery animate), and you get all the benefits of the built in easing, callbacks & reversing if need be:

      $('#point-6').velocity("scroll", {easing:'easeInOutExpo', duration:300});
    

It takes multiple values

Velocity supports the px, em, rem, %, deg, and vw/vh units.

Chaining one animation after another

Here is an example where one animation is fired after the other one has finished (to the same element):

Queue

By default queue is set to true, but if you want multiple animations to happen at the same time, you can set them both to false and they will initiate at the same time. Less Queue Queue or more Queue Queue, it’s really up to you!

SVGs already work

Velocity contains full support for SVG element animation, including the animation of SVG-specific properties such as x, rx, stroke-width, and so on. SVGs though relatively still a new(ish) thing are quickly becoming more popular online & knowing that its fully supported makes me comfortable knowing that this has been developed by someone that is aware of the forever changing web.

Edit: Since we have forced https on our website the iframe below no longer works due to content being loaded on http. This Codepen unfortunately is not under our control, so if you would like to experience it, please open the Codepen in a new window.

Internet Explorer

Personally I do really like how a lot of developers recently are flat out not supporting IE, unfortunately, despite IE inevitably adding a lot of issues, we can’t really follow suit, as it all depends on how many IE users visit our sites! Regardless the developers that make these plugins should at least check that it doesn’t break anything (even if they offer no functionality).

But what if it falls back to something that already works in jQuery? Woohoo!

Here’s a quote from Velocity.js web page explaining what the fallback does:

“Velocity works everywhere — back to IE8 and Android 2.3. Under the hood, Velocity uses jQuery’s $.queue(), and thus interoperates seamlessly with jQuery’s $.animate(), $.fade(), and $.delay(). Since Velocity’s syntax is identical to $.animate(), none of your code needs to change.”

Velocity.js

We can’t always choose who visits our websites, and if there’s enough demand, these problems are worth addressing. Please bare in mind, obviously if you use CSS3 transforms, it isn’t going to work even with your fallback. So you could always add in an “if” specifically for IE9 and lower to use the older “top,left,right,bottom” properties instead.

The UI Pack

This is basically extends Velocity.js to behave a bit like animate.css, it includes various entrances & exit animations & attention seekers, some of which are much more elaborate than animate.css is possible of. All these calls can be chained, IE8 support (just fades in & out), further options include stagger, drag & backwards.

Stagger puts a small delay in between each element fading in which provides quite a nice effect. Drag affects the time in which the transition starts across all elements in a group. This basically applies a sequenced easing effect across all your elements fading in or out. Backwards starts the transition with the last element within the set you’ve passed it.

Conclusion

As a little round up, I am very surprised at how quickly I have been able to make more complex animations, and, at how much smoother it is.

The most important point of them all (which I probably should’ve listed earlier, but then I’d have a shorter conclusion), is that Velocity.js gives you complete freedom, to do whatever you want to do. You can do a completely different animations for a different browsers, mobiles, ipads or tablets. You can disable it, or revert to jQuery $.animate() if need be, change the animation to be less demanding by loading less elements, or, doing less crazy stuff like Julian’s example here (he loads in 125-175 dots in chrome, where as on android, he loads between 40-60).

Julian Shapiro the plugin’s author appears to be enthusiastic, quick to respond to issue’s on Velocity.js’s GitHub and at the time of writing this, updates seem to be relatively frequent.

I am looking forward for more opportunities to work with it and seeing what crazy animations other developers can conjure up. Given its flexibility, Velocity.js has changed the game.

It has given us a new dimension to both planning & developing our projects.

Good read? Why not spread the word!

Velocity.js vs Animate.css – Which is faster, smoother & more controllable?

Fancy a good ol' chat about the values of marketing to your business?

Drop Us a Line

Post by

Joe

Web Developer & Dev Ops Engineer

With 7 years experience in Web Development & Dev Ops, Joe has worked with a large range of web apps & technologies. Working on existing sites, or coding new, he has keen interest in making application performance optimal, and, makes sure the servers don't get too hot.

Joe P

Stay up to date

Insights & Industry News

If you want more expert viewpoints, industry insights and general marketing know-how from Team Extreme, get signed up.