How to add animations in ionic application?

In this article we will teach you how you can add animations in ionic application.

Animations are special effects which beautify our applications and increases the user interaction to the applications. So, to beautify or add animation in our ionic application. We can use the CSS effects in our ionic application. There are many CSS properties like transform, transitions, animation or effects(text effects, gradients, shadows) etc. which we can use to animate our ionic application.

Adding FadeIn animation or FadeIn effects in Ionic 3

In Ionic 3 go to your directory located at project_root_directory/src/theme/default.scss file and paste the code given below.

.fadeIn {
  animation-name: FadeIn;
  animation-duration: 4s;
}

@keyframes FadeIn {
  0% {
    opacity: 1;
  }
  25% {
    opacity: 0.25;
  }
  50% {
    opacity: 0.5;
  }
  75% {
    opacity: 0.75;
  }
  100% {
    opacity: 1;
  }
}

Now we have a class fadeIn and go to your template file(.html file) located at project_root_directory/src/pages/. Then add the fadeIn class to element or tag where you want fade in effect or animation.

Adding SlideInUp animation or effects in ionic 3

For slide in up animation or effect just paste the code given below in your default.scss file.

.slideInUp {
  animation-name: slideInUp;
  animation-duration: 2s;
}

@-webkit-keyframes slideInUp {
  from {
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

Now we have a class slideInUp so just add the slideInUp class to your template file where you want the slideInUp animation or effects.

Adding Bouncing animation or effects in Ionic 3

For bouncing animation or effects add the code given below in your default.scss file.

.bounce {
  -webkit-animation-name: bounce;
  animation-name: bounce;
  -webkit-transform-origin: center bottom;
  transform-origin: center bottom;
}

@keyframes bounce {
  from,
  20%,
  53%,
  80%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  40%,
  43% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -30px, 0);
    transform: translate3d(0, -30px, 0);
  }

  70% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -15px, 0);
    transform: translate3d(0, -15px, 0);
  }

  90% {
    -webkit-transform: translate3d(0, -4px, 0);
    transform: translate3d(0, -4px, 0);
  }
}

Now we have a class bounce so just add the bounce class to your elements or tags in template file to have bounce animations or effects.

That’s it Now you can add animations in ionic application like fadeIn, slideInUp, bounce etc. You can also use other CSS properties like text shadow, transitions etc or can add transitions to ionic application.

If you want more tutorials and tricks about Ionic then visit our Ionic Page.

Subscribe Your Email, Follow Us on Facebook, Twitter, Tumblr, LinkedIn.

If you like this article then share this.

2024 - RMC