Zum Inhalt wechseln
Dr. Web Logo seit 1997.
  • Agentur eintragen ✅
  • Ausschreibungen
  • Beste Agenturen
  • Jobs
  • Magazin
  • Newsletter 📩
  • Login
  • Kontakt
  • Sponsored Post
  • Werben 🎉
Menü
  • Agentur eintragen ✅
  • Ausschreibungen
  • Beste Agenturen
  • Jobs
  • Magazin
  • Newsletter 📩
  • Login
  • Kontakt
  • Sponsored Post
  • Werben 🎉
  • Werben
  • Gastbeitrag
  • Sponsored Post
  • Kontakt
  • Anmeldung
  • Newsletter
Suche
  • Beste Agenturen
  • Agentur-Standorte
    • Berlin

    • Bonn

    • Dortmund

    • Dresden

    • Duisburg

    • Düsseldorf

    • Essen

    • Frankfurt am Main

    • Freiburg

    • Hamburg

    • Hannover

    • Köln

    • Leipzig

    • München

    • Nürnberg

    • Stuttgart

    • Wien

    • Zürich

  • Ausschreibungen
  • Smarte Agenturköpfe
  • Magazin
Agentur eintragen →
Dr. Web Logo seit 1997.
  • Agentur finden
  • Ausschreibungen
  • Smarte Agenturköpfe
  • Magazin
Agentur eintragen →
Dr. Web » JavaScript & jQuery » mo.js: JavaScript-Framework für komplexe Animationen

mo.js: JavaScript-Framework für komplexe Animationen

Facebook Icon. facebook Twitter Icon. twitter Xing Icon. xing Linkedin Icon. linkedin Whatsapp Icon. whatsapp
  • Ein Kommentar
Lesedauer: 3 Minuten
  • von Denis Potschien
  • 5. Januar 2016

Inhaltsverzeichnis

Dank CSS3 und JavaScript sind die Grundlagen für native und anspruchsvolle Animationen im Browser gesetzt. Doch die CSS-Eigenschaften und JavaScript-Methoden erlauben nur grundsätzliche Bewegungen. Das Framework mo.js hingegen ermöglicht wesentlich komplexere Animationen – vor allem mit Hilfe sehr individueller und einfach zu erstellender Easing-Funktionen.

mo.js: JavaScript-Framework für komplexe Animationen

Schneller Einstieg, aber noch keine Dokumentation

Da mo.js ohne jQuery oder andere Bibliotheken auskommt, muss lediglich die JavaScript-Datei des Frameworks eingebunden werden. Im Download-Paket ist ein Demo-HTML-Dokument vorhanden, indem die JavaScript-Datei sowie ein „<div>“-Element bereits ausgezeichnet sind. Du kannst damit also direkt starten und dich mit den Möglichkeiten von mo.js auseinandersetzen.

Auf der Website gibt es einige Tutorials, die anhand von Code-Beispielen samt Demo erläutern, was mo.js kann und wie man es anwendet. Leider gibt es derzeit nur Tutorials zu den Easing-Möglichkeiten. Von den verschiedenen Modulen und den Tweening-Funktionen sind derzeit noch keine Tutorials vorrätig. Außerdem fehlt noch eine Dokumentation. Doch alleine das individuelle Erstellen komplexer Easing-Funktionen macht mo.js bereits zu einem äußerst interessanten Animationswerkzeug.

mojs_tutorials
Tutorial-Seite

Einfache Syntax für einfache Animationen

Die Verwendung von mo.js ist sehr einfach. Mit „mojs.Tween()“ kannst du eine neue Animation erstellen und einem beliebigen Element zuweisen. Die Anzahl der Wiederholungen und Dauer der Animation werden über Parameter übergeben. Per Event-Handler steuerst du du eigentliche Animation.

new mojs.Tween({
  repeat: 2,
  duration: 3000,
  delay: 1000,
  onUpdate: function (progress) {
    document.getElementsByTagName("div")[0].style.transform = "translateY(" + 200 * progress + "px)";
 }
}).run();

Im Beispiel wird eine Animation mit drei Sekunden Dauer erstellt, die nach einer Sekunde startet und sich zweimal wiederholt. Über „onUpdate()“ rufen wir eine Funktion auf, welche für die eigentliche Animation zuständig ist. Per „progress“ wird der Fortschritt der Animation übergeben. Hierbei handelt es sich um einen Wert, der im Laufe der Animation von 0 zu 1 hochzählt.

Dieser Wert dient im Beispiel dazu, die Animation zu berechnen. Dazu wird „progress“ mit dem Zielwert der Animation – im Beispiel 200 – multipliziert. Das „<div>“-Element bewegt sich also per „translateY()“ auf der Y-Achse um 200 Pixel.

Easing mit Pfaden erstellen

Mit CSS3 sind eine Reihe von Easing-Funktionen für Animationen eingeführt worden. Insgesamt stehen einem nur fünf verschiedene, einfach gehaltene Möglichkeiten zur Verfügung: „linear“, „ease“, „ease-in“, „ease-out“ und „ease-in-out“. Mit „cubic-bezier()“ hast zu zudem noch die Möglichkeit, ein individuelles Easing anhand einer Bézierkurve zu erstellen.

mojs_easing
Pfad als Grundlage fürs Easing

Mit mo.js kannst du jedoch ein komplett individuelles Easing mit beliebig vielen Beschleunigungen und Abbremsungen entwickeln. Diese werden anhand eines Pfades auf der Basis des SVG-Elementes „<path>“ definiert. Du zeicnest also beispielsweise in Illustrator einen Pfad und speicherst ihn im SVG-Format. Die Werte des Pfades, die in der „d“-Eigenschaft ausgezeichnet sind, nutzt du anschließend, um die als Grundlage für dein Easing zu verwenden.

var bouncyEasing = mojs.easing.path("M0,100 C6.50461245,96.8525391 …");

Im Beispiel wird per „mojs.easing.path()“ ein SVG-Pfad als Easing-Pfad übergeben. Diesen übergeben wir dann einer Funktion, die das Easing eines Elementes per CSS-Eigenschaft „transform“ umsetzt.

new mojs.Tween({
  onUpdate: function (progress) {
    var bounceProgress = bouncyEasing(progress);
    document.getElementsByTagName("div")[0].style.transform = "translateY(" + 200 * bounceProgress + "px)";
  }
}).run();

Im Beispiel wird ein „<div>“-Element mit dem individuellen Easing auf der Y-Achse dank „translateY()“ animiert. Statt einer linearen Animation wie im ersten Beispiel kannst du beliebig viele Abbremsungen und Beschleunigungen sowie Federungen einbauen. So lässt sich mit einem entsprechend gezeichneten Pfad also auch die Richtung der Bewegung umkehren. Bei den klassischen CSS3-Easing-Funktionen klappt eine Animation immer nur in eine Richtung.

Im Übrigen kannst du mit mo.js ein Element nicht nur bewegen, sondern auch die Form verändern. Per „scaleX()“ oder „scaleY()“ erreichst du zum Beispiel, dass ein Element seine Größe ändert, während es animiert wird.

Umfangreiche Animationsmöglichkeiten

Einige Beispiele auf der Website von mo.js zeigen, welche umfangreichen Animationsmöglichkeiten mo.js besitzt. Es bleibt zu hoffen, dass die Dokumentation zügig erscheint und weitere Tutorials veröffentlicht werden. Derzeit ist mo.js nur eingeschränkt nutzbar. Wer möchte, kann sich anhand der Beispiele natürlich selbst in das Framework einarbeiten.

mojs_beispiel
Komplexe Animation mit mo.js

Auch wenn derzeit noch nicht alle Funktionen dokumentiert sind, lohnt es sich, mo.js im Auge zu behalten. Das Framework steht unter der liberalen MIT-Lizenz für private und kommerzielle Zwecke zur freien Nutzung bereit.

(dpe)

Denis Potschien

Denis Potschien

Denis Potschien ist seit 2005 freiberuflich als Kommunikationsdesigner tätig, seit Anfang 2010 im Kreativkonsulat in Iserlohn, einem Büro für Gestaltung und Kommunikation. Dort betreut er kleine und mittelständische Unternehmen ebenso wie kommunale Körperschaften und Organisationen aus Südwestfalen und dem Ruhrgebiet. Als Webdesigner und -entwickler gehören HTML5 und CSS3 zu seinen Kernthemen, weshalb er dazu 2013 ein Buch geschrieben hat. „Pure HTML5 und CSS3“ richtet sich an alle, die Vorkenntnisse haben, sich aber bisher mit HTML5 und CSS3 nicht oder nur am Rande beschäftigt haben.

Werde ein Sponsor. Kontaktiere uns →

Kostenloses SEO-Tool

Agenturpartner

Logo der Berliner Webdesign Agentur Primaline. Zu sehen ist ein grünes Schutzschild mit Stern oben links.

PRIMA LINE

Berlin

Khoa Nguyen SEO München Logo

Khoa Nguyen – Online Marketing Freelancer

München

Optimerch Agentur Logo Dortmund.

Optimerch GmbH

Dortmund

Carmen Hurst Webdesign Bad Homburg Logo.

Carmen Hurst | Webdesign

Bad Homburg

Logo der Knallblaumedia Agentur in Hamburg.

KnallBlauMedia

Hamburg

Alle Agenturpartner

Lust auf mehr?

Symbolbild in einem Laptop eingebettet. Zu sehen ist ein Mitarbeiter einer Digitalagentur.
Digitalisierung

Digitalagentur finden

Wir unterstützen Sie bei der Auswahl der passenden Digitalagentur, mit Agenturempfehlungen und wichtigen Hintergrundinformationen in unserer FAQ.

→
SEO Agentur

SEO Agentur finden

Hier finden Sie eine geeignete SEO Agentur. Sie möchten eine bessere Sichtbarkeit Ihrer Website in Google & Co., mehr Traffic, höhere Conversions, mehr Umsatz? Eine professionelle SEO Agentur unterstützt Sie maßgeblich bei der Erreichung dieser wichtigen Ziele.

→
Foto der Inhaberin einer Social Media Agentur, umrahmt von einem Laptop und zur Linken zwei Bewertungen der Agentur.
WordPress

WordPress Agentur finden

Wir unterstützen Sie bei der Auswahl Ihrer WordPress Agentur, mit Agenturempfehlungen und wichtigen Hintergrundinformationen in unserer FAQ.

→

Eine Antwort zu „mo.js: JavaScript-Framework für komplexe Animationen“
— was ist Deine Meinung?

  1. Karl Marx sagt:
    5. Januar 2016 um 18:45 Uhr

    live beispiel.. :<

    Antworten

Schreibe einen Kommentar Antworten abbrechen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Dr. Web Logo weiss.

Pionier für Digitale Transformation. Seit 1997. ✅  Wissen, Tipps, Ratgeber, Dienstleister: Wir bringen wir die digitale Transformation von Unternehmen praxisnah voran.

Agentur nach Schwerpunkt finden

  • Als Agentur eintragen
  • Beste Agenturen finden
  • Die besten Digitalagenturen
  • Die besten SEO Agenturen
  • Die besten Webdesign Agenturen
  • Die besten Werbeagenturen
  • WordPress Agentur finden
  • Als Agentur eintragen
  • Beste Agenturen finden
  • Die besten Digitalagenturen
  • Die besten SEO Agenturen
  • Die besten Webdesign Agenturen
  • Die besten Werbeagenturen
  • WordPress Agentur finden

Für Unternehmer: Finden Sie Ihre Agentur in…

  • Aachen
  • Augsburg
  • Basel
  • Bamberg
  • Bayreuth
  • Bergisch-Gladbach
  • Berlin
  • Bern
  • Bielefeld
  • Bochum
  • Bonn
  • Bremen
  • Chemnitz
  • Darmstadt
  • Dortmund
  • Dresden
  • Duisburg
  • Düsseldorf
  • Essen
  • Esslingen
  • Flensburg
  • Frankfurt
  • Freiburg
  • Gelsenkirchen
  • Gießen
  • Goslar
  • Hamburg
  • Hamm
  • Hannover
  • Heidelberg
  • Ingolstadt
  • Innsbruck
  • Karlsruhe
  • Kassel
  • Köln
  • Leipzig
  • Leverkusen
  • Ludwigsburg
  • Mainz
  • Mannheim
  • München
  • Münster
  • Nürnberg
  • Offenburg
  • Oldenburg
  • Osnabrück
  • Passau
  • Pforzheim
  • Potsdam
  • Regensburg
  • Reutlingen
  • Rosenheim
  • Rostock
  • Salzburg
  • Starnberg
  • Stuttgart
  • Tübingen
  • Wien
  • Wiesbaden
  • Wuppertal
  • Würzburg
  • Zürich
  • Aachen
  • Augsburg
  • Basel
  • Bamberg
  • Bayreuth
  • Bergisch-Gladbach
  • Berlin
  • Bern
  • Bielefeld
  • Bochum
  • Bonn
  • Bremen
  • Chemnitz
  • Darmstadt
  • Dortmund
  • Dresden
  • Duisburg
  • Düsseldorf
  • Essen
  • Esslingen
  • Flensburg
  • Frankfurt
  • Freiburg
  • Gelsenkirchen
  • Gießen
  • Goslar
  • Hamburg
  • Hamm
  • Hannover
  • Heidelberg
  • Ingolstadt
  • Innsbruck
  • Karlsruhe
  • Kassel
  • Köln
  • Leipzig
  • Leverkusen
  • Ludwigsburg
  • Mainz
  • Mannheim
  • München
  • Münster
  • Nürnberg
  • Offenburg
  • Oldenburg
  • Osnabrück
  • Passau
  • Pforzheim
  • Potsdam
  • Regensburg
  • Reutlingen
  • Rosenheim
  • Rostock
  • Salzburg
  • Starnberg
  • Stuttgart
  • Tübingen
  • Wien
  • Wiesbaden
  • Wuppertal
  • Würzburg
  • Zürich

Aus unserem Magazin

  • (Kostenlose) Services
  • 3D-Visualisierung
  • Allgemein
  • Apps
  • Betriebliches
  • Betriebswirtschaft
  • Bilder & Vektorgrafiken bearbeiten
  • Boilerplates & andere Tools
  • Branding
  • Buchhaltung
  • CMS
  • Content Marketing
  • CSS
  • Datenschutz
  • Design
  • Digitalisierung
  • E-Business
  • E-Commerce
  • E-Mail-Marketing
  • Editoren
  • Essentials
  • Fortbildung
  • Fotografie
  • Freebies
  • Freelancer
  • Hosting
  • HTML
  • HTML/CSS
  • Icons & Fonts
  • Illustrator
  • IMHO
  • Infografiken
  • Inspiration
  • Interviews
  • IT Services
  • JavaScript & jQuery
  • Jobs & Karriere
  • Online-Business-News
  • Online-Marketing
  • Performance-Optimierung
  • Photoshop
  • PHP
  • Programmierung
  • Public Relations
  • Rechtliches
  • Responsive Design
  • SEA – Suchmaschinenwerbung
  • SEO
  • Amazon SEO
  • Showcases
  • Social-Media-Marketing
  • Tipps, Tricks & Tutorials
  • Tools
  • Tutorials
  • UX Design
  • Videoproduktion
  • Virtual Reality
  • VPN
  • Webdesign
  • Website erstellen
  • WooCommerce
  • WordPress
  • WordPress Plugins
  • WordPress Themes
  • (Kostenlose) Services
  • 3D-Visualisierung
  • Allgemein
  • Apps
  • Betriebliches
  • Betriebswirtschaft
  • Bilder & Vektorgrafiken bearbeiten
  • Boilerplates & andere Tools
  • Branding
  • Buchhaltung
  • CMS
  • Content Marketing
  • CSS
  • Datenschutz
  • Design
  • Digitalisierung
  • E-Business
  • E-Commerce
  • E-Mail-Marketing
  • Editoren
  • Essentials
  • Fortbildung
  • Fotografie
  • Freebies
  • Freelancer
  • Hosting
  • HTML
  • HTML/CSS
  • Icons & Fonts
  • Illustrator
  • IMHO
  • Infografiken
  • Inspiration
  • Interviews
  • IT Services
  • JavaScript & jQuery
  • Jobs & Karriere
  • Online-Business-News
  • Online-Marketing
  • Performance-Optimierung
  • Photoshop
  • PHP
  • Programmierung
  • Public Relations
  • Rechtliches
  • Responsive Design
  • SEA – Suchmaschinenwerbung
  • SEO
  • Amazon SEO
  • Showcases
  • Social-Media-Marketing
  • Tipps, Tricks & Tutorials
  • Tools
  • Tutorials
  • UX Design
  • Videoproduktion
  • Virtual Reality
  • VPN
  • Webdesign
  • Website erstellen
  • WooCommerce
  • WordPress
  • WordPress Plugins
  • WordPress Themes

Rechtliches

  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Privatsphäre-Einstellungen ändern
  • Historie der Privatsphäre-Einstellungen
  • Einwilligungen widerrufen
  • Nach oben ↑
  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Privatsphäre-Einstellungen ändern
  • Historie der Privatsphäre-Einstellungen
  • Einwilligungen widerrufen
  • Nach oben ↑