Web Animations: Welcome to the jungle

Wenn es darum geht, Webinhalte zu animieren, kann man sich bei der schieren Auswahl an Möglichkeiten schnell wie im Dschungel vorkommen. Deshalb und aus Sorge um zu hohe Aufwände werden sie jedoch zu Unrecht in Projekten oft nur stiefmütterlich behandelt.
In dieser Session wollen wir mit diesen Vorurteilen aufräumen und Licht ins Animation-Dickicht bringen. Gemeinsam schauen wir uns an, welchen Zweck Animations erfüllen, warum sie für eine gute User Experience unabdingbar sind und wie man für seinen Anwendungsfall die richtige Tech auswählt.

Transcript

1. Web Animations Welcome to the jungle Sascha Lehmann @derLehmann_S Developer Consultant
2. Developer Consultant @ Thinktecture AG Sascha Lehmann @derLehmann_S sascha.lehmann@thinktecture.com https://www.thinktecture.com/thinktects/sascha-lehmann/ Spezialisierung: Angular und UI/UX  ✉  Web Animations Welcome to the jungle
3. ANIMATIONS “Zu zeitaufwändig!” “Verursachen nur Performanceprobleme!” “Sind einfach unnötig” “Haben keinen wesentlichen Mehrwert" “Verursachen zu viel Boilerplate-Code” Web Animations Welcome to the jungle
4. Grundlagen Tech-Stacks Kleines Praxisbeispiel Tipps & Debugging Resume Agenda Web Animations Welcome to the jungle
5. Der evolutionäre Einfluss Menschliches Gesichtsfeld Web Animations Welcome to the jungle
6. Blindness of Change Image from https://en.wikipedia.org/wiki/Change_blindness Web Animations Welcome to the jungle
7. Blindness of Change Image from https://en.wikipedia.org/wiki/Change_blindness Web Animations Welcome to the jungle
8. Blindness of Change Web Animations Welcome to the jungle
9. Lenken den Fokus Helfen ein Mentales Modell aufzubauen Kommunizieren State Change Verhindern Desorientierung Sorgen für ”Vergnügen” Aufgaben von Animationen in der UX   ↻   Web Animations Welcome to the jungle
10. 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/ Web Animations Welcome to the jungle
11. “Delight” macht den Unterschied Erwartungen an Applikationen Web Animations Welcome to the jungle
12. 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 Web Animations Welcome to the jungle
13. 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 Web Animations Welcome to the jungle
14. Prinzip 1: Easing https://m3.material.io/styles/motion/easing-and-duration/applying-easing-and-duration Web Animations Welcome to the jungle
15. Prinzip 2: Follow Through and Overlapping Action https://dribbble.com/shots/5414524-Ocean-scrolling-animation Web Animations Welcome to the jungle
16. Prinzip 3: Squash and Stretch https://dribbble.com/shots/4815107-Follow-Accordion-Prototype Web Animations Welcome to the jungle
17. Prinzip 4: Anticipation https://dribbble.com/shots/20328824-Features-Cards-Section-UI-Exploration Web Animations Welcome to the jungle
18. Prinzip 5: Staging https://m3.material.io/styles/motion/transitions/transition-patterns Web Animations Welcome to the jungle
19. Prinzip 6: Straight ahead action and pose to pose https://learn.toonboom.com/modules/animation-principles/topic/straight-ahead-and-pose-to-pose-principle Web Animations Welcome to the jungle
20. Prinzip 7: Arcs https://m3.material.io/styles/motion/transitions/applying-transitions Web Animations Welcome to the jungle
21. Prinzip 8: Secondary Action https://dribbble.com/shots/14656980-Liquid-UI-Elements Web Animations Welcome to the jungle
22. Prinzip 9: Timing https://dribbble.com/shots/14656980-Liquid-UI-Elements Web Animations Welcome to the jungle
23. Prinzip 10: Exaggeration https://dribbble.com/shots/11206468--Button Web Animations Welcome to the jungle
24. Prinzip 11 + 12: Solid drawing & appeal • Einheitliches & ansprechendes Design • Designgrundlagen • Durchgängiges Konzept • Design System Web Animations Welcome to the jungle
25. Grundlagen Tech-Stacks Kleines Praxisbeispiel Tipps & Debugging Resume Agenda Web Animations Welcome to the jungle
26. 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 Web Animations Welcome to the jungle
27. Transitions / Animations CSS Web Animations Welcome to the jungle
28. 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 Web Animations Welcome to the jungle
29. Welches soll ich verwenden?! Frameworks Greensock Web Animations Welcome to the jungle
30. Welches soll ich verwenden?! Frameworks Web Animations Welcome to the jungle
31. Grundlagen Tech-Stacks Kleines Praxisbeispiel Tipps & Debugging Resume Agenda Web Animations Welcome to the jungle
32. Beispielanwendung animieren DEMO Web Animations Welcome to the jungle
33. My Best Practices • CSS Transitions / Animations mit Klassen anwenden • Ganze Trigger oder Animationsbestandteile in File(s) auslagern • AnimationReferenzeMetadata • Factory-Functions verwenden • Direktiven mit Animation-Player erstellen • Framework-Funktionen wiederverwendbar kapseln Reusing Animations Web Animations Welcome to the jungle
34. Grundlagen Tech-Stacks Kleines Praxisbeispiel Tipps & Debugging Resume Agenda Web Animations Welcome to the jungle
35. Style Layout Paint Composite Browser Rendering Pipeline • Alles was mit CSS Transitions und Animations 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 • … Web Animations Welcome to the jungle
36. 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? Web Animations Welcome to the jungle
37. Browser-Tools nutzen Animationen Debuggen DEMO Web Animations Welcome to the jungle
38. Grundlagen Tech-Stacks Kleines Praxisbeispiel Tipps & Debugging Resume Agenda Web Animations Welcome to the jungle
39. • Animationen NICHT zum Schluss bedenken, sondern von Anfangan mit einbeziehen • Animationen sind wichtig um Applikationen lebensechter zu gestalten • Animationen mit Sinn und Verstand einsetzen • Pinzipien beachten • Konsistenz • Mit Erfahrung steigern • So einfach wie möglich, so komplex wie nötig • Möglichst vermeiden Properties zu animieren, die LAYOUT und PAINT Zyklus des Browsers betreffen Resume Web Animations Welcome to the jungle
40. Sascha Lehmann sascha.lehmann@thinktecture.com Dankeschön!