---
url: "/de/bannerify/animation/animating-banners.md"
description: "Nachdem du deine Figma-Frames in Bannerify geladen hast, kannst du mit den Zeitleisten-Funktionen des Plugins jede Ebene deiner Banner animieren."
---

# Deine Banner animieren

> Nachdem du deine Figma-Frames in Bannerify geladen hast, kannst du mit den Zeitleisten-Funktionen des Plugins jede Ebene deiner Banner animieren.

### Video-Tutorial: Banner in Figma animieren und als HTML exportieren

Dieses Video zeigt, wie du produktionsreife HTML-Banner in Sekunden aus Figma animierst und exportierst.
[Embedded media](https://www.youtube-nocookie.com/embed/-TA088FNulA)

## Animationen auswählen {#selecting-animations}

[Video](/assets/videos/bannerify/animation/select-animations.mp4)

Bannerify bringt Dutzende vordefinierte, keyframe-basierte Animationen mit, die in 5 Kategorien gruppiert sind:

- Entrances
- Exits
- Basic Transforms
- Attention Seekers
- Background Pans

Um eine **Eingangsanimation** festzulegen, fahr in der Zeitleiste von Bannerify mit der Maus über die Ebene, die du animieren willst, und klick auf das **obere Auswahlfeld**. Scroll durch die Liste der Animationen und **klick** auf einen Animationsnamen, um ihn auf deine Ebene anzuwenden. Die Banner-Vorschau wird sofort mit der neuen Animation aktualisiert.

> **Tip:** **Animationen von einer Ebene entfernen:** Soll eine Ebene gar keine Animation haben, wähle **No Entry Animation** und/oder **No Exit Animation**. Alternativ kannst du eine Figma-Ebene mit dem Präfix **locked-** umbenennen (zum Beispiel _locked-RectangleBackground_). Auch dann werden keine Animationen hinzugefügt, und das Auswahlfeld für Animationen in der Zeitleiste des Plugins wird deaktiviert.

## Banner-Animationen in der Zeitleiste ansehen {#previewing-your-banner-animations-in-the-timeline}

[Video](/assets/videos/bannerify/animation/preview-banner.mp4)

Mit einem Klick auf das Symbol **Play** spielst du die Animationen deiner Banner in der Vorschau ab, und mit dem Symbol **Pause** hältst du die Zeitleiste an jeder beliebigen Stelle an. Mit dem Symbol **Restart** startest du die Wiedergabe wieder von vorn.

Klick auf das Zeitlineal über den Bannern oder zieh daran, um durch die Animation zu scrubben. Der gemeinsame Abspielkopf bleibt über alle Banner hinweg an den Timing-Spuren ausgerichtet. Du kannst auch im Kopfbereich eines Banners scrubben, wo dessen Lineal angezeigt wird.

Mit **+**, **−**, dem Zoom-Schieberegler oder dem Zusammenziehen mit zwei Fingern auf dem Trackpad über dem Lineal oder den Timing-Spuren zoomst du von **100 % bis 1000 %**. Im vergrößerten Zustand ziehst du den abgerundeten blauen Scrollbalken unter dem Lineal, um nach links oder rechts zu wandern. Klick auf **Fit**, um wieder die gesamte Zeitleiste zu sehen. Diese Steuerelemente ändern nur die Ansicht, nicht die Timings der Animationen oder die Exportdauer. Alle Steuerelemente zur Navigation findest du unter [In der Zeitleiste zoomen und scrollen](/de/bannerify/animation/animation-speed-timing#zoom-and-scroll-the-timeline).

Für präziseres Bearbeiten nutzt du [Einrasten, Ebenenfilter, Marker und wiederverwendbare Bewegungssequenzen](/de/bannerify/animation/animation-speed-timing#snap-and-organise-your-timeline) oder lässt [einen Arbeitsbereich in Schleife laufen](/de/bannerify/animation/previewing-animations#loop-a-work-area), während du einen Übergang anpasst.

## Timeline Settings {#timeline-settings}

Klick im Kopfbereich auf **Timeline Settings**. Das Panel öffnet sich auf **General** und hat vier Tabs:

| Tab | Steuerelemente |
| --- | --- |
| **General** | Länge der Zeitleiste, Magic Delays und Magic Speeds |
| **Timeline Tools** | [Einen Vorschaubereich in Schleife abspielen](/de/bannerify/animation/previewing-animations#loop-a-work-area) und [benannte Marker hinzufügen](/de/bannerify/animation/animation-speed-timing#snap-and-organise-your-timeline) |
| **Motion Sequences** | [Abgestimmte Animationen speichern und wiederverwenden](/de/bannerify/animation/animation-speed-timing#save-and-reuse-a-motion-sequence) |
| **Sync Timings** | [Timings zwischen Bannergrößen kopieren](/de/bannerify/animation/animation-speed-timing#synchronise-timings-across-banner-sizes) |

**Snap**, der Ebenenfilter, **Zoom To Selection** und die Steuerelemente zum Einklappen von Gruppen befinden sich unter **Timeline Settings → Timeline Tools**.

## Änderungen prüfen und wiederherstellen {#review-and-restore-edits}

Klick neben den Pfeilen für Rückgängig/Wiederholen auf **History**, um [deine Änderungen an der Zeitleiste durchzusehen](/de/bannerify/animation/undo-redo). Wähle einen Schritt, um zurück- oder vorzuspringen; **Current** kennzeichnet den aktiven Stand. Neue Änderungen, die du nach dem Zurückspringen machst, ersetzen den späteren Verlauf.

## Die Länge der Zeitleiste anpassen {#adjusting-the-timeline-length}

[Video](/assets/videos/bannerify/animation/adjusting-timeline.mp4)

Öffne **Timeline Settings → General**, wähle unter **Total Timeline Length** eine Dauer und klick dann auf **Update Timeline Length**. Die verfügbaren Längen reichen von 1 Sekunde bis 3 Minuten. Die Änderung gilt für alle deine Banner; Timing-Bereiche, die über eine kürzere Zeitleiste hinausgehen, werden passend angepasst.

Mit **Undo** stellst du die vorherige Länge und die Timings wieder her, oder du wählst unter **History** einen früheren Schritt. Siehe [Die Länge der Zeitleiste anpassen](/de/bannerify/animation/timeline-length).

## Ausgangsanimationen hinzufügen {#adding-exit-animations}

[Video](/assets/videos/bannerify/animation/exit-animation.mp4)

**Ausgangsanimationen** fügst du genauso hinzu wie Eingangsanimationen. Statt auf das obere Auswahlfeld klickst du auf das **untere Auswahlfeld**, um eine Ausgangsanimation für deine Ebene zu wählen.

> **Note:** Achte darauf, dass jede Ausgangsanimation einer Ebene **erst _nach_ dem Ende der Eingangsanimation beginnt**. Sonst überschneiden sich beide Animationen und erzeugen gleichzeitig widersprüchliche Übergänge.

## Geschwindigkeit und Timing von Animationen anpassen {#adjusting-animation-speeds-and-timings}

[Video](/assets/videos/bannerify/animation/adjust-speed.mp4)

Geschwindigkeit und Verzögerung deiner Animationen passt du an, indem du auf den linken oder rechten **Rand** des Zeitleistenbalkens deiner Ebene **klickst** und ihn mit gedrückter Maustaste **ziehst**. So änderst du die Länge der Animation und ihren Start- bzw. Endpunkt.

Die Position deiner Animation auf der Zeitleiste verschiebst du, indem du in die **Mitte** des Zeitleistenbalkens deiner Ebene **klickst** und ihn mit gedrückter Maustaste nach links oder rechts **ziehst**, um festzulegen, wo die Animation in der Zeitleiste liegt.

> **Tip:** **Gib genaue Timing-Werte mit der Tastatur ein.** Wenn du den Timing-Balken lieber nicht nutzen willst, kannst du Geschwindigkeit und Verzögerung auch festlegen, indem du auf den zweiten Wert in deiner Zeitleisten-Ebene klickst und mit der Tastatur eine neue Zahl eingibst (zum Beispiel *1.5*), um die Anzahl der Sekunden festzulegen.

## Animationen in Schleife abspielen {#looping-animations}

[Video](/assets/videos/bannerify/animation/loop-animation.mp4)

Soll sich eine Animation auf einer bestimmten Ebene endlos wiederholen (auch nachdem die Zeitleiste des Banners zu Ende ist), aktiviere den Schalter **Loop** neben der ausgewählten Animation. Das ist praktisch für sehr kurze Animationen, die sich für eine Wiedergabe in Schleife eignen (zum Beispiel „Heartbeat“, „Flicker“ oder „Pulse“).

## Animationen kopieren und einfügen {#copy-pasting-animations}

[Video](/assets/videos/bannerify/animation/copy-paste.mp4)

Mit den Buttons **Copy** und **Paste** kopierst du eine Animation schnell von einer Ebene der Zeitleiste auf eine andere. Ein Klick auf **Copy** kopiert die Animation, die du dann mit einem Klick auf **Paste** bei jeder anderen Ebene einfügen kannst.

> **Tip:** **Eine kopierte Animation in mehrere Ebenen einfügen:** Du kannst eine kopierte Animation auch [gleichzeitig auf mehrere Ebenen anwenden](/de/bannerify/animation/animating-banners#applying-bulk-animations).

## Animationen auf mehrere Ebenen anwenden {#applying-bulk-animations}

[Video](/assets/videos/bannerify/animation/bulk-animations.mp4)

Um eine Animation schnell auf mehrere Ebenen gleichzeitig anzuwenden, wähle Ebenen über die Kontrollkästchen neben den Ebenennamen aus (oder nutze die Funktion **Quick Select Layers**) und leg die Animation dann im aufklappenden Bereich unten im Plugin-Fenster fest. Wenn dir die Animation gefällt, klick auf den Button **Apply Animations to Selected Layers**, um die neue Animation auf alle ausgewählten Ebenen anzuwenden.

## Ähnliche Ebenen schnell auswählen {#quick-selecting-similar-layers}

[Video](/assets/videos/bannerify/animation/quick-select.mp4)

Arbeitest du mit einem Banner-Set, dessen Banner dieselben Elemente oder Ebenen enthalten, kannst du mit dem Menü **Quick Select Layers** im Kopfbereich von Bannerify ähnliche Ebenen in allen Bannern automatisch auswählen. Das ist eine praktische Alternative dazu, jede Ebene einzeln anzuhaken.

> **Tip:** **Beispiel für Quick Select Layers:** Enthalten zum Beispiel alle deine Banner eine Ebene namens **CTA Button**, klick auf diese Option, um automatisch alle Ebenen **CTA Button** anzuhaken. Danach kannst du Animationen für diese Ebene in allen Bannern **gleichzeitig anwenden**.

## Magic Delays und Magic Speeds nutzen {#using-magic-delays-and-magic-speeds}

[Video](/assets/videos/bannerify/animation/magic-timeline.mp4)

Öffne **Timeline Settings → General** und wähle einen Wert unter **Magic Delays** oder **Magic Speeds**. Klick auf **Apply To All Entry Animations** oder **Apply To All Exit Animations**, um ihn auf alle deine Banner anzuwenden.

### Magic Delays {#magic-delays}

Wähle eine gestaffelte Verzögerung von 0,1 bis 0,5 Sekunden. Die Ebenen erhalten aufeinanderfolgende Verzögerungen und behalten dabei ihre Animationsdauer.

### Magic Speeds {#magic-speeds}

Wähle eine Dauer von 0,1 bis 1 Sekunde. Die Startzeiten bleiben gleich, außer sie müssen nach vorn rücken, damit die Animation in die Zeitleiste passt.

Jede Anwendung ist ein Schritt im Verlauf. Mit **Undo**, **Redo** oder dem Panel **History** wechselst du zwischen den Änderungen. Siehe [Magic Delays und Magic Speeds](/de/bannerify/animation/magic-delays-speeds).