How it works...

The following is the general process of animation:

  • Since there are three slides, the user has to swipe twice to reach the end. This means that the first swipe will be at 50% progress.
  • When a user swipes left to 25%, the Ionic logo will fade out.
  • When a user swipes to 50%, the Angular logo will fade in for the second slide.
  • When a user swipes to 75%, the Angular logo will move up to disappear instead of fading out.
  • Finally, in the last 75% to 100%, the JavaScript logo will fade in.

You probably noted that the amount of fade or movement will depend on the progress percentage. Thus, if you swipe left and right a little bit, you can see the animation responding to the gesture right away. There are two layers in the template. ...

Get Ionic Cookbook - Third Edition now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.