# Animierte Instagram Story erstellen, die Aufmerksamkeit hält [Canonical HTML page](https://gradiently.design/de/guide/animated-instagram-story) Eine Story bekommt ein, zwei Sekunden, bevor der Daumen weiterzieht. Die richtige Bewegung verdient den Rest des Bildes; die falsche macht die Worte nur schwerer lesbar. ## The short version - Eine animierte Instagram Story ist ein Video mit 1080×1920, meist ein kurzer Loop, das statt einer statischen Story genutzt wird. - Die lesbarsten animierten Stories bewegen den Hintergrund langsam, lassen die Worte einmal erscheinen und halten sie dann still. - Die erste Sekunde zählt am meisten, deshalb sollte die Überschrift etwa eine Sekunde nach dem Öffnen der Story vollständig sichtbar sein. - Lade animierte Stories als MP4-Video mit 1080×1920 hoch statt als GIF, damit Verläufe weich bleiben. - Halte Text und Logos vom oberen und unteren Bildrand fern, wo Instagram seine eigene Bedienoberfläche zeichnet. Eine **animierte Instagram Story** funktioniert, wenn sich ein Element mit Absicht bewegt und alles andere lesbar bleibt. In der Praxis heißt das: ein Hintergrund, der langsam treibt, eine Überschrift, die einmal mit einer kurzen Animation erscheint und dann stehen bleibt, und nichts Wichtiges oben oder unten im Bild mit 1080×1920. Exportiere als MP4, nicht als GIF, und sorg dafür, dass schon der allererste Frame wie ein fertiges Design wirkt, denn manche sehen nur diesen Frame. ## Was sich in einer animierten Story bewegen sollte Eine Story wird einen Moment lang angesehen, auf Armlänge, oft ohne Ton. Bewegung zieht den Blick an, also konkurriert alles Bewegte mit deinen Worten. Stories, die Aufmerksamkeit halten, wählen eine bewegte Ebene, halten sie ruhig und lassen die Schrift ihre Arbeit tun. Volle Stories wirken im Editor energiegeladen und auf dem Handy anstrengend. ### Anstrengend anzusehen - Jede Textzeile wird anders animiert - Worte bewegen sich weiter, nachdem sie erschienen sind - Ein schneller, kontrastreicher Hintergrund hinter kleinem Text - Sticker, GIFs und Effekte auf einem Frame gestapelt - Die Überschrift erscheint nach drei Sekunden ### Hält Aufmerksamkeit - Ein Stil der Textanimation für die ganze Story - Worte erscheinen und bleiben dann völlig still - Ein langsamer Hintergrund mit ruhiger Fläche hinter den Worten - Ein bewegtes Element, bewusst gewählt - Die Überschrift ist innerhalb einer Sekunde lesbar Dasselbe Prinzip zieht sich durch alle gute Motion-Arbeit, von Logos bis zu Websites. Wenn du die Theorie dahinter willst, behandelt [Prinzipien des Motion Designs](https://gradiently.design/de/guide/motion-design-principles) Timing, Easing und Hierarchie ausführlicher. ## Vier Textanimationen, die in Stories funktionieren Textanimation ist die nützlichste Bewegung in einer Story, weil sie dem Auge zeigt, wo es anfangen soll. Halte sie kurz. Ein Einstieg, der länger als etwa eine halbe Sekunde dauert, fühlt sich nach Warten an, und beim Warten tippen Leute weiter. | Animation | Was sie macht | Gut für | | --- | --- | --- | | Aufsteigen | Worte gleiten ein kurzes Stück nach oben und kommen zur Ruhe | Ruhige Ankündigungen, Zitate, redaktionelle Stories | | Aufploppen | Worte skalieren mit leichtem Überschwingen herein | Angebote, Launches, verspielte Marken | | Wischen | Eine Zeile wird von einer Seite her aufgedeckt | Überschriften mit klarer Leserichtung | | Schreibmaschine | Buchstaben erscheinen einer nach dem anderen | Fragen, Teaser, kurze Aufhänger aus wenigen Worten | Wähle eine pro Story. Schreibmaschine ist am langsamsten, halte ihre Zeile also kurz, sonst tippt sie noch, wenn die Leute schon weg sind. Staffle Zeilen statt Worte: zuerst die Überschrift, die unterstützende Zeile einen Takt später, den Hinweis auf den Link zuletzt. Diese Reihenfolge entspricht der Art, wie Menschen lesen, und die Story ergibt auch dann Sinn, wenn jemand mittendrin aussteigt. Weitere Muster, auch kinetische Typografie, findest du unter [Ideen für Textanimation](https://gradiently.design/de/guide/text-animation-ideas). Story im Hochformat mit bewegtem Farbverlauf, die ankündigt, dass ein neues Studio am Freitag eröffnet Die Überschrift steigt zuerst auf, dann das Detail. Beide sitzen im mittleren Streifen, weg von der Bedienoberfläche. Countdown-Story im Hochformat mit der Zeile Noch zwei Tage für eine Frühjahrsauswahl auf einem weich animierten Farbverlauf Ein Countdown, der einmal aufploppt. Der Hintergrund bewegt sich weiter, die Story wirkt also lebendig, während die Worte stehen. ## Das Timing einer animierten Instagram Story Eine statische Story bleibt etwa fünf Sekunden auf dem Bildschirm, bevor Instagram weitergeht. Eine Video-Story läuft so lange wie der Clip, doch die Aufmerksamkeit liegt am Anfang: Ist die erste Sekunde leer, wird der Rest selten gesehen. Plane die Timeline von dort aus rückwärts. 1. **0 bis 1 Sekunde: die Überschrift** Der Hintergrund bewegt sich schon im ersten Frame. Die Überschrift schließt ihren Einstieg bis zum Ende der ersten Sekunde ab. 2. **1 bis 2 Sekunden: die Ergänzung** Die zweite Zeile oder das Produkt erscheint. Nutze dieselbe Animation wie bei der Überschrift, mit etwas kleinerer Bewegung. 3. **2 bis 3 Sekunden: die Aktion** Der Link-Hinweis, das Datum oder der Code erscheint. Auf diese Zeile reagieren die Leute, sie braucht also Zeit zum Lesen. 4. **Der Rest: stehen lassen** Nichts Neues kommt hinzu. Der Hintergrund treibt weiter, damit die Story ohne sichtbaren Neustart loopt. Sechs bis zehn Sekunden sind eine angenehme Länge für eine gestaltete Story mit kurzer Botschaft. Längere Clips passen zu Gesprochenem oder Vorführungen, nicht zu einer Überschrift. Soll die Story loopen, muss der Hintergrund dort enden, wo er begann; Schritt für Schritt erklärt das [Nahtlose Loop-Videos](https://gradiently.design/de/guide/seamless-loop-video). > **Mach den ersten Frame zum fertigen Design** Vorschaubilder, Vorschauen und langsame Verbindungen können den ersten Frame allein zeigen. Animieren deine Worte aus dem Nichts herein, ist dieser Frame ein leerer Hintergrund. Lass die Überschrift teilweise sichtbar beginnen oder gestalte den ersten Frame als vollständiges Standbild. ## Größe, sichere Bereiche und Exporteinstellungen Eine animierte Story nutzt dasselbe Format wie eine statische: 1080×1920 Pixel, 9:16. Die Bedienoberfläche von Instagram liegt oben und unten über dem Bild, halte Worte und Logos also im mittleren Streifen. Eine gängige Arbeitsregel ist, oben und unten jeweils etwa 250 Pixel frei von Text zu lassen. Die vollständige Aufschlüsselung steht unter [Instagram-Story-Größe](https://gradiently.design/de/guide/instagram-story-size). - Story und Reel 9:16: 1080 × 1920 - Feed-Post 4:5: 1080 × 1350 - Quadrat 1:1: 1080 × 1080 Das Story-Format neben den Feed-Formaten. Gestalte die Story in voller Höhe, statt einen Feed-Post passend zu strecken. | Einstellung | Empfehlung | Warum | | --- | --- | --- | | Format | MP4 | Instagram spielt Video nativ ab und hält Verläufe weich | | Größe | 1080×1920 px | Nichts wird umskaliert oder mit Balken versehen | | Bildrate | 30 fps | Flüssig genug für langsame Bewegung, kleine Dateien | | Ton | Optional | Viele schauen stumm, die Worte müssen die Botschaft also tragen | | Vermeiden | GIF-Uploads | 256 Farben pro Frame machen Verläufe streifig | Exporteinstellungen für eine gestaltete, animierte Story. GIF ist hier das eine Format, das du meiden solltest. Seine Grenze von 256 Farben verwandelt weiche Verläufe in Streifen, und eine bewegte Story ist für Instagram ohnehin ein Video, also gib ihm eins. Den Vergleich findest du unter [GIF vs. MP4](https://gradiently.design/de/guide/gif-vs-mp4). ## Animierte Stories, die nicht wie alle anderen aussehen Die meisten Vorlagen für animierte Stories nutzen dieselbe Handvoll bewegter Hintergründe, und ein Feed voller solcher Stories verschwimmt. Der Hintergrund ist die Stelle, an der deine Marke erkannt werden kann, bevor jemand ein Wort liest. Ein bewegtes Farbfeld, das dir gehört, leistet mehr als jeder Stock-Loop. In Gradiently beginnt eine Story auf einem **Mark**: einem lebendigen Verlaufs- und Materialhintergrund, der sich von selbst bewegt und einzigartig ist. Füge deine Überschrift hinzu, wähle Aufsteigen, Aufploppen, Wischen oder Schreibmaschine, und der Mark hält seine ruhigste Fläche hinter den Worten, während die Automatische Farbe Zeile für Zeile helle oder dunkle Schrift wählt. Dasselbe Design lässt sich dann auf einen Feed-Post oder einen [Reels-Hintergrund](https://gradiently.design/de/guide/reels-tiktok-backgrounds) bringen, ohne es neu zu bauen. Der Videoexport ist Teil von Pro und speichert MP4, wo dein Browser es unterstützt. Minimalistische Story im Hochformat mit einer einzigen Zeile über eine neue Speisekarte auf einem langsam bewegten Farbverlauf Ein langsamer Mark hinter einer stillstehenden Zeile. Der Hintergrund bewegt sich; die Worte nie. ## FAQ ### Wie erstelle ich eine animierte Instagram Story? Gestalte ein Bild mit 1080×1920, einem bewegten Hintergrund und einer Textanimation, halte die Worte im mittleren Streifen, exportiere als MP4 und lade es als Story hoch. Die meisten Design-Tools mit Videoexport können das. ### Welches Format sollte eine animierte Instagram Story haben? MP4 mit 1080×1920 Pixeln. Meide GIF: Seine Grenze von 256 Farben macht Verläufe streifig, und Instagram behandelt eine bewegte Story ohnehin als Video. ### Wie lang sollte eine animierte Instagram Story sein? Für eine gestaltete Story mit kurzer Botschaft sind sechs bis zehn Sekunden angenehm. Bring die Überschrift in der ersten Sekunde aufs Bild, denn danach sinkt die Aufmerksamkeit schnell. ### Warum sieht meine animierte Story unscharf oder streifig aus? Meist wurde sie als GIF, in der falschen Größe oder mit niedriger Bitrate exportiert. Exportiere MP4 mit genau 1080×1920, damit Instagram nichts umskalieren muss. ### Sollte sich der Text die ganze Zeit bewegen? Nein. Lass Worte einmal hereinanimieren und dann stillstehen. Bewegter Text ist schwerer zu lesen, und ein langsam bewegter Hintergrund hält die Story ohnehin lebendig.