types of animations, UX

Good interactive design creates a positive user experience. Many companies that create component libraries, among other things, write documentation with sections on animation and even supply ready-made packages to help build transitions and movements according to their specification.

In this article, we will look at the types of animations in web applications. UX / UI animation patterns in design systems and their implementation in Angular. Also, the method of organizing animations in libraries, taking into account reuse and customization, will be shown.

In previous articles I wrote what we document in our libraries:

  • typography

  • palette

  • icons

  • grid

  • Angular components (components, directives, pipes, services)

We recently decided to add a new section – Animation… Let’s take a look at it.

Goals and principles of interactive design

This time, a new item is added – animation. If the previous points are obvious, then even large library suppliers do not all devote time and attention to the latter. Therefore, first, let’s look at the goals and principles of interactive design in applications:

  • Goal-oriented design is a technique that helps the user achieve a goal in an application.

  • Ease of use – the functionality should be intuitive and reliable, then the user can enjoy their work. Yes, this is true for animations as well.

  • Displaying functionality – an interface element must demonstrate its purpose.

  • Learnability – Interfaces that behave like others are more predictable and easier to understand due to previous user experience. Therefore, animations should also be documented and made reusable.

  • Feedback and Response Time – Interfaces and components must respond instantly to user input. This includes “apparent performance”. Long-running operations can always be hidden with animation.

Types of animations in the browser

After looking at the goals, let’s move on to ways to create animations. We will not dwell on each in detail, but we will fix the ways to optimize them. There are two animation technologies:

css animation – allows you to animate transitions from one CSS style configuration to another.

To optimize css animations, you need to know that there is a property will-changewhich will prompt the browser to change the element. This will improve the responsiveness of the interface. You can read more about the property in the article. link…

javascript animation – create more complex animations as opposed to css.

To optimize javascript animation you need to use requestAnimationFrame – tells the browser that you want to animate and asks it to schedule a redraw at the next animation frame. Read details on the link…

Angular animation

We will not dwell on a detailed description of creating animations in this section, since the Internet is full of articles on this topic, but we will fix the key points related to Angular in the form of abstracts:

  • Work on top of javascript animations

  • Comes out of the box with Angular

  • Convenient API for working with component state. You can invoke animation on a dom element, on a variable in a template. Create a chain of animations.

  • There are tools for reusing animations

Let’s create some UI / UX animation patterns

Pattern: What Just Happened, Adding an Element… Let’s say we have some action that results in adding a new item to the list or table. Visually, an element may be very similar in its data and the user may not notice that a new element has appeared on the form. This violates the principles of interactive design. Let’s implement this kind of pattern by adding an element.

Let’s take a look at the result:

Adding an Angular animation element
Adding an Angular animation element

Source code of the template:

<div class="table">
    <div 
      *ngFor="let item of items; index as i; trackBy:id"
      @fadeExplainMotion
      [@.disabled]="isIniting" 
    >
      ....
    </div>
  </div>

Animation source code in component:

animations: [trigger('fadeExplainMotion', [
    transition(
      ':enter',
      animation([
        style({
          transform: 'translate(25%,0)',
          backgroundColor: '#fafafa',
          height: '30px'
        }),
        animate(
          '300ms cubic-bezier(0.59, 0.32, 0.38, 1.13)',
          style({
            transform: 'translate(0)',
            height: '82px'
          })
        ),
      ])
    )])]

Let’s describe what is happening here:

@ .disabled – disable animation of elements when the list is first loaded.

@fadeExplainMotion – animate the element when adding it to the dom.

animations: […] – a block that describes the behavior of the animation. Here transformations are applied to the dom element, changing the fill and its height. And also the time and function of the movement is set.

Pattern: explaining what is happening (What Just Happened), deleting an element. This kind of animation is similar to the previous one and looks like this:

Removing an Angular animation element
Removing an Angular animation element

Animation code:

transition(
    '* => void',
    animation([
      style({
        backgroundColor: '#fafafa',
        height: '82px'
      }),
      animate(
        300ms cubic-bezier(0.59, 0.32, 0.38, 1.13),
        style({
          transform: 'translate(-25%,0)',
          height: '82px'
        })
      ),
    ])

The code is pretty similar except:

* => void – we respond to the removal of an element from the dom

transform: ‘translate (-25%, 0) – offsets the element from right to left

Great, we’ve written a couple of animations for the component. Let’s imagine that we need to use them in other applications. We read on how to do this.

Let’s make animation reusable and customizable for library users using dependency injection

After studying many component libraries, we can conclude that it is convenient to put animations in the “animation” directory. For example, guys from TaigaUI and NgZorro do this. This method also seemed convenient to us.

Let’s add a file “fade-explain.ts” that will export the animation above:


const TRANSITION = '{{duration}}ms cubic-bezier(0.59, 0.32, 0.38, 1.13)';
const DURATION = {params: {duration: 300}};

export const fadeExplainMotion: AnimationTriggerMetadata = trigger('fadeExplainMotion', [
  transition(
    ':enter',
    animation([
      style({
        transform: 'translate(25%,0)',
        backgroundColor: '#fafafa',
        height: '30px'
      }),
      animate(
        TRANSITION,
        style({
          transform: 'translate(0)',
          height: '82px'
        })
      ),
    ]),
    DURATION
  ),
  transition(
    '* => void',
    animation([
      style({
        backgroundColor: '#fafafa',
        height: '82px'
      }),
      animate(
        TRANSITION,
        style({
          transform: 'translate(-25%,0)',
          height: '82px'
        })
      ),
    ])
  )
]);

Now the component metadata will look like this, animation can be connected to any components:


@Component({
  selector: 'app-list',
  templateUrl: './list.component.html',
  styleUrls: ['./list.component.scss'],
  animations: [fadeExplainMotion, fadeExplainEditMotion, ... ],
})

This example demonstrates reuse. Let’s add the ability for Content Library users to change animation parameters such as speed. To do this, we will use the mechanism dependency injection…

  1. create a file “animation-tokens.ts”

  2. Let’s write the ANIMATION_OPTIONS implementation

export const ANIMATIONS_DURATION = new InjectionToken<number>(
    'Duration of animations in ms',
    {
        factory: () => 300,
    },
);

Let’s get the token in the constructor of the component:

constructor(@Inject(ANIMATIONS_DURATION) private readonly duration: number,) {

Let’s create a variable in the component:

animation = {
    value: '', params: { 
      duration: this.duration
    }
  };

Let’s bind the variable to the animation in the template:

<div 
      *ngFor="let item of items; index as i; trackBy:id"
      [@fadeExplainMotion]='animation' 
>

To change the animation speed parameter, add a new token value to the module (in the providers section):

 providers: [
    { provide: ANIMATIONS_DURATION, useValue:  350 }
  ],

Now the whole team can use consistent animations, and override their parameters if necessary.

An example from the article can be found link…

A selection of books and interesting articles on interface animation:

Recently held an online workshop “Roman Sedov & Alexander Inkin | Workshop | DI: two letters, unlimited possibilities.“which had a couple of slides about animation and DI.

Interaction Design & Complex Animations – This book contains the fundamental principles of interactive design and animation.

Animation in Design System E-Book – the book talks about animation in design systems.

In-Depth guide into animations in Angular – This article describes animation in Angular in detail.

Angular UX Using 4 Animation Techniques – an article with a large set of videos on UX / UI and animation in Angular.

Conclusion

In this article, we have defined the role of animations in design systems and component libraries. Highlighted the moments associated with their optimization. We looked at animation patterns. Implemented a couple of examples in Angular. And applied the dependency injection mechanism for reuse and customization.

Similar Posts

Leave a Reply

Your email address will not be published. Required fields are marked *