# Exploring Javascript's requestAnimationFrame [By\\ \\ Kenneth Lee](/content/author/kenneth/index.html) 1. [Home](/content/site-root.html) 2. [Engineering Blog](/content/blog/index.html) 3. Exploring Javascript's requestAnimationFrame # 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: ```js $('#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](https://greensock.com/tweenlite) and [TweenJS](https://www.createjs.com/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](https://jsbin.com/risogup/edit?html,css,js,console,output) 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! ### Next Post #### WebAssembly, the end of Javascript era? [Read More](/content/2019/01/webassembly-the-end-of-javascript-era/index.html) **Tags:** [animation](/content/post/tag/animation/index.html), [javascript](/content/post/tag/javascript/index.html), [jquery](/content/post/tag/jquery/index.html), [RequestAnimationFrame](/content/post/tag/requestanimationframe/index.html), [vue](/content/post/tag/vue/index.html), [vuejs](/content/post/tag/vuejs/index.html) **Categories:** [JavaScript](/content/post/category/javascript/index.html) ### Comments Disqus Recommendations We were unable to load Disqus Recommendations. If you are a moderator please see our [troubleshooting guide](https://docs.disqus.com/help/83/). ❮ - 7 years ago - 1 comment Edit PDF Form fields with PHP - 8 years ago - 1 comment A real world example of an Angular observable - 8 years ago - 4 comments An overview and examples of debugging your PHP application with the use of … - 9 years ago - 4 comments Managing Multiple Bootstrap Modals - 9 years ago - 3 comments Setting up your environment and is a very important part of unit testing AngularJS … - 10 years ago - 1 comment Remote PHP Debugging with Xdebug - 8 years ago - 1 comment The DevOps Dilemma - 10 years ago - 1 comment Evolution of the PHP Language ❯ Disqus Comments We were unable to load Disqus. If you are a moderator please see our [troubleshooting guide](https://docs.disqus.com/help/83/). What do you think? 0 Responses Upvote Funny Love Surprised Angry Sad G Start the discussion… Comment ###### Log in with ###### or sign up with Disqus or pick a name ### Disqus is a discussion network - Don't be a jerk or do anything illegal. Everything is easier that way. [Read full terms and conditions](https://docs.disqus.com/kb/terms-and-policies/) This comment platform is hosted by Disqus, Inc. I authorize Disqus and its affiliates to: - Use, sell, and share my information to enable me to use its comment services and for marketing purposes, including cross-context behavioral advertising, as described in our [Terms of Service](https://help.disqus.com/customer/portal/articles/466260-terms-of-service) and [Privacy Policy](https://disqus.com/privacy-policy), including supplementing that information with other data about me, such as my browsing and location data. - Contact me or enable others to contact me by email with offers for goods or services - Process any sensitive personal information that I submit in a comment. See our [Privacy Policy](https://disqus.com/privacy-policy) for more information Acknowledge I am 18 or older - [Favorite this discussion](https://disqus.com/embed/comments/?base=default&f=arroyolabs&t_i=1996&t_u=https%3A%2F%2Fwww.arroyolabs.com%2F2018%2F12%2Fexploring-javascripts-requestanimationframe%2F&t_d=Exploring%20Javascript%27s%20requestAnimationFrame&t_t=Exploring%20Javascript%27s%20requestAnimationFrame&s_o=default# "Favorite this discussion") - ## Discussion Favorited! Favoriting means this is a discussion worth sharing. It gets shared to your followers' Disqus feeds, and gives the creator kudos! [Find More Discussions](https://disqus.com/home/?utm_source=disqus_embed&utm_content=recommend_btn) [Share](https://disqus.com/embed/comments/?base=default&f=arroyolabs&t_i=1996&t_u=https%3A%2F%2Fwww.arroyolabs.com%2F2018%2F12%2Fexploring-javascripts-requestanimationframe%2F&t_d=Exploring%20Javascript%27s%20requestAnimationFrame&t_t=Exploring%20Javascript%27s%20requestAnimationFrame&s_o=default#) - Tweet this discussion - Share this discussion on Facebook - Share this discussion via email - Copy link to discussion - [Best](https://disqus.com/embed/comments/?base=default&f=arroyolabs&t_i=1996&t_u=https%3A%2F%2Fwww.arroyolabs.com%2F2018%2F12%2Fexploring-javascripts-requestanimationframe%2F&t_d=Exploring%20Javascript%27s%20requestAnimationFrame&t_t=Exploring%20Javascript%27s%20requestAnimationFrame&s_o=default#) - [Newest](https://disqus.com/embed/comments/?base=default&f=arroyolabs&t_i=1996&t_u=https%3A%2F%2Fwww.arroyolabs.com%2F2018%2F12%2Fexploring-javascripts-requestanimationframe%2F&t_d=Exploring%20Javascript%27s%20requestAnimationFrame&t_t=Exploring%20Javascript%27s%20requestAnimationFrame&s_o=default#) - [Oldest](https://disqus.com/embed/comments/?base=default&f=arroyolabs&t_i=1996&t_u=https%3A%2F%2Fwww.arroyolabs.com%2F2018%2F12%2Fexploring-javascripts-requestanimationframe%2F&t_d=Exploring%20Javascript%27s%20requestAnimationFrame&t_t=Exploring%20Javascript%27s%20requestAnimationFrame&s_o=default#) Be the first to comment. [Load more comments](https://disqus.com/embed/comments/?base=default&f=arroyolabs&t_i=1996&t_u=https%3A%2F%2Fwww.arroyolabs.com%2F2018%2F12%2Fexploring-javascripts-requestanimationframe%2F&t_d=Exploring%20Javascript%27s%20requestAnimationFrame&t_t=Exploring%20Javascript%27s%20requestAnimationFrame&s_o=default#) live.rezync.com # live.rezync.com is blocked This page has been blocked by an extension - Try disabling your extensions. ERR\_BLOCKED\_BY\_CLIENT Reload This page has been blocked by an extension pippio.com # pippio.com is blocked This page has been blocked by an extension - Try disabling your extensions. ERR\_BLOCKED\_BY\_CLIENT Reload This page has been blocked by an extension # See how we can help Lets talk! Contact Us # Stay up to date on the latest technologies Join our mailing list, we promise not to spam. Email AddressJoin