Swisscom Mobility for Work

Animierte interaktive Grafik für die Business Website von Swisscom.

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.

swisscom-mobility-for-work-bild

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

Facts

Jahr

2017

Kunde

Swisscom

Agentur

Notch Interactive

Ausgeführte Arbeiten

Technische Umsetzung der Animation in HTLM5, CSS3 und Javascript Framework GSAP (GreenSock Animation Platform)

Weitere Animations Projekte von uns

Zum Online Marketing

Übersicht