Ionic 5: Develop cross-platform apps with new, custom animations
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.
IONIC 5 IS HERE! 🎉
The biggest design update ever in the history of Ionic:
✓ New iOS & Android component designs
✓ New React & Angular starters
✓ New Ionicons icon pack
✓ New Animations API
Check the Blog for the full story and get building! 👇https://t.co/rAvmCeVqxI
— ionic (@Ionicframework) February 11, 2020
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.
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
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.
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.