Wie man physische Animationen eigenständig programmiert

Wenn ich so durch's Web surfe, fällt mir auf, wieviel Wert auf animierte Elemente gelegt wird. Eine Animation ist definitiv immer ein Blickfang – in der Umsetzung aber recht komplex. Meine Erfahrungen dazu am Beispiel einer Website-Animation.

Ein Video, das als Header fungiert oder eine Animation, die durch Scrollen ausgelöst wird – bei gut ausgearbeiteten Animationen wird der Besucher neugierig und bleibt hängen. Genau diesen Effekt wollten wir auch für unsere MASSIVE ART-Website. Und da kam ich ins Spiel.

Die neue MASSIVE ART-Website sollte eines nicht sein: Statisch. Unser Ziel war es, die Besucher mit einer Animation abzuholen und ihnen anhand dieser, unser Tun zu erklären.

Bevor ich mit der Programmierung beginnen konnte, habe ich mich mit unseren Designern Philipp Gabl und Tim Armbruster zusammengesetzt. Sie hatten im Vorfeld bereits ein Video erstellt, an dem ich mich orientieren konnte. Die Vorlage half mir sehr. Denn für mich wurde so deutlich, wie die Animation ablaufen sollte. Und ich konnte das Material in verschiedene Sequenzen unterteilen. 

Der erste Teil der Animation stach von Beginn an hervor. Die herunterfallenden Bälle mussten physisch agieren (siehe Animation). Da ich zuvor noch nie eine JavaScript Physics Engine verwendet habe, nahm ich einen längeren Research vor und habe mich für Matter-JS entschieden. Überzeut hat mich bei Matter-JS im Wesentlichen, dass der Code Open-Source ist und das Projekt aktuell auf GitHub weiterentwickelt wird. Dadurch ist die Dokumentation umfangreich und die Community ziemlich aktiv. 

Für uns gab es zwei wichtige Gründe, warum wir uns für die eigenständig programmierte Animation und gegen die Produktion eines Videos entschieden haben: 

1. Für die Animation – bestehend aus JavaScript, Canvas und SVG – ist kaum externer Code notwendig. Im Vergleich zu einem Video erspart man sich bestimmt mehrere MB.

2. Animationen können auf mobilen Geräten automatisch abgespielt werden, wenn der User in den sichtbaren Bereich scrollt. Bei Videos sieht das ganz anders aus – Autoplay wird meist gar nicht unterstützt. Falls doch, wird das Video im Fullscreen-Modus geöffnet.


Die Intro-Animation auf der MASSIVE ART-Website arbeitet von Anfang bis Ende meist mit den selben Elementen. Daher war es für mich extrem schwierig, den Code so zu strukturieren, dass er verständlich bleibt. Ich habe diesen deshalb während der Umsetzung mehrfach umstrukturiert und verbessert.

Eine weitere Herausforderung war die Performance: Leider kann nicht jedes Gerät – vor allem Smartphones und Tablets – gleich gut mit einer solchen Animation umgehen. Deswegen habe ich auch immer wieder versucht, die Performance stabil zu halten und habe dies bestmöglich erreicht. 

Für mich war die Umsetzung der Animation eine spannende Zeit. Ich konnte viel Neues dazu lernen, das ich hoffentlich in Zukunft wieder anwenden kann.