Overhauling the framework

Ionic 5: Develop cross-platform apps with new, custom animations

Sarah Schlothauer
© Shutterstock / Quality Stock Arts

The Ionic framework creates cross-platform applications, all with a small memory footprint and AOT compiling. The latest major version, Ionic 5, upgrades the framework with new component designs for iOS and Android, a new animations API, overhauled icons, new starter designments, and improved component customization.

The Ionic framework helps develop fast performing cross-platform mobile apps, progressive web apps, and web tech, all with one shared codebase. One of the framework’s main elements is its ready-made, reusable UI components, which can make developing an app easier even with limited programming experience.

Version 5 (Magnesium) makes the developing experience even more intuitive. This major release includes a large number of updates, design changes, as well as a new API that allows devs to create their own custom animations.

Design overhaul

With the new design changes in iOS 13, iOS native Ionic 5 also receives a makeover to match.

Some of these visual updates include ion-segment, collapsible headers and buttons, swipeToClose , menu overlay with updated animation, pull-to-refresh functionality, and a larger, bolder list header.

Of course, all of these changes are available in both light and dark mode.

SEE ALSO: Python web framework JustPy – interactive websites without JavaScript

Custom animations

Developers can move beyond the limitations of JavaScript-driven animations and create their own reusable Ionic Animations.

According to benchmark tests, on both mobile devices and desktop machines Ionic Animations maintain higher frames per second (a smooth 60 FPS) with low CPU usage. It performed better than other animation libraries such as Anime.js, GSAP, and Velocity.

From the developer blog:

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.

Open source icons


Open source Ionicons sample. Source.

To help kickstart your development, v5 includes some new open source icons, free to use in your web, iOS, Android, and desktop apps under the MIT license. Each icon includes three variants: outline, fill, and sharp.

All icons are available as DVG and web fonts. View the changelog for all the icon updates and a few breaking changes.

Ionic + Angular

The release of Angular 9 introduced Ivy, the newest renderer, as the default. Devs using Ionic and Angular will now also have full support for Ivy and everything that it brings to the table.

Apps made with Ionic Angular will have a smaller final output with better, faster-loading performance.

SEE ALSO: Angular 9 is here – Ivy, Lazy Loading and more

Upgrading to v5

These are just some of the highlights; so refer to the full release notes for Ionic 5.0.

Before you update, view the full list of breaking changes introduced in Ionic 5. The migration guide will walk you through the switch and how to upgrade an app from 4.x to 5.x or from 3.x to 5.x with just a few updates and packages.

With the newest release, some users are reporting various bugs, so be sure to have a look at the open issues on GitHub and see if you are experiencing the same problems.

Sarah Schlothauer

Sarah Schlothauer

All Posts by Sarah Schlothauer

Sarah Schlothauer is the editor for She received her Bachelor's degree from Monmouth University, West Long Branch, New Jersey. She currently lives in Frankfurt, Germany with her husband and cat where she enjoys reading, writing, and medieval reenactment. She is also the editor for Conditio Humana, an online magazine about ethics, AI, and technology.

Inline Feedbacks
View all comments