Weaving the Web

Schwerpunkt im Medieninformatik Master

Animationen in Web und App (Lottie)


Coach
Pit Kaldewey
Termin
Dienstag, 17. Juni 2025, 13:00 Uhr
Dauer
~120 Minuten
Raum
3.215

Ziel des Workshops

In diesem Workshop erhalten die Teilnehmenden ein fundiertes Verständnis für Animationen in Web- und App-Designs und deren Wirkung auf die User Experience. Sie lernen, wann und warum Animationen eingesetzt werden und welche technischen Ansätze sinnvoll sind. Der praktische Teil vermittelt die Grundlagen des Lottie-Formats, inklusive seiner Vorteile gegenüber klassischen Animationsformaten wie MOV, MP4 und GIF. Die Teilnehmenden erfahren, wie Lottie-Animationen in Figma und After Effects erstellt werden und wie sie interaktive Trigger-Aktionen wie OnClick, OnHover und OnScroll in einer Beispielanwendung implementieren. Zusätzlich gibt es spannende Case Studies, die zeigen, wie Animationen gezielt zur Verbesserung von Interaktivität und Gamification eingesetzt werden können. Abschließend bekommen die Teilnehmenden eine Einführung in Rive, eine moderne Animationslösung, die bereits in Anwendungen wie Duolingo erfolgreich genutzt wird.

  • Grundlagen von Animationen
  • Kennenlernen des Lottie-Formats
  • Einblick in die Erstellung von Lottie-Animationen
  • Implementieren verschiedener Interaktionstechnicken
  • Wo fängt Lottie an und wo hört es auf?
  • RIVE: Animationen mit States

Empfohlene Vorkenntnisse

  • Grundkenntnisse in NodeJS
  • Grundlegende Erfahrung mit HTML, CSS und JavaScript
  • Optional: Erfahrung in komponentenbasierten Frameworks (React)

Technische Voraussetzung

  • IDE
  • Node.js v18.20.8, v20.3.0 oder >= v22.0.0
  • Browser (halbwegs neue Version)
  • Git

Material