Introduction

Animation, needless to say is important factor in a great user interface. Not only it brings life to the application but it also attracts users’ attention to the important action the application is going through and emphasizes visual information.

Sadly, not all developers are great animators. Therefore, there is a great importance in easy accessible animation tools. I bring up animation because although Vuejs has risen web prominence, I found Vuejs’s transition/animation tool to be somewhat lacking. Don’t get me wrong, it is great at animations based on CSS properties but is lacking in Javascript data based animation.

Jquery’s JS animation

As a long time Jquery user, I appreciate Jquery’s simple way of creating Javascript based animation.

Below is a simple (and completely useless) example:

$('#clickRight').click(()=> {
  const distance = Math.random(0, 1) * 1000;
  $('#redsquare').animate({
  left:`+=${distance}`
  }, 1000);
});

In this example, the Jquery’s animate method takes minimum of two arguments: the target’s CSS property, and the animation duration. The animate method interpolates from its current position to the end position defined by Javascript data and animates it accordingly. In this example the element slides to the right at random number between 0 and 1000px at a click of the button, provided that its CSS property position is set to absolute.

Although we don’t spend extensive amount of time with fancy animations, we value its enhancement even the simplest form brings. Jquery’s animate helps achieve that with little effort required.

VueJS’s “short coming”

Unfortunately with VueJS, there isn’t a Jquery like implementation that allows animation through Javascript. Vuejs documentation promotes TweenLite and TweenJS to achieve data driven animation.

Although both were phenomenal options, I opted out of using them as importing a separate library was excessive for a project where only a single occurrence of simple slide animation was necessary.

Without opting for external library, I created a prototype that showcases a simple slide animation.

Demo

Despite the lengthiness of the methods that makes the animation, most of the entire component should be familiar to ones used to VueJS. The two buttons are bound to the methods clickLeft and clickRight. Once those methods are invoked, the slide function and requestAnimationFrame is used.

What is Request Animation Frame?

According to MDN web docs definition, requestAnimationFrame method tells the browser that you wish to perform an animation and requests that the browser call a specified function to update an animation before the next repaint.

In this case, we are telling the requestAnimationFrame to update the redsquare’s CSS value 60 times per second through recursion.

requestAnimationFrame provides the timestamp (the run time of the Vue component since its inception) which is used to compare to the user-provided animation duration and provide the percentage of the animation completed.

With the calculated percentage, we track the progress (the distance the red square travels in px) and update the position of the red square.

Again, this is so much easier with Jquery!

Conclusion

Animation, while it may fall under the category of “nice to have”, is a great way to bring communication between the developer and the end-user. While Jquery brings data-driven animation, VueJS leaves it to 3rd party library. As Jquery fades away in favor of Angular, React and Vue, I’ll always appreciate its easy to use animate method.

Thank you for reading. See you next time!