Idee
Immer wieder wenn ich Blogeinträge und Artikel gelesen habe, in denen es um Animation/Motion Design ging, kamen dieses Buch und die zwölf Animationsprinzipien zur Sprache. So richtig dem gewidmet habe ich mich aber nie. Als wir dann die Einführung in Digezz bekamen, fiel mir gleich dies als mögliches Thema ein um mich vertieft damit zu befassen.
Konzept
Den Wikipediaartikel zu den Animationsprinzipien hatte ich glücklicherweise noch als Lesezeichen gespeichert. Ich konnte also gleich loslegen, den Inhalt zu studieren. Der Text war ziemlich selbsterklärend und es entstanden schnell schon die ersten Skizzen. Die Schwierigkeit war, alle Prinzipien auf das grundlegende herunterzubrechen und mit kleinen zweidimensionalen Animationen zu vermitteln.
Die nächste Frage war die Wahl des Mediums: Es hätte auch alles z.B. in Adobe AfterEffects umgesetzt werden können aber für mich gab es mehrere Vorteile die für die Realisation mit HTML/CSS/JS sprachen:
- Es stellte eine grössere Herausforderung dar als solch „simple“ Animationen mit AE umzusetzen
- Die Möglichkeiten von Webtechnologien aufzeigen
- Interaktivität: Reaktion auf Events (Play/Pause, Texte ein/ausblenden)
- Dynamik: Optimierung von Desktop bis Smartphone
Nicht zuletzt muss man einer Webumsetzung aber auch einen Vorteil bei der Ladezeit einräumen, der nicht unterschätzt werden darf.
Erkenntnisse
Das ganze Projekt umzusetzen hat Spass gemacht auch wenn es doch zeitlich und nervlich intensiv war. Es bot mir die Möglichkeit, mich vertieft mit CSS Animationen zu befassen und Stärken und Schwächen zu testen. Ausserdem war es gleich eine gute Übung auf jQuery und andere Drittbibliotheken zu verzichten (Ausnahme: Fastclick.js) und mit purem Javascript zu coden. Nicht immer ganz einfach aber dennoch hat es funktioniert. Da die Animationen selbst mit CSS umgesetzt sind, machte ich das Abspielen auch bei deaktiviertem Javascript ebenfalls möglich.
Von allen gröberen Schwierigkeiten blieb ich dann aber doch nicht verschont: Bei Mozilla FireFox haben zwei Animationen leichte Darstellungsbugs die nicht ohne völliges Umschreiben behoben werden können. Ausserdem war ich sehr überrascht, als ich feststellte, dass der Internet Explorer 11 den HTML5 Tag <main> immer noch nicht offiziell unterstützt!
Übers ganze gesehen war es aber auf allen Ebenen ein lehrreiches Projekt.