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:

  1. The Browser Rendering Process - The browser needs to constantly calculate new frames to display changes to your application on the screen. This is a cycle that involves evaluating styles, calculating positions of elements on the screen, painting pixels to the screen, and organising layers. Understanding how this process works is key to rendering "frames" faster.
  2. Frame Rate - If we can optimise our animations/interactions to the point where the browser is able to render around 60 frames to the screen every second, the animations/interactions will feel smooth.
  3. Response Times - Responding to user input within 80-100ms will make the application feel snappy/responsive. If there are delays longer than this it may be noticeable to the user. Even if it is somewhat imperceptible it might just feel low-quality.

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).

Table of Contents

You can view the entire table of contents for the book below. There are two different packages available depending on how much you want to learn. What is available in each package is indicated by the ESSENTIAL and COMPLETE labels.

Section 1: Introduction

ESSENTIAL COMPLETE Lesson 1: Welcome
ESSENTIAL COMPLETE Lesson 2: Native vs Web Animation Performance
ESSENTIAL COMPLETE Lesson 3: Methodology

Section 2: CSS Animations

ESSENTIAL COMPLETE Lesson 1: Introduction to CSS Animations
ESSENTIAL COMPLETE Lesson 2: CSS Transitions
ESSENTIAL COMPLETE Lesson 3: CSS Animations
ESSENTIAL COMPLETE Lesson 4: Dynamically Applying Animations
ESSENTIAL COMPLETE Lesson 5: Debugging Animations

Section 3: The Ionic Animations API

ESSENTIAL COMPLETE Lesson 1: Introduction to the Ionic Animations API
ESSENTIAL COMPLETE Lesson 2: Basic Animation Creation
ESSENTIAL COMPLETE Lesson 3: Advanced Configuration and Playback Control
ESSENTIAL COMPLETE Lesson 4: Ionic Animations Case Study: Menu Component
ESSENTIAL COMPLETE Lesson 5: Overriding Ionic Animations

Section 4: Ionic Gestures

ESSENTIAL COMPLETE Lesson 1: Introduction to Ionic Gestures
ESSENTIAL COMPLETE Lesson 2: Basic Gesture Creation
ESSENTIAL COMPLETE Lesson 3: Advanced Configuration
ESSENTIAL COMPLETE Lesson 4: Ionic Gestures Case Study: Menu Component

Section 5: Performance Concepts

ESSENTIAL COMPLETE Lesson 1: The Browser Rendering Process
ESSENTIAL COMPLETE Lesson 2: Measuring Performance
ESSENTIAL COMPLETE Lesson 3: Performance Optimisation Strategies
ESSENTIAL COMPLETE Lesson 4: Animating Non-Compositor Properties
ESSENTIAL COMPLETE Lesson 5: Perceived Performance

Section 6: Simple Examples

ESSENTIAL COMPLETE Lesson 1: Dynamic Button State Animation
ESSENTIAL COMPLETE Lesson 2: Staggered List Animation with CSS
ESSENTIAL COMPLETE Lesson 3: Sliding Drawer with the Ionic Animations API
ESSENTIAL COMPLETE Lesson 4: Adding Gesture Controls to an Animation
ESSENTIAL COMPLETE Lesson 5: Expanding Button Screen Transition

Section 7: Advanced Examples

COMPLETE Lesson 1: Swipe-to-Delete Component
COMPLETE Lesson 2: Chat Bubble with Velocity Based Animation
COMPLETE Lesson 3: Expanding Card Transition
COMPLETE Lesson 4: Hold to Confirm Animation/Gesture
COMPLETE Lesson 5: Tinder Style Swipeable Card

Project 1: Currently Playing Interface

ESSENTIAL COMPLETE Lesson 1: Introduction
ESSENTIAL COMPLETE Lesson 2: Basic Structure
ESSENTIAL COMPLETE Lesson 3: CSS State Management
ESSENTIAL COMPLETE Lesson 4: Album Cover Fade Effect
ESSENTIAL COMPLETE Lesson 5: Morphing Screen Transition

Project 2: Inbox Interface

COMPLETE Lesson 1: Introduction
COMPLETE Lesson 2: Basic Structure
COMPLETE Lesson 3: Swipe Actions Component
COMPLETE Lesson 4: Advanced Performance Optimisation

Project 3: Swipeable Card Interface

COMPLETE Lesson 1: Introduction
COMPLETE Lesson 2: Basic Structure
COMPLETE Lesson 3: Extended Swipeable Card Component
COMPLETE Lesson 4: Infinite Card Stack Component

Conclusion

ESSENTIAL COMPLETE Conclusion

The Packages

All prices are in USD. Taxes may apply to some customers depending on their location.

ESSENTIAL PACKAGE
Advanced Animations & Interactions with Ionic - Essential Edition
COMPLETE PACKAGE
Advanced Animations & Interactions with Ionic - Complete Edition

Frequently Asked Questions

Which frameworks is the book available for?

Separate editions of the book are sold for StencilJS, Angular, and React. If there is enough demand, a Vue version may also be released.

What if I want more than one edition?

Each edition of the book is sold separately, however, if you purchase one edition of the book (e.g. StencilJS) you will be able to get any other edition of the book (e.g. Angular or React) at a 75% discount. You will just need to contact me to arrange this.

If you would like to buy all editions there is a separate package listed above for that. This will include the StencilJS , Angular, and React editions. If a Vue edition is ever released, you will receive that as well.

Will I need to pay for updates?

No. Any updates to the package/edition you have bought will always be free.

What do I get when I purchase the book?

Once you have purchased the package you want, you will receive a downloadable package that will contain all of the content for the book. The downloadable package will give you access to all of the content for your package, including all of the source code. This will be available instantly after you make the purchase.

Can I use the examples to build my own apps?

Yes, you may use the source code provided as you please (even commercially). Just keep in mind that the code provided is provided as is and is intended for educational purposes. If you are using the code in a production environment no guarantees for functionality are provided.

What version of Ionic was this created for?

This book was created using Ionic 5.

What if I don't like the book?

If you feel like the book was not worth your money, then I will gladly refund you the full price. Simply reply to your purchase receipt email requesting a refund within 14 days.

Still have a question?

Feel free to contact me at me@joshmorony.com and I'd be happy to answer any questions you have about the book.

Back to packages