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:
- 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.
- 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.
- 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.
- Theory: The first section of the book focuses on theory related to CSS Animations, the Ionic Animations API, Ionic Gestures, and Performance.
- 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.
- 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|
|ESSENTIAL COMPLETE Conclusion|
- All ESSENTIAL & COMPLETE Content
- eBook in PDF Format (Complete Version ~460 pages)
- eBook in EPUB & MOBI formats (Complete Versions)
- All Theory Source Code
- All Simple Examples Source Code
- All Advanced Examples Source Code
- Project 1 Source Code
- Project 2 Source Code
- Project 3 Source Code
- BUY STENCILJS EDITION $129BUY ANGULAR EDITION $129BUY REACT EDITION $129Buy all editions $179
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 firstname.lastname@example.org and I'd be happy to answer any questions you have about the book.Back to packages