Level up your Angular App: Mit Animationen zur UX, die begeistert (Hands-on)

Animationen sind das Geheimnis hinter einer User Experience, die im Gedächtnis bleibt – aber hier gilt nicht ‚viel hilft viel‘! In diesem Hands-on-Workshop zeigt Sascha Lehmann von Thinktecture das ‚kleine Einmaleins der Animationen‘ und wie Sie Ihre Angular-App mit durchdachtem Einsatz aufs nächste Level bringen. Lernen Sie, CSS-, Angular-Animationen und die brandaktuelle View-Transition-API geschickt einzusetzen und wiederverwendbar zu strukturieren. Verleihen Sie Ihrer Angular-App dadurch den perfekten Schliff!

Transcript

1. Level up your Angular App Mit Animationen zur UX, die begeistert Sascha Lehmann @derLehmann_S Consultant
2. Consultant @ Thinktecture AG Sascha Lehmann @derLehmann_S https://www.linkedin.com/in/sascha-lehmann sascha.lehmann@thinktecture.com https://www.thinktecture.com/thinktects/sascha-lehmann/ Level up your Angular App Mit Animationen zur UX, die begeistert
3. 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
4. Unser heutige Spielwiese https://github.com/thinktecture/angular-days- 2025-spring-animations Level up your Angular App Mit Animationen zur UX, die begeistert
5. Storytime A realworld project story Level up your Angular App Mit Animationen zur UX, die begeistert
6. DEV Team Product Owner Wie wär’s noch mit ein paar Animationen? Level up your Angular App Mit Animationen zur UX, die begeistert
7. DEV Team Product Owner Wie wär’s noch mit ein paar Animationen? Level up your Angular App Mit Animationen zur UX, die begeistert
8. DEV Team Level up your Angular App Mit Animationen zur UX, die begeistert
9. 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
10. Der evolutionäre Einfluss Menschliches Gesichtsfeld Level up your Angular App Mit Animationen zur UX, die begeistert
11. Blindness of Change Image from https://en.wikipedia.org/wiki/Change_blindness Level up your Angular App Mit Animationen zur UX, die begeistert
12. Blindness of Change Image from https://en.wikipedia.org/wiki/Change_blindness Level up your Angular App Mit Animationen zur UX, die begeistert
13. Blindness of Change Level up your Angular App Mit Animationen zur UX, die begeistert
14. 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
15. 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
16. “Delight” macht den Unterschied Erwartungen an Applikationen Level up your Angular App Mit Animationen zur UX, die begeistert
17. 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
18. 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
19. 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
20. Prinzip 3: Squash and Stretch https://dribbble.com/shots/4815107-Follow-Accordion-Prototype Level up your Angular App Mit Animationen zur UX, die begeistert
21. Prinzip 4: Anticipation https://dribbble.com/shots/20328824-Features-Cards-Section-UI-Exploration Level up your Angular App Mit Animationen zur UX, die begeistert
22. Prinzip 5: Staging https://m3.material.io/styles/motion/transitions/transition-patterns Level up your Angular App Mit Animationen zur UX, die begeistert
23. Prinzip 8: Secondary Action https://dribbble.com/shots/14656980-Liquid-UI-Elements Level up your Angular App Mit Animationen zur UX, die begeistert
24. Prinzip 9: Timing Level up your Angular App Mit Animationen zur UX, die begeistert
25. 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
26. Transitions / Animations CSS Level up your Angular App Mit Animationen zur UX, die begeistert
27. 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
28. Welches soll ich verwenden?! Frameworks Greensock Level up your Angular App Mit Animationen zur UX, die begeistert
29. Beispielanwendung animieren HANDS-ON
30. 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
31. 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
32. 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
33. Pause
34. 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
35. Anwendung Template Component Angular Animations Level up your Angular App Mit Animationen zur UX, die begeistert
36. Domain Specific Language (DSL) • trigger() • state() • transition() • style() • animate() Angular Animations Level up your Angular App Mit Animationen zur UX, die begeistert
37. 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
38. 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
39. Route-Animations Angular Animations • Brauchen Wrapper um <router-outlet> • 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
40. 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
41. 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
42. 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
43. Beispielanwendung animieren HANDS-ON
44. View-Transition-API 111+ 18 X Level up your Angular App Mit Animationen zur UX, die begeistert
45. Trigger Ablauf einer View-Transition Level up your Angular App Mit Animationen zur UX, die begeistert
46. 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
47. 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
48. 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
49. Die Scrennshots sind ”nur” Bilder – Keine DOM Elemente Aber ACHTUNG! Hat keinen Effekt! Level up your Angular App Mit Animationen zur UX, die begeistert
50. Beispielanwendung animieren <Demo/>
51. Browser Stylesheet Woher kommt die Magie? Level up your Angular App Mit Animationen zur UX, die begeistert
52. 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
53. 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
54. DOM-Elemente Zusätzliche Teile “ausschneiden” Level up your Angular App Mit Animationen zur UX, die begeistert
55. 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
56. Beispielanwendung animieren HANDS-ON
57. Scroll-Driven-Animations 115+ X X Level up your Angular App Mit Animationen zur UX, die begeistert
58. 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
59. 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
60. 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
61. 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
62. Sascha Lehmann sascha.lehmann@thinktecture.com Dankeschön! Und Bewertung nicht vergessen ;-)