Angular and Javascript blog

Angular animations

Sharing is caring!

Well-designed animations can make a UI not only more fun but also easier to use.

Angular’s animation system lets you build animations that run with the same kind of native performance found in pure CSS animations. You can also tightly integrate your animation logic with the rest of your application code, for ease of control.

Let’s do an easy example to better understand how it works. We’ll create a square of 200×200 with a black border of 1px and step by step we’ll try to animate it.

Now that we’ve our square let’s try to change the background color using animations.

  • we imported  (line 1) from @angular/core all the dependencies that we need: “trigger, state, style”
  • we declared a new property called @animateState and we assigned a static value: active (line 5)
  • we added the animations attribute to our component and we said that when the value of animateState is active we set the background colour to red and when is inactive it will be yellow (line 6-16) . We still haven’t set the value of animateState to inactive so do not wait until it will change…it will never happen 🙂
initial state of animation

initial state of animation

Everything looks fine however is much better if we have assigned a variable to animateState. 

  • we created a variable called state (line 19)
  • we used it in the template (line 5)

It’s time! you excited? I honestly was.. I never expected that I was able to do an animation with so less code.

The only things that we did here are:

  • Define a transition from whatever state (*) to whatever state (*) and animate for 2s (line 15)
  • Change the value of state in inactive after 2 sec (line 23-26)
animate state

animate state

I agree with you, we built an easy animation but trust me is not complicated to create a complex one.

For example if we want to change the colour and the size of the square at the same time:

the only change that we made are lines 11-12 with the original width and height and lines 16-17 width the final size.

minimise and change color

minimise and change colour

For a list of all the possible animations that you want to apply, visit the W3C animations page and if you think that you need to implement complicated easing animation have a look on easing.net.

We just scratched the surface, for more information have a look on the official documentation! Angular animate allow us to implement really complicate animation. Matias Niemelä at NgEurope did an amazing talk that I really suggest:

If you want to animate your routes have a look on this repro

If you enjoyed this post follow me on twitter @Dzurico!