{"id":28882,"date":"2024-04-10T00:51:17","date_gmt":"2024-04-09T23:51:17","guid":{"rendered":"https:\/\/nelkodev.com\/blog\/animacion-fluido-con-requestanimationframe\/"},"modified":"2024-06-03T17:43:05","modified_gmt":"2024-06-03T16:43:05","slug":"animacion-fluido-con-requestanimationframe","status":"publish","type":"post","link":"https:\/\/nelkodev.com\/en\/blog\/fluid-animation-with-requestanimationframe\/","title":{"rendered":"Fluid Animation with requestAnimationFrame"},"content":{"rendered":"<p>We are entering an era where animations and interactivity are a fundamental part of the user experience on the web. Smooth animations not only increase the aesthetic appeal of an app, but can also improve the user experience by making the interface more intuitive and responsive. To achieve this, <code>requestAnimationFrame<\/code> It has become an essential tool for web developers. In this walkthrough, we will explore how to use <code>requestAnimationFrame<\/code> to create smooth animations that enrich your web projects.<\/p>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_80 counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #ffffff;color:#ffffff\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #ffffff;color:#ffffff\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewbox=\"0 0 24 24\" version=\"1.2\" baseprofile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1' ><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/nelkodev.com\/en\/blog\/fluid-animation-with-requestanimationframe\/#%C2%BFQue_es_requestAnimationFrame\" >What is requestAnimationFrame?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/nelkodev.com\/en\/blog\/fluid-animation-with-requestanimationframe\/#Ventajas_de_Usar_requestAnimationFrame\" >Advantages of Using requestAnimationFrame<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/nelkodev.com\/en\/blog\/fluid-animation-with-requestanimationframe\/#Crear_una_Animacion_Basica\" >Create a Basic Animation<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/nelkodev.com\/en\/blog\/fluid-animation-with-requestanimationframe\/#Controlando_la_Velocidad_y_el_Timing_de_las_Animaciones\" >Controlling the Speed and Timing of Animations<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/nelkodev.com\/en\/blog\/fluid-animation-with-requestanimationframe\/#Ejemplos_Avanzados_y_Uso_Practico\" >Advanced Examples and Practical Use<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/nelkodev.com\/en\/blog\/fluid-animation-with-requestanimationframe\/#Conclusion_y_Proximos_Pasos\" >Conclusion and Next Steps<\/a><\/li><\/ul><\/nav><\/div>\n<h3><span class=\"ez-toc-section\" id=\"%C2%BFQue_es_requestAnimationFrame\"><\/span>What is requestAnimationFrame?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><code>requestAnimationFrame<\/code> is a browser API that allows you to run animations efficiently and smoothly on the web. It was designed specifically for animations, offering a number of benefits over more traditional methods such as <code>setTimeout<\/code> o <code>setInterval<\/code>. It works by allowing the browser to determine the optimal time to refresh the animation, aligning with the browser&#039;s refresh cycle, typically 60 times per second (60 FPS).<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Ventajas_de_Usar_requestAnimationFrame\"><\/span>Advantages of Using requestAnimationFrame<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>The main advantage of using <code>requestAnimationFrame<\/code> is that it allows the browser to control the timing of the animation. This means that the browser can pause animations when the tab is not active, reducing resource consumption and improving overall browser performance. Additionally, it synchronizes the animation with the monitor refresh, reducing or eliminating image tearing and providing smoother animation.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Crear_una_Animacion_Basica\"><\/span>Create a Basic Animation<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>To start an animation with <code>requestAnimationFrame<\/code>, we must first define a function that we want to repeat in each frame of the animation. Here is a simple example of how to make an element move from left to right on the screen:<\/p>\n<pre><code class=\"&quot;language-javascript&quot;\">let element = document.getElementById(&#039;myElement&#039;); let posX = 0; function animate() { xpos += 1; \/\/ Increment the position by 1px element.style.left = `${posX}px`; \/\/ Update the position of the element if (posX &lt; 500) { \/\/ Stop condition requestAnimationFrame(animate); \/\/ Repeat the animation } } requestAnimationFrame(animate);<\/code><\/pre>\n<p>In the code above, <code>encourage<\/code> is a function that updates the position of the element and then uses <code>requestAnimationFrame<\/code> to call itself again in the next available frame.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Controlando_la_Velocidad_y_el_Timing_de_las_Animaciones\"><\/span>Controlling the Speed and Timing of Animations<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>A common challenge when working with <code>requestAnimationFrame<\/code> is to control the speed of the animation. Given the <code>requestAnimationFrame<\/code> does not guarantee a fixed time between frames, we can make adjustments based on the elapsed time:<\/p>\n<pre><code class=\"&quot;language-javascript&quot;\">let lastTime = 0; function animate(currentTime) { const timeDifference = currentTime - lastTime; \/\/ Adjust this to control the speed of the animation const speed = 0.1; posX += speed * timedifference; element.style.left = `${posX}px`; if (Xpos &lt; 500) { lastTime = currentTime; requestAnimationFrame(animate); } } requestAnimationFrame(animate);<\/code><\/pre>\n<h3><span class=\"ez-toc-section\" id=\"Ejemplos_Avanzados_y_Uso_Practico\"><\/span>Advanced Examples and Practical Use<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>As you become familiar with <code>requestAnimationFrame<\/code>, you can start exploring more complex animations. For example, combining multiple animations to create interesting effects, such as simultaneous entry\/exit animations, or even animations based on user interaction.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Conclusion_y_Proximos_Pasos\"><\/span>Conclusion and Next Steps<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><code>requestAnimationFrame<\/code> is a powerful tool for any web developer looking to create refined and smooth user experiences. I encourage you to experiment with this feature and discover its potential to improve your web projects. Remember that effective animation can mean the difference between an app that is merely functional and one that truly captivates users.<\/p>\n<p>If you would like to discuss more about how you can implement <code>requestAnimationFrame<\/code> on your own projects, or if you have specific questions about web animation, feel free to visit <a href=\"https:\/\/nelkodev.com\/en\/contact\/\">my contact page<\/a>.<\/p>\n<p>Discover more resources and tutorials at <a href=\"https:\/\/nelkodev.com\/en\/\">nelkodev.com<\/a> to continue honing your web development skills.<\/p>","protected":false},"excerpt":{"rendered":"<p>We are entering an era where animations and interactivity are a fundamental part of the user experience on the web. Smooth animations not only increase the aesthetic appeal of an application, but can also improve the user experience by making the interface more intuitive and responsive. To achieve this, we need to [\u2026]<\/p>","protected":false},"author":1,"featured_media":28883,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[420,1939],"tags":[1603,205,90,1997,2205,1008,1950],"class_list":["post-28882","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","category-pruebas-de-frontend","tag-animacion","tag-blog","tag-con","tag-fluido","tag-frontend","tag-pruebas","tag-requestanimationframe"],"_links":{"self":[{"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/posts\/28882","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/comments?post=28882"}],"version-history":[{"count":0,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/posts\/28882\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/media\/28883"}],"wp:attachment":[{"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/media?parent=28882"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/categories?post=28882"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/tags?post=28882"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}