Total Guide To Dynamic Angular Animations That Can Be Customized At Runtime

Tomas Trajan
Angular In Depth
Published in
8 min readJun 18, 2018

--

Original 📸 by Denisse Leon

Animations make projects look much better

AngularInDepth is moving away from Medium. More recent articles are hosted on the new platform inDepth.dev. Thanks for being part of indepth movement!

From route transitions to small details like feedback when clicking on a button or displaying a tooltip, animations give your project that nice sleek look. Well crafted animations communicate that you or your organization care enough to put effort into details and create best possible experience for your users.

Angular makes it very convenient to create both simple and complex animations using its built-in DSL (domain specific language). More so, Angular Material component library is rife with many great looking animations…

Let’s have a look on the following route transition animation recorded from Angular NgRx Material Starter project to get an idea.

Route transition animation is activated when user navigates to a new route (Check out live demo)

The transition consists of two individual animations. First the old page slides up and new page slides down followed by the staggered slide up of individual elements on the new page.

--

--

Tomas Trajan
Angular In Depth

👋 I build, teach, write & speak about #Angular & #NgRx for enterprises 👨‍💻 Google Developer Expert #GDE 👨‍🏫 @AngularZurich meetup co-organizer