Animating Elements in your Ionic App

In this screencast, I talk about how you can animate elements in your app in a performant way. Prefer to read the info? Check it out below.

In this example, we have a view with ten items in it, and we want to slide the items in from the left when we visit the page.

Let’s create a keyframe animation and animate the left property.

@-webkit-keyframes slideIn {
  0% {
    left: -100%;
  }
  100% {
    left: 0;
  }
}

.slide-in{
   -webkit-animation: slideIn ease-in 1; 
  animation: slideIn ease-in 1;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-animation-duration: 750ms;
  animation-duration: 750ms;
}

If you load up your app in a browser, the animation will look OK. But if you try this on a device, you’ll start to see the animation stutter. This is what we call jank.

What’s happening is that as you try to animate the left property of the items, the web view will have to go back and try to recalculate that item’s position. This happens for a lot of CSS properties.

Thankfully, we have other ways to animate these items.

Let’s change that left property to transform and set the value to use translate3d. Translate3d is a special CSS value that will actually move the animation to the device’s GPU. This is called hardware accelerated animation.

@-webkit-keyframes slideIn {
  0% {
    left: -100%;
  }
  100% {
    left: 0;
  }
}

@-webkit-keyframes slideInSmooth {
  0% {
    -webkit-transform: translate3d(-100%,0,0);
  }
  100% {
    -webkit-transform: translate3d(0,0,0);
  }
}


.slide-in{
   -webkit-animation: slideInSmooth ease-in 1; 
  animation: slideInSmooth ease-in 1;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-animation-duration: 750ms;
  animation-duration: 750ms;
}

Now, instead of having janky animation, we can get a smooth transition for all of our items.