1 of 25

Elegance of movement with Reactive Angular animations

2 of 25

Hello!

Elena Gancheva

My #000

I only need coffee on days ending with “y”.

< my job />

Software Engineer Progress, Kendo UI for Angular.

Dog person

Dogs are my favourite people.

Ballerina

Why walk when you can… dance?

3 of 25

@Sofia, Bulgaria 2018

3

4 of 25

Today’s lineup

Why animate?

UX concepts in animations

Examples cookbook

Code demos

AnimationBuilder goodies

5 of 25

6 of 25

Why animate?

User Satisfaction and FUN

Problem Solving

Eye Pleasing

Improved UX and UI

Smooth State Transitions

7 of 25

​

Use UX concepts in animations

Want big impact?

8 of 25

UX concepts in animations

Animations enabling microinteractions

Interaction is quick and clear, often imitating real physical interaction such as pushing buttons.

9 of 25

UX concepts in animations

Animations showing progression

Demonstrating the stage of the process. Shows when and how the user will get results.

​

10 of 25

UX concepts in animations

Clarifying animations

Engage users to take further steps in complicated operations.

11 of 25

UX concepts in animations

Decorative animations

Those animations are fun and a good way of attracting users’ attention.

12 of 25

Examples cookbook

Angular Material

  • A set of Angular Components
  • Material design specifications
  • Best UX techniques
  • Fast to bootstrap applications

RxJS

  • Async data streams
  • Ongoing events
  • Observe on
  • React on

SVG

  • Scalable Vector Graphics
  • Scales on all display sizes
  • Built with Math
  • Small file sizes
  • Good browser support
  • Easy to animate

Angular Animations

  • Introduced in Angular 2
  • Standard Web Animations API
  • ng4.2 new wave of features
  • ng6 added CSS fallbacks automatically
  • State observations, translations and router animations

13 of 25

Angular animationBuilder module

  • Injectable Service
  • Produces animation sequence programmatically
  • Programmatic animations are first built
  • A player object is returned

play(), pause(), reset(), finish()

onStart(), onDone(), onDestroy()

totalTime, hasStarted(), beforeDestroy()

14 of 25

Decorative animations with microinteraction

Problem #1

“I want to see the immediate effects of my action.”

15 of 25

Query for inner elements and

control animation time gaps

  • query()
  • stagger()

​

​

code demo

​

​

16 of 25

Animations

showing progression

Problem #2

“I want to know that an action is in progress or how long it will take.”

​

17 of 25

Query for inner elements within

animation steps sequentially or in parallel

code demo

​

​

  • query()
  • sequence()
  • group()

​

​

18 of 25

Clarifying animations

Problem #3

“I don’t want my application’s screen to be a mess.”

​

​

19 of 25

Reusable sub-animations and

multiple elements within an animation

code demo

​

​

  • animation()
  • useAnimation()

​

​

20 of 25

AnimationBuilder goodies

  • Full and easy low-level control over states
  • Reusable animations between components
  • Smaller components’ code
  • Improved code readability

​

21 of 25

Great resources

​

22 of 25

The ballerina effect:

be careful, natural motion matters

Bonus Problem

“I want to feel that an interaction is natural.”

​

​

23 of 25

Thank you!

24 of 25

Elena Gancheva

Find me at:

​

@eagancheva

elena-gancheva

25 of 25

Waiting for your Questions