{"id":3064,"date":"2020-01-16T19:09:52","date_gmt":"2020-01-16T19:09:52","guid":{"rendered":"https:\/\/ionicframework.com\/blog\/?p=3064"},"modified":"2020-10-15T22:16:35","modified_gmt":"2020-10-15T22:16:35","slug":"introducing-ionic-animations","status":"publish","type":"post","link":"https:\/\/ionic.io\/blog\/introducing-ionic-animations","title":{"rendered":"Introducing Ionic Animations"},"content":{"rendered":"

Building efficient animations has traditionally been hard. Developers are often limited by the libraries available to them as well as the hardware that their apps run on. On top of that, many of these animation libraries use a JavaScript-driven approach to running animations where they handle the calculation of your animation\u2019s values at every step in a requestAnimationFrame<\/code> event loop.<\/p>\n

To combat these issues we have created Ionic Animations. Ionic Animations is an open source animations utility that provides the tools developers need to build highly performant animations regardless of the framework they are using. Ionic Animations is more performant than leading animation libraries, which is why we are especially excited about its release. Officially part of our upcoming 5.0 release, we wanted to take some time to dig into what Ionic Animations is and why it is different than other animation libraries.<\/p>\n

<\/p>\n

Why Ionic Animations?<\/h2>\n

As mentioned previously, many animation libraries use a JavaScript-driven approach to running your animations. This approach is problematic as not only is the browser rendering your animation, it is also executing your animation event loop code at every single frame in the same thread as the rest of your application\u2019s logic. By forcing the browser to execute your code on every frame, valuable CPU time is being used that will ultimately impact overall frame rate and energy consumption. While overall frames per second (FPS) is important, it is also crucial to understand the impact your animation is having on the device\u2019s resources.<\/p>\n

Ionic Animations uses the Web Animations API to build and run all of your animations. By doing this, we can offload all of the work required to run your animations to the browser. As a result, the browser is able to schedule and make any optimizations to your animations that it needs, allowing your animations to run as smoothly as possible. This leads to high FPS while maintaining low CPU usage and therefore a lower energy impact. While most modern browsers support Web Animations, we fallback to CSS Animations for browsers that do not. In these instances, the performance difference in switching between the two should typically be negligible.<\/p>\n

Ionic Animations<\/h2>\n

The Ionic Animations API is straight forward and allows developers to create grouped animations, gesture animations, and much more. It currently powers all animations in Ionic Framework including the gesture animations for the menu and swipe to go back.<\/p>\n

Since we are using native web APIs, all animations created naturally have a low CPU and battery usage overhead, allowing your animations to take full advantage of the processing resources available to them.<\/p>\n

Let\u2019s take a look at some examples.<\/p>\n

Ionic Animations provides a chainable API that lets you declare your animation properties with ease. In the example below we\u2019ve created a pulsating effect by animating the scale and changing the direction of the animation on each iteration via the direction<\/code> method.<\/p>\n

<\/iframe><\/p>\n

const animation = createAnimation()\n  .addElement(document.querySelector('.square'))\n  .duration(1000)\n  .direction('alternate')\n  .iterations(Infinity)\n  .keyframes([\n    { offset: 0, transform: 'scale(1)', opacity: '1' },\n    { offset: 1, transform: 'scale(1.5)', opacity: '0.5'\n }\n  ]);\n\nanimation.play();\n\n<\/code><\/pre>\n
You can also group animations and control them using a single parent animation. This gives you the ability to control complex animations with different durations, easings, and other properties.<\/p>\n
const animationA = createAnimation()\n  .addElement(document.querySelector('.square-a'))\n  .fromTo('transform', 'scale(1)', 'scale(1.5)');\n\nconst animationB = createAnimation()\n  .addElement(document.querySelector('.square-b'))\n  .fromTo('transform', 'scale(1)', 'scale(0.5)');\n\nconst parentAnimation = createAnimation()\n  .duration(1000)\n  .addAnimation([animationA, animationB]);\n\nparentAnimation.play();\n\n<\/code><\/pre>\n
Chaining animations is as simple as awaiting a promise!<\/p>\n
const animationA = createAnimation()\n  .addElement(document.querySelector('.square-a'))\n  .duration(1000)\n  .fromTo('transform', 'scale(1)', 'scale(1.5)');\n\nconst animationB = createAnimation()\n  .addElement(document.querySelector('.square-b'))\n  .duration(2000)\n  .fromTo('transform', 'scale(1)', 'scale(0.5)');\n\nawait animationA.play();\nawait animationB.play();\n\n<\/code><\/pre>\n
Ionic Animations also gives you the ability to control animation playback and provides hooks to perform DOM reads and writes, as well as add or remove classes and inline styles.<\/p>\n
const animation = createAnimation()\n  .addElement(document.querySelector('.square'))\n  .duration(1000)\n  .fromTo('transform', 'scale(1)', 'scale(1.5)');\n  .afterStyles({\n    'background': 'green'\n  })\n\nawait animation.play();\n\n<\/code><\/pre>\n
Performance Comparisons<\/h2>\n
When developing Ionic Animations we performed a number of tests to ensure that it was living up to our expectations in terms of performance and resource consumption. We also looked at other animation libraries such as anime.js, GSAP, and Velocity.js to see how Ionic Animations compares to some of the leading alternatives.<\/p>\n
We developed a simple test to see how these different libraries performed when animating a large number of elements. We ran this test on both a desktop device as well as a mobile device to get a sense of performance when dealing with different hardware constraints. The test we built animates a variable number of bubbles floating up the screen at different rates of speed.<\/p>\n
We developed the following performance benchmarks to look at:<\/p>\n