Preview some of the high performance animations and interactions we create in the book

You can create buttery smooth animations and interactions with web views

(if you know what you are doing)

Well executed animations really are that extra touch that can take a seemingly average application to another level, so it is unfortunate that there is a perception that smooth/high-performance animations belong to the realm of "truly native" applications, not web-based applications.

When it comes to native versus the web for animations, I think that this is actually one of the few areas where the criticisms of the web approach can be valid. There are noticeable limitations to what you can do on the web with animations and interactions whilst maintaining a high degree of performance... but that limit is a lot higher than most people probably think.

The key performance concepts to understand to create high quality experiences, and what we will spend a lot of time striving for in the book, are as follows:

Understanding how to measure the performance of your animations and interactions, and how to interpret those results in order to optimise the points above, is what will take you to the next level of Ionic development. This is how you build applications that people assume are "truly native".

The Ionic Animations API & Gestures

The Ionic Animations API provides an easy-to-use interface for creating animations that is built right into Ionic. It provides the convenience and performance benefits of the Web Animations API - which is a native animations API for the web - where it is supported, and automatically falls back to using CSS Animations where the Web Animations API is not supported. On top of this, many of Ionic's components use the Ionic Animations API to implement their own animations, and we can override this with our own custom Ionic Animations.

Ionic Gestures allow us to take our animations out of the realm of something that is just played from beginning to end, into something that can react to more precise input from the user (e.g. a drag along the screen, rather than just a click/tap). We can use both the Ionic Animations API and Ionic Gestures in isolation to create animations and interactions, but we can also use them together to do some rather impressive things. We will do both throughout the book.

Just using the Ionic Animations API does not give you a free pass to performance. Although there are performance benefits to be had from using the Ionic Animations API - both in greater frames per second and lower battery consumption - if you break the fundamental performance rules and don't put effort into optimisation, you run the risk of creating sub-optimal experiences. Performance concepts, the Ionic Animations API, and Ionic Gestures are all tightly integrated in this book.

Who is this book for?

This is an intermediate to advanced level book and assumes that the reader already has a solid understanding of Ionic and their framework of choice. The focus of the book is primarily on features and functionality related to animation/gesture/interaction creation, and related concepts like performance. No time is spent explaining general Ionic or framework concepts like component creation, lifecycle hooks, routing, and so on.

What will I learn?

If you keep scrolling down you will see a complete overview of everything this book and its resources will teach you, but I will give you a quick overview now. The book is broken up into three main areas.

1. Theory: The first section of the book focuses on theory related to CSS Animations, the Ionic Animations API, Ionic Gestures, and Performance.
2. Examples: The second section of the book includes 5-10 (depending on the package you have) practical examples that utilise the theory introduced in the first section.
3. Projects: The final section of the book covers 1-3 projects. The projects also aim to reinforce concepts learned throughout the book with practical examples, but the projects aim to consider the broader application rather than just an isolated example.

Keep in mind that the focus of the projects is specifically just on the part of the application/interface relevant to the animations/interactions that we are building. These are not entire feature complete applications (again, the focus of this book is performance, animations, and interactions - not general framework concepts).