Dr. Web Logo. Untertext: Seit 1997.
  • Beste Agenturen
  • Agentur-Standorte von A bis Z 🌇
  • Magazin
  • Newsletter 📩
  • Login
  • Agentur bewerben ✅
  • Kontakt
  • Werben 🎉
  • Sponsored Post
  • Jobs
Menü
  • Beste Agenturen
  • Agentur-Standorte von A bis Z 🌇
  • Magazin
  • Newsletter 📩
  • Login
  • Agentur bewerben ✅
  • Kontakt
  • Werben 🎉
  • Sponsored Post
  • Jobs
  • Werben
  • Gastbeitrag
  • Sponsored Post
  • Kontakt
  • Login
  • Newsletter
Suche
  • Beste Agenturen
  • Agentur-Standorte
      Berlin bei Nacht, Blick von oben Richtung Fernsehturm.

      Berlin

      Blick auf die Elbufer-Promenade Dresdens sowie Frauenkirche und Zwinger.

      Dresden

      Düsseldorf von oben mit Blick auf den Fernsehturm.

      Düsseldorf

      Blick von oben auf das Bankenviertel in Frankfurt am Main.

      Frankfurt am Main

      Hamburg bei Nacht, Blick auf die Speicherstadt.

      Hamburg

      Blick auf das Neue Rathaus, Hannover.

      Hannover

      Agenturen in Innsbruck von oben mit Blick auf die Alpen.

      Innsbruck

      Sonnenuntergang in Köln mit Blick auf den Dom. Im Vordergrund die Hohenzollernbrücke.

      Köln

      München bei Fön mit Blick in die bayerischen Alpen.

      München

      Stuttgart von oben.

      Stuttgart

      Wien von oben. Blick auf den Stephansdom.

      Wien

      Zürich von oben.

      Zürich

  • Magazin
    • Content Marketing
    • CSS
    • E-Commerce
    • E-Mail-Marketing
    • Freelancer
    • Fotografie
    • HTML
    • Online-Marketing
    • Responsive Design
    • SEO
    • UX Design
    • Webdesign
    • Website erstellen
    • WordPress
    • Dr. Web Autoren
  • Jobs
Menü
  • Magazin
    • Content Marketing
    • CSS
    • E-Commerce
    • E-Mail-Marketing
    • Freelancer
    • Fotografie
    • HTML
    • Online-Marketing
    • Responsive Design
    • SEO
    • UX Design
    • Webdesign
    • Website erstellen
    • WordPress
    • Dr. Web Autoren
  • Jobs
Agentur eintragen →
Dr. Web Logo. Untertext: Seit 1997.
  • Beste Agenturen
  • Agentur-Standorte
      Berlin bei Nacht, Blick von oben Richtung Fernsehturm.

      Berlin

      Blick auf die Elbufer-Promenade Dresdens sowie Frauenkirche und Zwinger.

      Dresden

      Düsseldorf von oben mit Blick auf den Fernsehturm.

      Düsseldorf

      Blick von oben auf das Bankenviertel in Frankfurt am Main.

      Frankfurt am Main

      Hamburg bei Nacht, Blick auf die Speicherstadt.

      Hamburg

      Blick auf das Neue Rathaus, Hannover.

      Hannover

      Agenturen in Innsbruck von oben mit Blick auf die Alpen.

      Innsbruck

      Sonnenuntergang in Köln mit Blick auf den Dom. Im Vordergrund die Hohenzollernbrücke.

      Köln

      München bei Fön mit Blick in die bayerischen Alpen.

      München

      Stuttgart von oben.

      Stuttgart

      Wien von oben. Blick auf den Stephansdom.

      Wien

      Zürich von oben.

      Zürich

Agentur eintragen →
Dr. Web » JavaScript & jQuery » mo.js: JavaScript-Framework für komplexe Animationen

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

Sozial sein
Share on facebook
Share on twitter
Share on linkedin
Share on xing
Share on whatsapp
Share on email
  • Ein Kommentar
Lesedauer: 3 Minuten
  • von Denis Potschien
  • 5. Januar 2016
Bookmarke mich
Share on pocket

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)

Wie hilfreich war dieser Beitrag?

Klicke auf die Sterne um zu bewerten!

Durchschnittliche Bewertung 0 / 5. Anzahl Bewertungen: 0

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.

Agenturpartner

SEOlist.IO Frankfurt – SEO-Spezialist & SEO-Freelancer

Frankfurt am Main

Orange Services

München

Evergreen Media

Innsbruck

WeDeSu Online-Agentur

Speyer

BIZ Digital Marketing

Nürtingen

Alle Agenturpartner

Jobs

Projektmanager – Vollzeit

Remote

Online Marketing Manager

München

Frontend Development & Project Management

Remote

Webdesigner – Vollzeit

Remote

Junior SEO Manager in München

München

Zum richtigen Job

Newsletter

Tipps, Tricks, Ratgeber. Unser Newsletter: Jeden Dienstag frisch gedruckt in Deinem Mail-Postfach.

Lust auf mehr? Wir empfehlen folgende Artikel:

Grav CMS: Blitzschnell, einfach und modern

Grav CMS ist eines der interessantesten neuen Content Management Systeme am Markt. Es geht einen völlig anderen Weg als bisher bekannte Ansätze und kommt sehr

 →   

Du lernst nie aus: 20+ internationale Online-Schulungsangebote

Glücklicherweise sind die Zeiten vorbei, in denen sich Wissen hinter den Mauern altehrwürdiger Schulen oder in den Tiefen riesiger Bibliotheken verschanzte. Weite Teile der Weltbevölkerung

 →   

Atomic Design: So gestaltest du deine Website modular

Begrifflichkeiten im Webdesign sind häufig nicht viel mehr als Worthülsen. Der Begriff „Atomic Design” darf zu diesen Hülsen gezählt werden. Denn er dient nur seinem

 →   

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.

Share on facebook
Share on twitter
Share on linkedin
Share on xing
Share on whatsapp
Share on email

Wissen finden

  • Dr. Web Autoren
  • Amazon SEO
  • Content Marketing
  • CMS
  • CSS
  • Digitalisierung
  • E-Commerce
  • Freelancer
  • Jobs & Karriere
  • Online-Marketing
  • SEO
  • UX Design
  • Webdesign
  • Website erstellen
  • WordPress
  • WooCommerce
Menü
  • Dr. Web Autoren
  • Amazon SEO
  • Content Marketing
  • CMS
  • CSS
  • Digitalisierung
  • E-Commerce
  • Freelancer
  • Jobs & Karriere
  • Online-Marketing
  • SEO
  • UX Design
  • Webdesign
  • Website erstellen
  • WordPress
  • WooCommerce

Rechtliches

  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Nach oben ↑
Menü
  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Nach oben ↑

Für Agenturen & Unternehmer

  • Als Agentur eintragen
  • Beste Agenturen finden
  • Städte: von A bis Z.
  • Agenturen in Augsburg
  • Agenturen in Basel
  • Agenturen in Berlin
  • Agenturen in Bochum
  • Agenturen in Bonn
  • Agenturen in Bremen
  • Agenturen in Dortmund
  • Agenturen in Dresden
  • Agenturen in Duisburg
  • Agenturen in Düsseldorf
  • Agenturen in Essen
  • Agenturen in Frankfurt
  • Agenturen in Freiburg
  • Agenturen in Hamburg
  • Agenturen in Hannover
  • Agenturen in Innsbruck
  • Agenturen in Karlsruhe
  • Agenturen in Köln
  • Agenturen in Leipzig
  • Agenturen in München
  • Agenturen in Münster
  • Agenturen in Regensburg
  • Agenturen in Salzburg
  • Agenturen in Stuttgart
  • Agenturen in Wien
  • Agenturen in Zürich
  • Digitalagentur finden
  • Webdesign-Agentur finden
  • Werbeagentur finden
Menü
  • Als Agentur eintragen
  • Beste Agenturen finden
  • Städte: von A bis Z.
  • Agenturen in Augsburg
  • Agenturen in Basel
  • Agenturen in Berlin
  • Agenturen in Bochum
  • Agenturen in Bonn
  • Agenturen in Bremen
  • Agenturen in Dortmund
  • Agenturen in Dresden
  • Agenturen in Duisburg
  • Agenturen in Düsseldorf
  • Agenturen in Essen
  • Agenturen in Frankfurt
  • Agenturen in Freiburg
  • Agenturen in Hamburg
  • Agenturen in Hannover
  • Agenturen in Innsbruck
  • Agenturen in Karlsruhe
  • Agenturen in Köln
  • Agenturen in Leipzig
  • Agenturen in München
  • Agenturen in Münster
  • Agenturen in Regensburg
  • Agenturen in Salzburg
  • Agenturen in Stuttgart
  • Agenturen in Wien
  • Agenturen in Zürich
  • Digitalagentur finden
  • Webdesign-Agentur finden
  • Werbeagentur finden
Das große Dr. Web Icon-Set: 970+ Icons, im SVG-Format​

Lade Dir jetzt das Icon-Set
kostenlos herunter ↓

Über 970 Dr. Web-Icons, kostenlos.
Danke nein, ist nichts für mich.
Invalid email address
Vielen Dank! Bitte schau noch in Dein Postfach und bestätige die Anmeldung.