Lottie-Animationen in Pageflow
Das neue Inhaltselement bringt leichtgewichtige Web-Animationen in Pageflow-Beiträge – für visuelles Storytelling, interaktiven Content und eindrucksvolle Scrollytelling-Erlebnisse.
Was sind Lotties?
Lotties sind kompakte Animationen, die in der Regel auf Vektorgrafiken basieren. Deshalb bleiben Linien, Formen und Schriften auch auf großen Bildschirmen gestochen scharf. Gleichzeitig benötigen sie häufig deutlich weniger Daten als vergleichbare Videos oder animierte GIFs.
Dank unseres neuen Inhaltselements lassen sich die bunten Hingucker jetzt ganz einfach in Pageflow einbinden. Damit eröffnen sich neue Möglichkeiten für das Digitale Storytelling: von kleinen animierten Akzenten über interaktive Infografiken bis zu Animationen, die sich Schritt für Schritt durch Scrollen entfalten.
Wie das aussieht und wie du Lottie-Animationen für deinen interaktiven Content einsetzen kannst, zeigt dieses Demo.
Drei Arten der Wiedergabe
1. Einmal abspielen
Die Animation startet, sobald sie sichtbar wird, und läuft einmal von Anfang bis Ende. Das eignet sich besonders für kurze Effekte, Übergänge oder Illustrationen, die sich Schritt für Schritt aufbauen.
2. In Endlosschleife
In diesem Modus wird die Animation wiederholt, solange sie sichtbar ist. Ideal für kleine, kontinuierliche Bewegungen, die einer Seite mehr Lebendigkeit verleihen, ohne vom Inhalt abzulenken.
3. Mit der Scrollposition
Hier bestimmt dein Publikum selbst die Wiedergabe: Beim Scrollen bewegt sich die Animation Bild für Bild vorwärts – und beim Zurückscrollen wieder zurück. So lassen sich Prozesse, Veränderungen und Zusammenhänge besonders anschaulich visualisieren.
steuerung Durch Scrollen
Bei scrollgesteuerten Lotties kannst du genauer festlegen, welcher Teil der Scrollbewegung die Animation antreibt.
Während sichtbar Die Animation läuft über den gesamten Zeitraum, in dem sich das Element im sichtbaren Bereich befindet.
Während vollständig sichtbar Die Wiedergabe beginnt, wenn das Element vollständig zu sehen ist, und endet, bevor es den sichtbaren Bereich wieder verlässt.
Beim Passieren der Viewport-Mitte Die Bewegung orientiert sich daran, wie das Element die Mitte des Bildschirms passiert.
Beim Hereinscrollen Die Animation spielt ab, während sie in den sichtbaren Bereich gelangt.
Damit lässt sich die Wirkung passend zur Länge und Funktion der Animation abstimmen: vom kurzen Einstiegseffekt bis zur ausführlichen, scrollgesteuerten Erklärung. Lottie-Animationen werden so zu einem vielseitigen Werkzeug für Scrollytelling, interaktive Reportagen und andere Formen des visuellen Storytellings.
Die richtige Bühne für deine Animation
Lottie-Animationen können im Zusammenspiel mit der Ausrichtung eines Abschnitts unterschiedlich positioniert werden: im Textfluss, neben dem Text, neben dem Text als Sticky-Element oder Stand-alone. Bei zentrierten und mittig ausgereichteten Abschnitten auch links oder rechts in den Textfluss eingerückt.
Besonders spannend für scrollgesteuerte Animationen sind die Varianten Neben dem Text (Sticky) und Stand-alone. Sie geben der Bewegung genügend Raum und verbinden sie besonders wirkungsvoll mit dem Lesefluss.
Scroll-Varianten Sticky und Standalone
Neben dem Text (Sticky)
Bei links oder rechts ausgerichteten Abschnitten bleibt die Animation neben dem Text sichtbar, während die Leserinnen und Leser durch die begleitenden Inhalte scrollen. Die Bewegung kann sich dabei Stück für Stück entfalten und direkt auf einzelne Textpassagen reagieren.
Das eignet sich zum Beispiel für Prozesse, Erklärstücke oder Illustrationen, bei denen nacheinander neue Details sichtbar werden.
Stand-alone
Mit dieser Position erhält die Animation eine eigene, prominente Bühne. Beim Scrollen rastet sie im sichtbaren Bereich ein und bleibt dort fixiert, bis sie vollständig abgespielt wurde. Anschließend löst sie sich wieder und scrollt aus dem Viewport. So kann sich das Publikum ganz auf die Animation und ihren Ablauf konzentrieren.
Wie werden Lottie- Animationen erstellt?
Für die Erstellung von Lotties gibt es verschiedene Wege – vom professionellen Motion Design bis zum spezialisierten Browser-Tool.
Besonders einfach gelingt der Einstieg mit dem Lottie Creator von LottieFiles. Dort kannst du Formen, Texte, Icons und importierte Grafiken animieren, Keyframes setzen und das Ergebnis direkt als .lottie-Datei exportieren. Eine Installation ist nicht erforderlich.
Auf der Plattform findest du außerdem Tutorials, Vorlagen und Hilfestellungen für den Einstieg. Der Creator unterstützt unter anderem SVG-Importe, Keyframe-Animationen und verschiedene Exportformate. Mehr über Lottie Creator erfahren.
Von Figma bis After Effects: weitere Wege zur Lottie-Datei
Für komplexere Animationen kommen häufig klassische Design- und Motion-Tools ins Spiel. In Adobe After Effects lassen sich aufwendige Bewegungsabläufe, Übergänge und Vektoranimationen gestalten und anschließend beispielsweise über Bodymovin oder das LottieFiles-Plugin exportieren.
Auch Figma kann Teil des Workflows sein: Icons, Illustrationen und andere grafische Elemente werden dort vorbereitet und später in einem Animationstool weiterbearbeitet. Je nach Projekt führt also ein anderer Weg zur fertigen Lottie-Datei – vom schnellen Browser-Tool bis zum professionellen Motion-Design-Setup.
Unser Experiment mit ChatGPT - Von der Illustration zur fertigen Animation
Wir wollten wissen: Lassen sich aus bestehenden Illustrationen mithilfe von ChatGPT direkt nutzbare Lottie-Dateien erzeugen? Die kurze Antwort lautet: ja – und die Ergebnisse waren überraschend gut.
Als Ausgangspunkt haben wir drei Bilder verwendet, die unterschiedliche Phasen einer Illustration zeigen. Der finale Zustand war bereits vorhanden. Die beiden vorherigen Phasen ließen wir nachträglich als Referenz für den gewünschten Bewegungsablauf generieren.
Anschließend beschrieben wir, wie sich die Illustration zwischen diesen Zuständen entwickeln sollte. Nach einigen Iterationen und mehreren Feinschliffen erzeugte ChatGPT daraus tatsächlich eine .lottie-Datei, die wir direkt in Pageflow einsetzen konnten. Auch mit Claude konnten wir in ähnlichen Versuchen funktionsfähige Lottie-Animationen erstellen.
Das Ergebnis ist vielleicht nicht an jeder Stelle perfekt – für ein vergleichsweise komplexes Motiv aber durchaus beeindruckend. Vor allem zeigt unser Experiment: Mit einer guten Vorlage, einer klaren Idee und etwas Ausprobieren lassen sich auch ohne tiefes Motion-Design-Wissen eigene Lottie-Animationen entwickeln.
Saubere Vorlagen führen zu besseren Ergebnissen
Besonders gut funktioniert der Ansatz bei klar aufgebauten Illustrationen und Bewegungen, die sich logisch in einzelne Schritte übersetzen lassen: Einblenden, Verschieben, Skalieren, Rotieren oder einfache Loops.
Ideal sind sauber strukturierte SVG-Dateien, bei denen Hintergrund, Figuren, Pfeile und andere Elemente eindeutig voneinander getrennt sind. In unserem Versuch hat die Erstellung aber auch mit PNG-Dateien mit transparentem Hintergrund funktioniert.
Bei einfachen Motiven dürfte der Einstieg besonders leichtfallen – etwa bei einem Ladebalken, der von 0 auf 100 Prozent anwächst, einem pulsierenden Icon oder einer rotierenden Grafik. Komplexere Illustrationen profitieren von präziseren Anweisungen und einigen zusätzlichen Abstimmungsrunden.
ChatGPT und Claude ersetzen damit nicht in jedem Szenario eine professionelle Animationssoftware. Sie sind aber erstaunlich nützliche Werkzeuge, um erste Animationen zu entwickeln, Varianten auszuprobieren und Ideen direkt in Pageflow zu testen.
Der Einfachste Weg: Fertige Animationen verwenden und individuell anpassen
Du möchtest nicht selbst animieren? In der Free-Animations-Galerie von LottieFiles findest du eine große Auswahl kostenloser Animationen. Du kannst sie herunterladen, direkt ausprobieren oder als Ausgangspunkt für ein eigenes Motiv verwenden.
Im Lottie Editor anpassen Viele Vorlagen lassen sich im Lottie Creator weiterbearbeiten. Farben, Texte, Timing und einzelne Bewegungen können so an das eigene Design angepasst werden. Prüfe vor der Veröffentlichung, ob Gestaltung und Lizenz zur geplanten Verwendung passen.
In ChatGPT anpassen Insbesondere für kleinere Änderungen kann ChatGPT hilfreich sein. Eine vorhandene Lottie-Datei lässt sich beispielsweise mit konkreten Anweisungen anpassen. Klare, einzeln formulierte Änderungen liefern dabei unserer Erfahrung nach die besten Ergebnisse.
Ersetze das Blau in dieser Animation durch den Farbwert #E83E66. Lasse den Text am Ende eine 360° Drehung machen. Behalte den sonstigen Bewegungsablauf, Timing und alle übrigen Farben unverändert bei.
Exemplarischer
Prompt
Bereit für mehr Bewegung?
Du möchtest direkt loslegen, ohne zuerst eine eigene Animation zu erstellen? In unserem Download-Pack findest du verschiedene Lottie-Beispiele für den sofortigen Einsatz. Einfach herunterladen, in Pageflow hochladen und die unterschiedlichen Wiedergabe- und Positionierungsoptionen ausprobieren.
Jetzt Loslegen
Ob kleiner Hingucker, animiertes Diagramm oder scrollgesteuerte Infografik: Lottie-Animationen erweitern deine Beiträge um eine neue visuelle Erzählebene. Mit Pageflow kannst du daraus ohne Programmierung multimediale Geschichten, interaktive Reportagen und eindrucksvolle Scrollytelling-Seiten gestalten.