Animation im Web – unsere Tools im Überblick

Wer das Prinzip von Keyframes versteht, versteht Keyshape und kann mit wenig Aufwand SVG-Animationen erstellen. Die zu animierenden Parameter beschränken sich natürlich mehr oder weniger auf jene, die auch mit CSS Transform Properties umgesetzt werden können – zumal es sie auch so exportiert. Für rudimentäre Interaktionen (on Click, on Pointer Enter und on scroll into view) bietet Keyshape auch eine eigene kleine Javascript-Library. Trotz oder gerade weil es so ein simples Programm ist, greifen wir bei smartive immer wieder mal darauf zurück.

Alternativen: SVGator, SVGartista, CSS-Animationen

Preis: einmalig CHF 29.– via Appstore

Rive – The New Kid on the Web

Rive (ehemals Flare) gibt es zwar schon ein paar Jahre, hat aber vor ein paar Monaten Tabula Rasa mit seiner Codebase gemacht und alles von Grund auf neu entwickelt (The new Rive). Seitdem fehlen zwar einige eher banale Funktionen wie zum Beispiel Layer Effekte oder ein Curve Editor, dafür punktet Rive nun mit einfacher Implementation in fast sämtlichen Code-Umgebungen und sehr, sehr kleinen Dateigrössen. Nebst den fantastischen State Machines – einem visuellen Editor für Logiken und Interactions – natürlich einer der Hauptgründe, warum wir (und Duolingo) seit neustem fast ausschliesslich auf Rive setzen.

Alternativen: After Effects mit Lottie Export, Cavalry mit Lottie Export

Preis: CHF 13.– pro Monat, Free Plan mit maximal 3 Files

Cavalry – The Disruptor

Cavalry wird von vielen als erste ernsthafte Konkurrenz zu Adobes After Effects betrachtet. Auch wenn ihm für professionelles Compositing und VFX noch viele Features fehlen, sollten sich Motion Graphic Designer das Tool vom kleinen Entwicklerteam Scenegroup unbedingt genauer anschauen. Viele parametrische Design- und Animationsmöglichkeiten, eine einfache Physik-Engine und das nach einigen Anläufen sehr spannende driver/driven Prinzip, bei dem, sehr vereinfacht formuliert, jeder numerische Wert einen anderen steuern kann. So kann beispielsweise ein Prozent-Slider sowohl die Opacity eines Objects als auch dessen x-Koordinate steuern und man spart sich zwei Keyframes. Und mit dem integrierten Lottie-Export hat man (einfache) Animation auch sehr schnell und einigermassen performant im Web.

Alternativen: After Effects, DaVinci Resolve Fusion, Apple Motion

Preis: ± CHF 18.– pro Monat, Free Plan mit eingeschränkter Funktionalität

Framer (Motion) – Pretty easy easing

Was als (fast) rein codebasiertes Prototypingtool begonnen hat und sich dann zum Designtool à la Figma gemausert hat, ist mittlerweile ein hervorragender Sitebuilder geworden. Nebst zahlreichen Kernfunktionen bietet Framer auch rudimentäre Möglichkeiten für Animationen. Und zwar in Form von statebasierten Transitionen. Heisst: man designt State 1 und State 2 und Framer versucht dann so elegant wie möglich, zwischen den beiden States zu interpolieren. Vom Prinzip her wie Figmas Smart Animate, nur schreibt Framer im Gegensatz dazu verwendbaren Code basierend auf ihrer kostenlosen Framer Motion Library – der sich (meistens) problemlos direkt in ein Webprojekt integrieren lässt.

Alternativen: Motion.dev, Principle (mehr oder weniger)

Preis: CHF 0–35.– pro Monat (Framer Sites), Open Source (Motion Library)

Spline ist ein sehr intuitiver, browserbasierterer 3D-Editor mit Multiplayer und Realtimerendering. Bereits das hat mich seit Veröffentlichung der ersten Betaversion vor weniger als einem Jahr ziemlich beeindruckt. Seitdem dazugekommen sind: Game Controls, Physic Engine, States, Components, Video- und AI-Shaders, Cloners, Conditional Logics und vieles mehr. Bei dem Tempo und der Qualität könnte Spline der de facto Standard für 3D im Browser werden. Oder aber Adobe kauft sie auf. 🙄

Alternativen: Vectary, WebGLStudio

Preis: ± CHF 9.– pro Monat, Free Plan mit Wasserzeichen

Honorable Mention: Cinema 4D

Tanzt hier zwar ein wenig aus der Reihe, aber Cinema 4D begleitet mich schon seit über 20 Jahren und ist für mich für komplexe Animationen stets die erste Wahl. Natürlich lassen sich damit keine kleinen UI-Animationen erstellen, aber für spektakulären Content oder für Assets zur Weiterverwendung in bspw. ThreeJS gibt es kaum etwas besseres. Und die «Denkweise» von Cinema 4D mit seinen parametrischen Ansätzen, dem non-destructive Workflow, den unterschiedlichen (mathematischen) Noises und der gezielten Randomness hat mein Designverständnis nachhaltig geprägt und beeinflusst auch heute noch neue Tools.

Alternativen: Blender, 3ds Max

Preis: ± CHF 1’000.– pro Jahr

Bonus: Procreate

Du kannst zeichnen und Dateigrössen sind dir relativ egal? Procreate, eine der besten iPad Apps für Zeichner und Illustratoren, bietet auch rudimentäre Animationsfunktionen. Damit lassen sich ganz nach dem Prinzip alter Zeichentrickfilme (oder Daumenkinos ❤) Bewegungen mittels onion-skinning Frame für Frame zeichnen und animieren und danach als Gif oder Video exportieren.

Alternativen: Animation Desk

Preis: einmalig CHF 13.– via Appstore