Swisscom Mobility for Work

Im Auftrag der Agentur Notch Interactive animierten wir eine Grafik für die Swisscom. Die Grafik besteht aus drei Welten. Mit einem Klick auf einen der drei obenstehenden Buttons, kann zwischen den Welten gewechselt werden. Beim Wechsel wird erst die aktuelle Welt in einer Animation abgebaut und danach die neue Welt aufgebaut. Sobald die Grafik aufgebaut ist, bewegen sich immer wieder kleinere Details wie zum Beispiel das Wi-Fi-Signal, welches von einem Gerät zum anderen springt, die Uhr, die sich dreht oder die verschiedenen Icons in der Welt 3, welche animiert sind.

Technik

Die Grafik wurde im Javascript Animationsframework GSAP (GreenSock Animation Platform) animiert. Um eine grösstmögliche Kontrolle über die vielen verschiedenen Animationen zu haben, sind diese in kleinere eigenständige Animationsgruppen aufgeteilt, welche später in einer Hauptzeitleiste zusammengefügt wurden. Diese Hauptzeitleiste wurde mit TimelineMax realisiert, da dort die Animationen für den Abbau der Welten auch rückwärts und mit einem Timescale abgespielt werden können. Die Animation ist vollkommen responsive. Neben dem Javascript Framework wurde zur Entwicklung HTML, SCSS und GULP eingesetzt.

Hier ist die Grafik zu sehen, wie sie in der Business Website der Swisscom eingepflegt und mit Texten und Overlays ergänzt wurde.