How do you create reusable Animations in Angular

How do you create reusable Animations in Angular, In this article, we’ll re-create the clap button by using Angular animations.

We’ll learn various animations features such as:

• Creating reusable animations ( animation, useAnimation )
• State change expressions ( :enter, :leave, :increment, :decrement ).

The article assumes a basic knowledge of the basic Angular animations methods, like trigger(), transition(), etc.

Understanding Reusable Animations

// create the animation
const myAnimation = animation('{{ timings }}', []);

// consume the animation
trigger('myTrigger', 
  transition('* => *',
    useAnimation(myAnimation, { params: { timings: 200 } })
  )
);

1. Create an animation by calling the animation() function. It can contain a number of interpolated input parameters such as{{ timings }}.
2. Consume the animation by calling the useAnimation() function. It accepts the animation reference as the first argument, and options object as the second. We pass in the input parameters under the params key. In this example we must provide the timings value: { timings: 200 }.

Now that we understand how to create reusable animations, let’s put it to use by creating the pulse animation.

Create the Pulse Animation

export const pulseAnimation = animation([
  style({ transform: 'scale(1)' }),
  animate(
    '{{ timings }}',
    keyframes([
      style({ transform: 'scale(1)', offset: 0 }),
      style({ transform: 'scale({{ scale }})', offset: 0.5 }),
      style({ transform: 'scale(1)', offset: 1 })
    ])
  )
]);

We create reusable pulse animation by calling the animation() function. It accepts {{ timings }}, and {{ scale }} input parameters. The pulse animation is created by changing the element’s scale by calling the keyframes function.

useAnimation(
  pulseAnimation, 
  { params: { timings: 200, scale: 1.1, } } 
)
at 0ms   scale equals 1
at 100ms scale equals 1.1
at 200ms scale equals 1

Next, we’ll consume the animation inside our first component.

Create the FAB Component

@Component({
  selector: 'app-clap-fab',
  template: `<i class="material-icons">pan_tool</i>`,
  animations: [
    trigger('counterChange', [
      transition(
        ':increment',
        useAnimation(pulseAnimation, {
          params: {
            timings: '400ms cubic-bezier(.11,.99,.83,.43)',
            scale: 1.05
          }
        })
      )
    ])
  ]
})
export class ClapFabComponent {
  @HostBinding('@counterChange')
  @Input()
  counter: number;
}

Inside the component’s animations array, we call the trigger() function with a descriptive counterChange name.

Next we define a transition, and use :increment as the state transition expression. It is a perfect fit, as we want to perform the animation when the user taps on the button, incrementing the claps counter.

Understanding State Change Expressions

:increment — the binding is incremented

:decrement — the binding is decremented

:leave — the element is removed from the DOM.

:enter — the element enters the DOM.

export const slideInAnimation = animation([
  style({ transform: 'translateY({{ from }})', opacity: 0 }),
  animate('{{ timings }}', style({ transform: 'translateY(0)', opacity: 1 }))
]);

export const slideOutAnimation = animation([
  animate(
    '{{ timings }}',
    style({ transform: 'translateY({{ to }})', opacity: 0 })
  )
]);

Just as in the pulse animations, we use the animation() function to create reusable animations. Like before, we use interpolation to define the animation input parameters.

Create the Bubble Component

@Component({
  selector: 'app-counter-bubble',
  template: `+{{counter}}`,
  animations: [
    trigger('visibilityChange', [
      transition(':enter', [
        useAnimation(slideInAnimation, {
          params: { from: '20%', timings: '200ms ease-in' }
        })
      ]),
      transition(':leave', [
        useAnimation(slideOutAnimation, {
          params: { to: '-200%', timings: '200ms ease-in' }
        })
      ])    
    ])
  ]
})
export class CounterBubbleComponent {
  @HostBinding('@visibilityChange')
  animation = true;
}

As the parent component displays and hides the bubble component, we want to trigger the slide in and out animations. This is a perfect place to use the :enter and :leave state change expressions.

We consume the slide animations created in a previous step by calling the useAnimation() function with the appropriate input parameters.

Summary

And that’s it. Hope you enjoyed this article. We’ve used a lot of impressive features from Angular Animations to recreate the Medium Clap Button. You can find the complete code examples below.

Not clapping on an article about clapping is just cruel . If you got to the end of this article, please clap

Further reading:

☞ Angular 2 + Rails 5 Bootcamp

☞ Angular Styling & Animations (for Angular 2+)

☞ Angular Essentials (Angular 2+ with TypeScript)

☞ Angular 2: From Theory to Practice & FREE E-Book

☞ Build Enterprise Applications with Angular 2

Suggest:

☞ Web Development Tutorial - JavaScript, HTML, CSS

☞ Javascript Project Tutorial: Budget App

☞ JavaScript Programming Tutorial Full Course for Beginners

☞ E-Commerce JavaScript Tutorial - Shopping Cart from Scratch

☞ Learn JavaScript - Become a Zero to Hero

☞ JavaScript for React Developers | Mosh