Learn How To Create Animations Without jQuery

JavaScript animation libraries which bypass jQuery actually deliver incredible performance as they avoid DOM manipulation as much as possible. 

A belief is very much present there in the web development community that if you want to make animations on the web, CSS animation is the only way. Hence several developers abandon JavaScript-based animation. But the reality is that JavaScript-based animation is often as fast as CSS-based animation, sometimes it's faster. JavaScript animation libraries which bypass jQuery actually deliver incredible performance as they avoid DOM manipulation as much as possible.

These libraries act 20 times faster than jQuery. So if you want to use JavaScript in your UI animations then go through the following facts and steps:

1. JavaScript Use: 

CSS animations are definitely convenient if you want to sprinkle property transitions into your style sheets. They deliver fantastic performance out of the box. But when you use CSS transitions to power rich motion design it becomes too difficult to manage all the features.

But in JavaScript, you have an infinite amount of logical control. The key features of JavaScript animation are cross-browser SVG support, physics-based loader animations, timeline control and Bezier translations.

2. Velocity and GSAP: 

The two most popular JavaScript animation libraries are Velocity.js and GSAP. These libraries work both with and without jQuery. If they are used with jQuery, then there is no degradation in your performance.

If jQuery is present on your page, you can use Velocity and GSAP just like you would jQuery’s $.animate().

But these two libraries can also work when jQuery is not present on the page. This means you don't need to limit an animation call onto a jQuery element object and you would pass the target element(s) to the animation call by:

/* Working without jQuery */

Velocity(element, { opacity: 0.5 }, 1000); // Velocity

TweenMax.to(element, 1, { opacity: 0.5 }); // GSAP


On the other hand, GSAP uses an object-oriented API design so that you get full control over animations.

3. Working Without jQuery: 

Let’s explore querySelectorAll as it will likely be your best weapon if you are into animation without jQuery:

document.querySelectorAll("body"); // Get the body element
document.querySelectorAll(".squares"); // Get all elements with the "square" class
document.querySelectorAll("div"); // Get all divs
document.querySelectorAll("#main"); // Get the element with an id of "main"
document.querySelectorAll("#main div"); // Get the divs contained by "main"


You can simply pass querySelectorAll a CSS selector (the same selectors you would use in your style sheets), and it will return all matched elements in an array. As you're attaching animations to jQuery element objects, you may be wondering how we can chain animations back to back, like this:

$element // jQuery element object
.velocity({ opacity: 0.5 }, 1000)
.velocity({ opacity: 1 }, 1000);

With Velocity, you can just call animations one after another:

/* These animations automatically chain onto one another. */
Velocity(element, { opacity: 0.5 }, 1000);
Velocity(element, { opacity: 1 }, 1000);


If you're animating this way then there is no chance of any performance drawback. This one-Velocity-call-at-a-time process has a huge benefit too like if you’re using promises with your Velocity animations, then you will get an actionable promise object with each Velocity call. In the case of GSAP, there is an expressive object-oriented API which allows you to place your animations in a timeline. It gives you control over scheduling and synchronization.

Animation is an experimental process and you need to play with timing. While CSS transitions are easy to use, they become unmanageable as soon as you attempt to sequence even moderately complex animations. Velocity has its UI pack designed in a way so that it deals with multi-animation complexity, and GSAP offers nestable timelines.

4. JavaScript Functions: Physics: 

There are several powerful effects which can be achieved exclusively via JavaScript. You can explore the same with physics-based animation. The utility of physics in motion design is that interfaces flow naturally from the user’s input, which means, interfaces adhere to how motion works in the real world.

GSAP offers physics plugins which adapt to the constraints of your UI. Velocity offers an easing type which is based on spring physics. Velocity offers an easing type based on spring physics. With the typical easing options, you pass in a named easing type.

5. JavaScript Functions: Scrolling: 

Velocity enables the user to scroll the browser to the edge of any element by passing in scroll as Velocity’s first argument (instead of a properties map). The scrollcommand behaves in a similar way to a standard Velocity call; options are taken and they can be queued too. Elements can be scrolled within containers and you can scroll horizontally too.

GSAP has ScrollToPlugin and it offers similar functionality. It automatically relinquishes control when the user interacts with the scroll bar.

6. JavaScript Functions: Reverse: 

Velocity and GSAP have reverse commands enabling you to animate an element back to the values prior to its last animation. GSAP enables you to retain a reference to the animation object. Then invoke its reverse()method at any time: var tween = TweenMax.to(element, 1, {opacity:0.5});
tween.reverse();

6. Transform Control: 

CSS animation contains all transform components in a single CSS property including scale, transla-tion, rotation and skew. So it cannot be animated independently using different durations. For rich motion design independent control is imperative. Both Velocity and GSAP allow you to animate transform components individually.

So we can come to this conclusion that JavaScript animation has better browser support and more features in comparison to CSS animation. JavaScript provides a more manageable workflow for animation sequences. Most importantly you don’t need to use jQuery for animation with JavaScript libraries, without affecting performance level.