Slide 1
Slide 1 text
Level up your Angular App
Mit Animationen zur UX, die begeistert
Sascha Lehmann
@derLehmann_S
Consultant
Slide 2
Slide 2 text
Consultant @ Thinktecture AG
Sascha Lehmann
@derLehmann_S
https://www.linkedin.com/in/sascha-lehmann
[email protected]
https://www.thinktecture.com/thinktects/sascha-lehmann/
Level up your Angular App
Mit Animationen zur UX, die begeistert
Slide 3
Slide 3 text
Unsere Ziele für heute
Sinn & Zweck von
Animationen
verstehen
Technische
möglichkeiten im
Angular-Umfeld
kennen
Tech-Basics & Best-
Practices
Level up your Angular App
Mit Animationen zur UX, die begeistert
Slide 4
Slide 4 text
Unser heutige Spielwiese
https://github.com/thinktecture/angular-days-
2025-spring-animations
Level up your Angular App
Mit Animationen zur UX, die begeistert
Slide 5
Slide 5 text
Storytime
A realworld project story
Level up your Angular App
Mit Animationen zur UX, die begeistert
Slide 6
Slide 6 text
DEV Team Product Owner
Wie wär’s noch mit
ein paar
Animationen?
Level up your Angular App
Mit Animationen zur UX, die begeistert
Slide 7
Slide 7 text
DEV Team Product Owner
Wie wär’s noch mit
ein paar
Animationen?
Level up your Angular App
Mit Animationen zur UX, die begeistert
Slide 8
Slide 8 text
DEV Team
Level up your Angular App
Mit Animationen zur UX, die begeistert
Slide 9
Slide 9 text
ANIMATIONS
“Zu zeitaufwändig!”
“Verursachen nur
Performanceprobleme!”
“Sind einfach unnötig”
“Haben keinen wesentlichen
Mehrwert"
“Verursachen zu viel
Boilerplate-Code”
Level up your Angular App
Mit Animationen zur UX, die begeistert
Slide 10
Slide 10 text
Der evolutionäre Einfluss
Menschliches Gesichtsfeld
Level up your Angular App
Mit Animationen zur UX, die begeistert
Slide 11
Slide 11 text
Blindness of Change
Image from https://en.wikipedia.org/wiki/Change_blindness
Level up your Angular App
Mit Animationen zur UX, die begeistert
Slide 12
Slide 12 text
Blindness of Change
Image from https://en.wikipedia.org/wiki/Change_blindness
Level up your Angular App
Mit Animationen zur UX, die begeistert
Slide 13
Slide 13 text
Blindness of Change
Level up your Angular App
Mit Animationen zur UX, die begeistert
Slide 14
Slide 14 text
Lenken den Fokus
Helfen ein Mentales
Modell aufzubauen
Kommunizieren State
Change
Verhindern
Desorientierung
Sorgen für
”Vergnügen”
Aufgaben von Animationen in der UX
Level up your Angular App
Mit Animationen zur UX, die begeistert
Slide 15
Slide 15 text
Arron Walter’s Hierachy of User Needs
Erwartungen an Applikationen
Pleasurable
Usable
Reliable
Functional
• UI / UX Experte
• Autor
“Design for Emotion”
• Speaker
• Consultant
Mehr Infos: https://www.aarronwalter.com/
Level up your Angular App
Mit Animationen zur UX, die begeistert
Slide 16
Slide 16 text
“Delight” macht den Unterschied
Erwartungen an Applikationen
Level up your Angular App
Mit Animationen zur UX, die begeistert
Slide 17
Slide 17 text
Easing
Follow Through and
Overlapping Action
Squash and Stretch
Anticipation Staging
Straight ahead action
and pose to pose
Arcs
Secondary Action Timing
Exaggeration
Solid drawing
Appeal
12 Prinzipien der Animation
Level up your Angular App
Mit Animationen zur UX, die begeistert
Slide 18
Slide 18 text
Easing
Follow Through and
Overlapping Action
Squash and Stretch
Anticipation Staging
Straight ahead action
and pose to pose
Arcs
Secondary Action Timing
Exaggeration
Solid drawing
Appeal
12 Prinzipien der Animation
2 2
3
Level up your Angular App
Mit Animationen zur UX, die begeistert
Slide 19
Slide 19 text
Prinzip 1: Easing
https://m3.material.io/styles/motion/easing-and-duration/applying-easing-and-duration
Level up your Angular App
Mit Animationen zur UX, die begeistert
Slide 20
Slide 20 text
Prinzip 3: Squash and Stretch
https://dribbble.com/shots/4815107-Follow-Accordion-Prototype
Level up your Angular App
Mit Animationen zur UX, die begeistert
Slide 21
Slide 21 text
Prinzip 4: Anticipation
https://dribbble.com/shots/20328824-Features-Cards-Section-UI-Exploration
Level up your Angular App
Mit Animationen zur UX, die begeistert
Slide 22
Slide 22 text
Prinzip 5: Staging
https://m3.material.io/styles/motion/transitions/transition-patterns
Level up your Angular App
Mit Animationen zur UX, die begeistert
Slide 23
Slide 23 text
Prinzip 8: Secondary Action
https://dribbble.com/shots/14656980-Liquid-UI-Elements
Level up your Angular App
Mit Animationen zur UX, die begeistert
Slide 24
Slide 24 text
Prinzip 9: Timing
Level up your Angular App
Mit Animationen zur UX, die begeistert
Slide 25
Slide 25 text
CSS
Web
Animations API
Frameworks
Die Möglichkeiten
Animieren im Web
• Sehr mächtig
• Abstraktionsebene (DSL)
• Ggf. ”Schwergewichtig”
• Flexibler
• Mehr Kontrolle
• Komplexere Orchestrierung
• Basic
• Einfach anzuwenden
• Leichtgewichtig
Level up your Angular App
Mit Animationen zur UX, die begeistert
Slide 26
Slide 26 text
Transitions / Animations
CSS
Level up your Angular App
Mit Animationen zur UX, die begeistert
Slide 27
Slide 27 text
Direktzugriff auf den Browser
• Grundlage von CSS Transitions und Animations
• API ermöglicht es Animationen in JavaScript zu
schreiben
• Verwendet Browserspezifische
Animationsimplementierung
→ Browser optimiert selbst
• Dynamisches setzen von Werten möglich
Web Animations API
Level up your Angular App
Mit Animationen zur UX, die begeistert
Slide 28
Slide 28 text
Welches soll ich verwenden?!
Frameworks
Greensock
Level up your Angular App
Mit Animationen zur UX, die begeistert
Slide 29
Slide 29 text
Beispielanwendung animieren
HANDS-ON
Slide 30
Slide 30 text
Style Layout Paint Composite
Browser Rendering Pipeline
• Alles was mit CSS und Animationen zu tun hat läuft in einem separaten
Compositor Thread
• Blockt NICHT den Hauptthread …
• … allerdings sind Layout und Paint, Aufgabe des Main Thread
• Parsing
• Cascade
• …
• Platz
Berechnung
• Beinflussung
• …
• Colors
• Images
• Borders
• …
• opacity
• transform
• …
Level up your Angular App
Mit Animationen zur UX, die begeistert
Slide 31
Slide 31 text
Welche eher vermeiden?
• Die beste Performance wird mit Properties erzielt
die nur den Composition Step beinflussen
• transform
• translate
• scale
• skew
• rotate
• opacity
• Im Optimalfall vermeiden was Layout und Paint
Steps betriff
• width
• height
• position
• color
• shadows
• background-image
Welche Properties sollte ich animieren?
Level up your Angular App
Mit Animationen zur UX, die begeistert
Slide 32
Slide 32 text
Atomare Bestandteile von Animationen
Transitions
Easings
Durations
Lassen sich sehr gut in Form von
Tokens abbilden
Ideal mit Mixins oder Factory
Funktionen abbildbar
Level up your Angular App
Mit Animationen zur UX, die begeistert
Slide 33
Slide 33 text
Pause
Slide 34
Slide 34 text
Voraussetzungen
• Import der provideAnimationsAsync factory
function
• Werden Animationen direkt beim Start benötigt
(eager) provideAnimations verwenden
• Basiert auf Web Animations API (Fallback auf CSS
Keyframes)
• CSS-like Performance + Flexibilität von JavaScript
Angular Animations
Level up your Angular App
Mit Animationen zur UX, die begeistert
Slide 35
Slide 35 text
Anwendung
Template Component
Angular Animations
Level up your Angular App
Mit Animationen zur UX, die begeistert
Slide 36
Slide 36 text
Domain Specific Language (DSL)
• trigger()
• state()
• transition()
• style()
• animate()
Angular Animations
Level up your Angular App
Mit Animationen zur UX, die begeistert
Slide 37
Slide 37 text
Vordefinierte States
• * (Wildcard)
• void – (Für Elemente die dem DOM hinzugefügt werden oder verlassen)
• * => * - (“Any-State“ Selektor)
Aliasse
• void => * → :enter
• * => void → :leave
• :increment
• :decrement
Angular Animations
Level up your Angular App
Mit Animationen zur UX, die begeistert
Slide 38
Slide 38 text
Orchestrierung
• query()
Zum auswählen bestimmter Kindelemente
• group()
Mehrere Animationen parallel ausführen
• sequence()
Mehrere Animationen nacheinander ausführen
• stagger()
Kaskadierende Verzögerung auf Elemente anwenden
Angular Animations
Level up your Angular App
Mit Animationen zur UX, die begeistert
Slide 39
Slide 39 text
Route-Animations
Angular Animations
• Brauchen Wrapper um
• Braucht den aktuellen State des Outlets, damit
wir wissen wann wir die Animation starten
müssen
• Während der Animation haben wir zugriff auf die
alte Seite (:leave) und die neue Seite (:enter)
Level up your Angular App
Mit Animationen zur UX, die begeistert
Slide 40
Slide 40 text
Route-Animations
Angular Animations
• Während der Animation haben wir zugriff auf die
alte Seite (:leave) und die neue Seite (:enter)
• Deshalb müssen wir um diese besser Stylen zu
können zunächst einen kleinen “reset” machen
Level up your Angular App
Mit Animationen zur UX, die begeistert
Slide 41
Slide 41 text
Route-Animations
Angular Animations
• Möchten wir für bestimmte Routen, bestimmte
Animationen abspielen, so müssen wir diese
identifizierbar machen
Level up your Angular App
Mit Animationen zur UX, die begeistert
Slide 42
Slide 42 text
Route-Animations
Angular Animations
• Anschließend müssen wir unserer Animation
diese State Bezeichnungen übergeben
• Dazu müssen wir die PreparaRoute Funktion noch
einmal etwas anpassen
Level up your Angular App
Mit Animationen zur UX, die begeistert
Slide 43
Slide 43 text
Beispielanwendung animieren
HANDS-ON
Slide 44
Slide 44 text
View-Transition-API
111+ 18 X
Level up your Angular App
Mit Animationen zur UX, die begeistert
Slide 45
Slide 45 text
Trigger
Ablauf einer View-Transition
Level up your Angular App
Mit Animationen zur UX, die begeistert
Slide 46
Slide 46 text
Was im Hintergrund passiert
Ablauf einer View-Transition
User
Perspective
Browser
Perspective Screenshot
(old)
Perform DOM
changes
Live-View
(new)
Crossfade
Old -> New
startViewTransition(…)
Level up your Angular App
Mit Animationen zur UX, die begeistert
Slide 47
Slide 47 text
Pseudo DOM Tree
• Neuer Top-Layer
• Standardanimation: Cross-fade
• Elemente existieren nur so lange bis die
View-Transition abgeschlossen ist
Ablauf einer View-Transition
Level up your Angular App
Mit Animationen zur UX, die begeistert
Slide 48
Slide 48 text
Pseudo Elemente
::view-transition
Overlay-Root-Element, das über allen anderen DOM-
Elementen sitzt, um genenseitige
Beeinträchtigungen auszuschließen
::view-transition-group
Root-Element der View-Transition
::view-transition-image-pair
Container des Vorher- und Nachher-Screenshots
::view-transition-old/-new
Elemente die den vorherigen (old) oder folgenden
(new) DOM Zusatand in Form eines Screenshots
darstellen
Ablauf einer View-Transition
Jedes Pseudo-Element ist separat per CSS stylebar
Level up your Angular App
Mit Animationen zur UX, die begeistert
Slide 49
Slide 49 text
Die Scrennshots sind ”nur” Bilder – Keine DOM Elemente
Aber ACHTUNG!
Hat keinen Effekt!
Level up your Angular App
Mit Animationen zur UX, die begeistert
Slide 50
Slide 50 text
Beispielanwendung animieren
Slide 51
Slide 51 text
Browser Stylesheet
Woher kommt die Magie?
Level up your Angular App
Mit Animationen zur UX, die begeistert
Slide 52
Slide 52 text
Was im Hintergrund passiert
Zusätzliche Teile “ausschneiden”
User
Perspective
Browser
Perspective Screenshot
(old)
Perform DOM
changes
Live-View
(new)
Crossfade
Old -> New
startViewTransition(…)
Level up your Angular App
Mit Animationen zur UX, die begeistert
Slide 53
Slide 53 text
Was im Hintergrund passiert
Zusätzliche Teile “ausschneiden”
User
Perspective
Browser
Perspective Perform DOM
changes
Live-View
(new)
Crossfade Root -
animiere Header separat
startViewTransition(…)
Screenshot-Header
(old)
Level up your Angular App
Mit Animationen zur UX, die begeistert
Slide 54
Slide 54 text
DOM-Elemente
Zusätzliche Teile “ausschneiden”
Level up your Angular App
Mit Animationen zur UX, die begeistert
Slide 55
Slide 55 text
Angular Integration
Voraussetzungen
• Zusatzkonfiguration im Router
• View-Transitions beim Routing mit
withViewTransitions() function aktivieren.
View-Transition-API
Level up your Angular App
Mit Animationen zur UX, die begeistert
Slide 56
Slide 56 text
Beispielanwendung animieren
HANDS-ON
Slide 57
Slide 57 text
Scroll-Driven-Animations
115+ X X
Level up your Angular App
Mit Animationen zur UX, die begeistert
Slide 58
Slide 58 text
Default – Document Timeline
Animation-Timelines
• Die default Document-Timeline
• Zeit schreitet, ab dem Zeitpunkt ab dem das
Dokument initial geladen wurde, kontinuierlich
voran
Level up your Angular App
Mit Animationen zur UX, die begeistert
Slide 59
Slide 59 text
Scroll Progress Timeline
• Scroller: Element, dessen Scroll-Progress
herangezogen wird
• nearest (default)
• root
• self
• Axis: Scroll-Achse die verwendet werden soll
• block (default)
• inline
• X
• Y
Animation-Timelines
• Die Zeit schreitet durch das Scolling eines
scollable Elements (scroller) voran
• Die Scrollposition wird in Prozentwerte von 0 –
100 % umgewandelt
Level up your Angular App
Mit Animationen zur UX, die begeistert
Slide 60
Slide 60 text
View Progress Timeline
• Axis: Scroll-Achse die verwendet werden soll
• block (default)
• inline
• X
• Y
• Inset: Zur festlegung von insets bzw. outsets, die
bestimmen wann sich das Element im Viewport
befindet
• start (top-offset)
• end (bottom-offset)
Animation-Timelines
• Die Zeit schreitet durch die Sichtbarkeit eines
Elements (subject) voran
• Die Sichtbarkeit des Elements im Viewport wird in
Prozentwerte von 0 – 100 % umgewandelt
• Wird immer in Abhänigkeit zum nächstbesten
scrollbaren Element getracked
Level up your Angular App
Mit Animationen zur UX, die begeistert
Slide 61
Slide 61 text
View Progress Timeline
• Alternative Schreibweise zu view( start end)
• Zusätzliche Key-Words für animation-range
• entry: Entspricht 0%
• exit: Entspricht 100%
• Zusätzliche Key-Words für animation-range-start und
animation-range-end
• cover: Sobald nur ein Teil des Elements im
Viewport sichtbar ist
• contain: Das gesamte Element muss im
Viewport sichtbar sein
• Eignen sich bspw. sehr gut für Fälle mit Bildern
unterschiedlicher höhen
Animation-Timelines
Level up your Angular App
Mit Animationen zur UX, die begeistert
Slide 62
Slide 62 text
Sascha Lehmann
[email protected]
Dankeschön!
Und Bewertung nicht vergessen ;-)