Web Animations: So verleihen Sie Ihrer Web-App den letzten Schliff

Animationen werden in Projekten gerne als “nice to have”, unnötig oder Zeitfresser abgetan – jedoch zu Unrecht. In dieser Session räumt Sascha Lehmann von Thinktecture mit gängigen Vorurteilen auf. Lernen Sie in dieser Session, wie Animationen grundsätzlich funktionieren und warum sie für eine gute User Experience unabdingbar sind: Mithilfe von CSS-Animationen verleihen Sie Ihrer Applikation den letzten Schliff! Erhalten Sie wichtige Tipps aus der Praxis, etwa wann es sinnvoll ist, Animation-Libraries wie “gsap” oder “lottie” einzusetzen und was beim Aufbau der Anwendung beachtet werden muss, um Animations-Frust zu vermeiden.

Transcript

1. Web Animations So verleihen Sie Ihrer Web-App den letzten Schliff Sascha Lehmann @derLehmann_S Consultant
2. Consultant @ Thinktecture AG Sascha Lehmann @derLehmann_S sascha.lehmann@thinktecture.com https://www.thinktecture.com/thinktects/sascha-lehmann/ Spezialisierung: Angular, WebComponents und UI/UX  ✉  Web Animations So verleihen Sie Ihrer Web-App den letzten Schliff
3. ANIMATIONS “Zu zeitaufwändig!” “Verursachen nur Performanceprobleme!” “Sind einfach unnötig” “Haben keinen wesentlichen Mehrwert" “Verursachen zu viel Boilerplate-Code” Web Animations So verleihen Sie Ihrer Web-App den letzten Schliff
4. Grundlagen Tech-Stacks Kleines Praxisbeispiel Tipps & Debugging Resume Agenda Web Animations So verleihen Sie Ihrer Web-App den letzten Schliff
5. Der evolutionäre Einfluss Menschliches Gesichtsfeld Web Animations So verleihen Sie Ihrer Web-App den letzten Schliff
6. Blindness of Change Image from https://en.wikipedia.org/wiki/Change_blindness Web Animations So verleihen Sie Ihrer Web-App den letzten Schliff
7. Blindness of Change Image from https://en.wikipedia.org/wiki/Change_blindness Web Animations So verleihen Sie Ihrer Web-App den letzten Schliff
8. Blindness of Change Web Animations So verleihen Sie Ihrer Web-App den letzten Schliff
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 So verleihen Sie Ihrer Web-App den letzten Schliff
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 So verleihen Sie Ihrer Web-App den letzten Schliff
11. “Delight” macht den Unterschied Erwartungen an Applikationen Web Animations So verleihen Sie Ihrer Web-App den letzten Schliff
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 So verleihen Sie Ihrer Web-App den letzten Schliff
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 So verleihen Sie Ihrer Web-App den letzten Schliff
14. Prinzip 1: Easing https://m3.material.io/styles/motion/easing-and-duration/applying-easing-and-duration Web Animations So verleihen Sie Ihrer Web-App den letzten Schliff
15. Prinzip 3: Squash and Stretch https://dribbble.com/shots/4815107-Follow-Accordion-Prototype Web Animations So verleihen Sie Ihrer Web-App den letzten Schliff
16. Prinzip 4: Anticipation https://dribbble.com/shots/20328824-Features-Cards-Section-UI-Exploration Web Animations So verleihen Sie Ihrer Web-App den letzten Schliff
17. Prinzip 5: Staging https://m3.material.io/styles/motion/transitions/transition-patterns Web Animations So verleihen Sie Ihrer Web-App den letzten Schliff
18. Prinzip 8: Secondary Action https://dribbble.com/shots/14656980-Liquid-UI-Elements Web Animations So verleihen Sie Ihrer Web-App den letzten Schliff
19. Prinzip 9: Timing https://dribbble.com/shots/14656980-Liquid-UI-Elements Web Animations So verleihen Sie Ihrer Web-App den letzten Schliff
20. Grundlagen Tech-Stacks Kleines Praxisbeispiel Tipps & Debugging Resume Agenda Web Animations So verleihen Sie Ihrer Web-App den letzten Schliff
21. 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 So verleihen Sie Ihrer Web-App den letzten Schliff
22. Transitions / Animations CSS Web Animations So verleihen Sie Ihrer Web-App den letzten Schliff
23. 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 So verleihen Sie Ihrer Web-App den letzten Schliff
24. Welches soll ich verwenden?! Frameworks Greensock Web Animations So verleihen Sie Ihrer Web-App den letzten Schliff
25. Grundlagen Tech-Stacks Kleines Praxisbeispiel Tipps & Debugging Resume Agenda Web Animations So verleihen Sie Ihrer Web-App den letzten Schliff
26. Beispielanwendung animieren <DEMO />
27. 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 Reusing Animations Web Animations So verleihen Sie Ihrer Web-App den letzten Schliff
28. Grundlagen Tech- Stacks Angular Animations Tipps & Debugging Resume Agenda Web Animations So verleihen Sie Ihrer Web-App den letzten Schliff
29. 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 • … Web Animations So verleihen Sie Ihrer Web-App den letzten Schliff
30. 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 So verleihen Sie Ihrer Web-App den letzten Schliff
31. Ein Blick … … in die Zukunft Web Animations So verleihen Sie Ihrer Web-App den letzten Schliff
32. Und wie geht sowas? Web Animations So verleihen Sie Ihrer Web-App den letzten Schliff
33. Wie funktiontioniert’s? • Screenshot des aktuellen Page-States • Callbackfunktion ausführen (Rendering wird pausiert) • Nach DOM-changes neuer Screenshot des neuen Page-States • Pseudo-DOM-Tree wird erstellt Building Blocks Web Animations So verleihen Sie Ihrer Web-App den letzten Schliff
34. Pseudo DOM Tree • Neuer Top-Layer • Standardanimation: Cross-fade • Wird nach Animation wieder zerstört Building Blocks Web Animations So verleihen Sie Ihrer Web-App den letzten Schliff
35. Mehrere Elemente Building Blocks Web Animations So verleihen Sie Ihrer Web-App den letzten Schliff
36. Beispielanwendung animieren <DEMO />
37. Grundlagen Tech- Stacks Angular Animations Tipps & Debugging Resume Agenda Web Animations So verleihen Sie Ihrer Web-App den letzten Schliff
38. • Animationen NICHT zum Schluss bedenken, sondern von Anfangan mit einbeziehen • Animationen Sind wichtig um Applikationen lebensechter zu gestalten • Animationen mit Sinn und Verstand einseten • Pinzipien beachten • Konsistenz • Mit Erfahrungs 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 So verleihen Sie Ihrer Web-App den letzten Schliff
39. Sascha Lehmann sascha.lehmann@thinktecture.com Dankeschön! @derLehmann_S sascha.lehmann@thinktecture.com https://www.thinktecture.com/thinktects/sascha-lehmann/  ✉ 