Creating Interactive Ionic Apps with Gestures and Animation

ionic app development

With the Ionic5 we got access to Gestures and Animation utility APIs, Which helps to add simple interactive elements and complex gestures to the ionic app. Ionic Gesture is a utility that allows developers to build custom gestures and interactions for their application. Whereas Ionic Animations is a utility that allows developers to build complex animation. Developers are not required to use a particular framework such as React or Angular and they are not required to an Ionic app Development.

A brief Introduction to Ionic Gestures

Ionic Gestures allows us to take our animations out of the domain of something that is just played from beginning to end, into something that can react to more precise input from the user. We can also use both Ionic Animation API and Ionic Gestures in isolation to create animations and interaction, but also can use them together to do some impressive things. 

Ionic Gestures requires certain values:

  • The actual DOM element which reacts to the gesture
  • A threshold after which the gesture starts to prevent issues with scrolling or other functions.
  • Naming the Gesture
  • Handling the gesture with onStart onMove and onEnd 
  • Enable the gesture by calling enable(true) on the Gesture

Introducing Ionic Animation

Ionic Animation is an open source animations utility that provides developers the tools to build highly performant animations regardless of the framework they are using. Ionic Animation is now officially part of the ionic 5.0 release which uses the Web Animations API to build and run all animations.Creating efficient animations has traditionally been tough. Developers are frequently limited by libraries available to them as well as the hardware that their apps run on. Other than that, many of these animation libraries use a JavaScript driven approach to running animations where they handle calculation of animation’s value at every step in a requestAnimationFrame event loop.

To create an animation, we need to handle some things:

  • Create a new Animation with the AnimationController and name it 
  • Add the native Element on which we want to perform the animation
  • Define what the animation should do
  • Call play() on the created Animation 

   This is the basic animation idea, and then one can define various elements of the animation like the duration (how long should the animation play?), iterations (how often should the animation run?) and the fromto() operator 

Combining Gestures and Animations

After gaining basic knowledge of Gestures and Animations, the next logical step is to combine both of them to create better interactive elements inside the Ionic app. Firstly one can easily create with a combination is a custom slide to delete functionality for your element. Even though we already got the ion- item sliding, it never felt 100% correct as usually one can completely swipe out an item which removes that row. 

How to handle a complex gesture and animation? 

  • Considering list of items, we want to access each of them inside a QueryList using the @viewchildren decorator this time
  • Also we need to add gesture to each item in that list and allow moving it to the left and right along the X-axis and set the direction to X- axis
  • Thus that element is moved.

Since this is already enough to move an element to the left and right to disclose the underlying background and delete icon. 

Using Animation for Modals

Defining custom animations for page or modal transitions. To use it, simply create a new file inside the app at src/app/modal-animation.ts and insert it. This animation will show the backdrop like the regular modal appears, and then somehow bounce in the next page.                           

There are two ways to use custom animations:

  • Define them while opening a modal 
  • Define them as the standard inside the Ionic configuration at the app module.

To make the model stand out a bit more and see the animation more clearly, use a custom class for the modal to define inside src/global.scss. After this it will change the size of the modal a bit so it looks cooler. 

In Conclusion 

The opportunities over here are effectively endless,one can create any number of gestures or animations using the basic concept of listening for the start, movement, and events of gestures. One can also add a double tap gesture, create powerful directives or can use advanced custom page transitions. Improving Ionic app with small animation and auxiliary gestures can cause a great impact on the overall user experience.

Author Bio –

Hermit Chawla is a MD at AIS Technolabs which is  Web Design and Web development Company, helping global businesses to grow. He love to share his thoughts on Top ionic app development company

Leave a Reply

Your email address will not be published. Required fields are marked *