„Motion for the Web“ – das steht im Fokus der Entwickler hinter der JavaScript-Library mo.js. Nun sind Animationen ja heutzutage ein gängiges Effektmittel auf fast allen Websites und lassen sich zum Beispiel mit CSS oder JavaScript umsetzen. Was mo.js von anderen Libraries unterscheidet, ist dass Animationen nicht nur über die Manipulation des DOM oder SVG DOM umgesetzt werden können, sondern alternativ besondere mo.js-Objekte erstellt werden. Gleichzeitig bietet die JavaScript-Library einige nützliche Features und Tools, um effektvolle Animationen für das Web zu erstellen.

mo.js – die Basics

Shapes in mo.js, Quelle: CodePen

mo.js bietet eine Reihe von Formen und Objekten, die sich mit Animationen versehen lassen. Zur Verfügung stehen zum Beispiel circle, rect, cross, equal, zigzag und polygon, wobei circle der Default ist. User können zudem die Füllung, Strichrichtung und Strichbreite definieren und einen Radius für die Form angeben und ihn entsprechend anpassen. Die Form wird mithilfe von einer absoluten Positionierung in der Mitte des Screens platziert, sofern der User keine anderen Angaben vornimmt.

Schaut man sich die zur Verfügung stehenden Formen im DOM an, fällt auf, dass es sich dabei jeweils um SVG-Shapes handelt, die in einem div platziert werden. Ebenso können auch parent-Elemente weitergegeben werden, wenn die Form irgendwo im DOM platziert werden soll. Und wem das nicht reicht, kann zusätzlich eigene Custom-Shapes erstellen und diese animieren.

Workshop: Machine Learning 101++ using Python

mit Dr. Pieter Buteneers (Chatlayer.ai)

Honey Bee Conservation using Deep Learning

mit Thiago da Silva Alves, Jean Metz (JArchitects)

Daten analysieren und transformieren mit Python

mit Doniyor Jurabayev (Freelancer)

Advanced Flow Control

mit Oz Tiram (noris network AG)

Animationen erstellen mit mo.js

Um eine Form mit mo.js zu animieren, wird ein Objekt mit den Werten weitergegeben, die anzeigen, wie die Animation aussehen soll. Dafür stehen eine Reihe weiterer Parameter zur Verfügung, etwa:

• Dauer
• Verzögerung
• Wiederholung
• Geschwindigkeit
• isYoyo
• easing
• backwardEasing
• isSoftHide

Außerdem lassen sich auch problemlos zwei Animationen hintereinander auf die gleiche Form anwenden. Darüber hinaus stehen zahlreiche weitere Features zur Verfügung, mit der User für effektvollere Animationen sorgen können.

Ebenso bringt die JavaScript-Library nicht nur verschiedene built-in easing-Values mit, sondern ermöglicht auch die Übergabe eines SVG-Pfads als easing-Wert. Genauso stehen dem User umfangreiche Tooling-Möglichkeiten zur Verfügung. Das folgende Video bietet einen Eindruck davon:

mojs workflow from Oleg Solomka on Vimeo

Installation und Verfügbarkeit

Die Installation der JavaScript-Library ist simpel: sie kann über npm, Bower oder cdn installiert werden. Unterstützt wird sie in allen modernen Browsern sowie im Internet Exlorer ab Version 9. Auf der Projektwebsite finden sich eine ganze Reihe von Demos sowie eine umfangreiche Dokumentation. Alle weiteren Informationen rund um mo.js sind auf GitHub zusammengefasst, und auch der Artikel von Sarah Drassner bietet einen guten Überblick über die JavaScript-Library.