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