As part of the lead up to the launch of my next book Advanced Animations and Interactions with Ionic I am releasing the source code for one of the advanced examples in the book for free. You can grab the source code for both Ionic/StencilJS and Ionic/Angular below:
If all goes to plan both the StencilJS and Angular editions of the book will be available at launch, with React to follow later. If you want to see this particular example in action (and you are on desktop) you can check out the application preview in the top-right hand corner of this page. This example implements a custom card component that expands to fill the entire screen when clicked (and then shrinks backs to its original position when closed).
Although I am just giving away the source code here, the book itself will cover each of the included examples in a lot of depth. The intent of the examples is to further reinforce the more theory focused concepts learned earlier in the book about the Ionic Animations API, Gestures, and Performance with practical examples. This particular example is quite interesting as it covers a lot of the more advanced features of the Ionic Animations API including:
- Animation Grouping
- before/after styles
- before/after writes
and it also makes use of the FLIP (First, Last, Invert, Play) concept to implement an animation that is calculated using computationally heavy CSS properties (properties like width and height that trigger browser layouts and paints), but executed using only the performance friendly transform property.
If you are interested in being notified when the book launches, just pop your email address down on the book page. Even if you don’t intend to grab the book, you are welcome to use this card transition example however you please.