how to add animations in ionic application

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 FacebookTwitter, TumblrLinkedIn.

If you like this article then share this.

ReadyMadeCode
Author: ReadyMadeCode

ReadyMadeCode.com is a website where you can find Free Online Tutorials - Website Development Tutorials, App Development Tutorials, Coding Tutorials,Website Designing and Development From popular programming languages or scripts or framework like php, laravel, html, css, javascript, nodejs, java, angularjs etc. Download Emails | E-Books.

View All Posts From ReadyMadeCode
Author Website : https://www.readymadecode.com
Scroll to top

Subscribe For Latest Updates

Enter your email address to subscribe and receive notifications of posts & updates by email.


Want a Website / App / Digital Marketing Solution

Website & App Development Packages

%d bloggers like this:
We have updated our memberships. Please check here
Close X