Animation

A developer guide that details numerous strategies for implementing animation into Aurelia applications.

Learn numerous techniques for implementing animations into your Aurelia applications.

Component-based animations

In instances where you don't need to implement router-based transition animations (entering and leaving), we can lean on traditional CSS-based animations to add animation to our Aurelia applications.

Let's animate the disabled state of a button by making it wiggle when we click on it:

export class MyApp {
    private disabled = false;
    
    animateButton() {
        this.disabled = true;
        
        setTimeout(() => {
            this.disabled = false;
        }, 2000);
    }
}

@keyframes wiggle {
  0%, 7% {
    transform: rotateZ(0);
  }
  15% {
    transform: rotateZ(-15deg);
  }
  20% {
    transform: rotateZ(10deg);
  }
  25% {
    transform: rotateZ(-10deg);
  }
  30% {
    transform: rotateZ(6deg);
  }
  35% {
    transform: rotateZ(-4deg);
  }
  40%, 100% {
    transform: rotateZ(0);
  }
}

.wiggle {
  animation: wiggle 2s linear infinite;
}

<button type="button" wiggle.class="disabled" click.trigger="animateButton()">Wiggle!</button>

Aurelia Wiggle Animation - StackBlitzStackBlitz

Stateful Animations

Some animations are reactive based on user input or other application actions. An example might be a mousemove event changing the background colour of an element.

In this example, when the user moves their mouse over the DIV, we get the clientX value and feed it to a reactive style string that uses the x value to complete the HSL color value. We use lower percentages for the other values to keep the background dark for our white text.

export class MyApp {
    private x = 0;
    
    mouseMove(x) {
        this.x = x;
    }
}

.movetransition {
    padding: 20px;
    transition: 0.4s background-color easein-out;
}

<div
  mousemove.trigger="mouseMove($event.clientX)"
  style="background-color: hsl(${x}, 40%, 32%)"
  class="movetransition"
>
  <p>Move it, move it.</p>
  <p>X value is: ${x}</p>
</div>

Aurelia Stateful Animation - StackBlitzStackBlitz

Reactive Animations

Not to be confused with state animations, a reactive animation is where we respond to changes in our view models instead of views and animate accordingly. You might use an animation library or custom animation code in these instances.

In the following example, we will use the animation engine Anime.js to animate numeric values when a slider input is changed. Using the change event on our range slider, we'll animate the number up and down depending on the dragged value.

import anime from 'animejs';

export class MyApp {
  private sliderVal = 0;
  private sliderWrapper: HTMLElement;

  animateValue() {
    anime({
      targets: this.sliderWrapper,
      textContent: `${this.sliderVal}`,
      easing: 'easeInOutQuad',
      round: true,
      duration: 1200,
    });
  }
}

<input
  type="range"
  min="0"
  max="1000000"
  value.bind="sliderVal"
  change.trigger="animateValue()"
/>

<p ref="sliderWrapper" class="slider-wrapper">${sliderVal & oneTime}</p>

.slider-wrapper {
  background: #333;
  color: #fff;
  display: block;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 19px;
  font-weight: bold;
  padding: 12px;
}

Aurelia Reactive Animation - StackBlitzStackBlitz