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.

Ist ein Balken zu schmal, um ihn bequem zu greifen, fahr mit der Maus darüber oder fokussiere ihn mit der Tastatur: Bei Balken mit 28px Breite oder weniger erscheinen dann runde Anfasser links und rechts und ein kleiner Verschiebegriff unter dem Balken. Zieh an einem Punkt, um diesen Rand anzupassen, oder am unteren Griff, um die Animation zu verschieben. Die Steuerelemente haben größere Greifflächen und bleiben innerhalb der Zeitleistenspalte. Balken für die Hover-Dauer zeigen nur den rechten Anfasser. Diese Steuerelemente nutzen dasselbe Einrasten, dieselben Tastenkürzel und denselben Verlauf zum Rückgängigmachen wie der normale Balken.

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.

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.

Timings mehrerer Ebenen anpassen

Wähle zwei oder mehr Ebenen aus und zieh dann den Timing-Balken für Eingang, Ausgang oder Hover einer der ausgewählten Ebenen. Bannerify überträgt dieselbe Bewegung auf die passende aktive Timing-Spur der anderen ausgewählten Ebenen und behält dabei ihre relativen Versätze bei.

Erreicht das früheste oder späteste ausgewählte Timing den Rand der Zeitleiste, stoppt Bannerify die Gruppe an dieser Grenze. Gesperrte Ebenen, inaktive Timing-Spuren und Eingangs-Timings, die von gespiegelten Figma-Motion-Animationen gesteuert werden, bleiben unverändert.

Jeder abgeschlossene Ziehvorgang wird als ein Schritt im Verlauf gespeichert, den du rückgängig machen kannst.

In der Zeitleiste zoomen und scrollen

Mit den Buttons + und − oder dem Zoom-Schieberegler über der Ebenenliste siehst du mehr oder weniger Details. Der Prozentwert neben dem Schieberegler zeigt die aktuelle Zoomstufe. Klick auf Fit, um zu 100 % zurückzukehren und wieder die gesamte Zeitleiste zu sehen. Zoomen ändert nur die Ansicht, nicht die Timings der Animationen oder die exportierte Dauer.

Zieh zwei Finger auf dem Trackpad zusammen oder auseinander, während der Mauszeiger über dem Lineal oder den Timing-Spuren liegt. Der Zeitpunkt unter dem Mauszeiger bleibt beim Zoomen verankert, innerhalb des Zoombereichs von 100–1000 %. Die Zwei-Finger-Geste ändert nur die Ansicht und wird ignoriert, während du einen Timing-Balken ziehst. Du kannst auch Ctrl gedrückt halten und mit dem Mausrad scrollen.

Im vergrößerten Zustand klickst du direkt unter dem Lineal auf den abgerundeten blauen Scrollbalken, hältst ihn gedrückt und ziehst ihn nach links oder rechts, um dich entlang der Zeitleiste zu bewegen. Der Anfasser wird beim Darüberfahren und beim Drücken hervorgehoben. Du kannst auch mit dem Trackpad horizontal scrollen oder Shift gedrückt halten, während du über einer Timing-Spur scrollst. Lineal und Timing-Balken bleiben über alle Banner hinweg ausgerichtet.

Eingangs- und Ausgangsbalken zeigen, wie lange die jeweilige Animation abgespielt wird. Das Ende eines Eingangsbalkens markiert, wann der Eingang abgeschlossen ist; die Ebene kann danach sichtbar bleiben. Hover-Balken steuern die Hover-Dauer, ihr Start ist fest.

Balken mit der Tastatur anpassen

Fokussiere einen Balken oder einen seiner Randanfasser und verschiebe ihn dann mit den Pfeiltasten in Schritten von 0,1 Sekunden. Halte Shift gedrückt für Schritte von 1 Sekunde. Beim Verschieben eines Balkens bleibt seine Dauer erhalten; beim Verschieben eines Rands ändert sich sein Start oder Ende.

Drück während eines Ziehvorgangs Escape, um die Timings von vor dem Ziehen wiederherzustellen, einschließlich aller ausgewählten Ebenen, die sich mitbewegen. Szenenbalken verschieben die bearbeitbaren Animationen der Szene gemeinsam und behalten dabei ihre jeweilige Dauer bei.

Die Zeitleiste einrasten lassen und organisieren

Öffne Timeline Settings → Timeline Tools und aktiviere Snap, damit gezogene Eingangs- und Ausgangsbalken, Szenenbalken und ihre bearbeitbaren Ränder am Abspielkopf, an Markern, an den Grenzen des Arbeitsbereichs und an nahen Animationsrändern einrasten. Halte beim Ziehen Alt (unter macOS Option) gedrückt, um das Einrasten zu umgehen. Eine Hilfslinie zeigt die Ausrichtung. Das Einrasten richtet sich nach der aktuellen Zoomstufe; zoom also hinein, wenn du feiner anpassen willst.

Im selben Tab blendest du mit dem Ebenenfilter All Layers, Selected Layers oder Animated Layers ein. Der Filter ändert nur die Liste in der Zeitleiste; ausgeblendete Zeilen werden trotzdem normal abgespielt und exportiert. Im selben Einstellungs-Panel klappt Collapse Groups die Ebenenlisten der Szenen ein, und Expand Groups öffnet sie wieder. Wähle Ebenen aus und klick auf Zoom To Selection, um ihre aktiven Timing-Bereiche einzupassen, bis zur Zoomgrenze von 1000 %.

Öffne Timeline Settings → Timeline Tools, um am Abspielkopf einen benannten Marker hinzuzufügen. Gib einen Marker Name ein und klick auf Add At Playhead. Klick auf eine Marker-Raute im Lineal oder auf ihre Zeit im Panel, um dorthin zu springen. Im Panel kannst du Marker umbenennen oder entfernen. Marker bleiben für die aktuelle Bearbeitungssitzung erhalten und wirken sich nicht auf exportierte Animationen aus.

Eine Bewegungssequenz speichern und wiederverwenden

Eine Bewegungssequenz speichert die aufeinander abgestimmten Eingangs-, Ausgangs- und Hover-Animationen mehrerer Ebenen. Über explizite Zuordnungen lässt sie sich auch auf anders benannte Ebenen anwenden.

1. Öffne Timeline Settings → Motion Sequences und wähle ein Source Banner.
2. Aktiviere optional Selected Source Layers Only, um nur die ausgewählten Ebenen dieses Banners zu nutzen.
3. Gib einen Namen für die Sequenz ein und klick auf Save Sequence. Gespeicherte Sequenzen liegen in deinen Bannerify-Einstellungen; die Bibliothek fasst bis zu 50 Sequenzen. Beim Speichern wird die neue Sequenz ausgewählt und die vorgeschlagenen Zielzuordnungen werden aktualisiert. Prüfe sie also vor dem Anwenden noch einmal.
4. Wähle die gespeicherte Sequenz und ein oder mehrere Ziel-Banner. Eine gespeicherte Sequenz liefert die Animationen anstelle des Quell-Banners; Selected Source Layers Only gilt, wenn du direkt aus der Quelle erfasst oder anwendest. Du kannst auch direkt aus dem Quell-Banner anwenden, ohne vorher zu speichern.
5. Prüfe die vorgeschlagenen Ebenenzuordnungen. Eindeutig passende Namen werden automatisch eingetragen; bei doppelten oder nicht passenden Namen wählst du selbst eine Zielebene. Entferne den Haken bei einer Zuordnung oder wähle Skip / Choose A Layer, um das Ziel unverändert zu lassen.
6. Gib optional einen Wert unter Offset (Seconds) ein, um die Timings für Eingang und Ausgang zu verschieben. Die Hover-Dauer bleibt vom Versatz unberührt.
7. Das Prüf-Panel erklärt fehlende Quellen, Ziele oder Ebenenzuordnungen. Stimmen die zugeordneten Spuren bereits überein, gibt es nichts anzuwenden. Prüfe die Timings vorher und nachher und klick auf Apply Motion Sequence. Die gesamte Anwendung ist eine einzige Änderung, die du rückgängig machen kannst. Mit Undo, Redo oder dem Panel History springst du zu einem anderen Schritt.

Gesperrte und nicht darstellbare Ebenen sind ausgenommen. Figma-Motion-Spuren bleiben an ihre ursprünglichen Nodes gebunden und werden weder kopiert noch überschrieben. Textspezifische Animationen erfordern Textebenen. Spuren, die über die Zeitleiste hinausreichen würden, werden übersprungen und in der Vorschau gemeldet; Bannerify kürzt sie nicht stillschweigend. Bestehende inaktive Spuren bleiben unverändert, außer die Sequenz liefert ausdrücklich eine Animation für diese Spur.

Um eine gespeicherte Sequenz zu entfernen, wähle sie unter Saved Sequence aus und klick auf das Papierkorbsymbol. Das Entfernen eines Bibliothekseintrags entfernt keine Animationen, die bereits auf deine Banner angewendet sind.

Sequenzen nutzen Animationsdefinitionen, die in Bannerify bereits verfügbar sind, einschließlich deiner bestehenden Bibliothek eigener Animationen. Fehlende eigene Animationen und inkompatible Spuren werden gemeldet und übersprungen. Wie in der Animationsauswahl erfordern Draw-Animationen eine SVG-Ebene und Split Text eine geeignete Textebene. Die reine Timing-Synchronisierung behält die Animation des Ziels bei und unterliegt diesen Einschränkungen der Quellanimation nicht. Sequenzen enthalten weder Artwork noch Definitionen eigener Animationen zur Übertragung auf die Installation eines anderen Nutzers.

Timings über Bannergrößen hinweg synchronisieren

Mit Timeline Settings → Sync Timings kopierst du Timing-Bereiche von einem Quell-Banner auf die entsprechenden Ebenen in anderen geladenen Bannern.

1. Wähle das Quell-Banner und schränke es optional auf ausgewählte Quellebenen ein.
2. Wähle die Ziel-Banner aus und prüfe jede Ebenenzuordnung.
3. Entferne den Haken bei Zuordnungen, die ihre aktuellen Timings behalten sollen. Wähle bei mehrdeutigen oder nicht passenden Ebenennamen ausdrücklich ein Ziel.
4. Prüfe die Timing-Bereiche vorher und nachher und klick dann auf Apply Timing Sync.

Die Timing-Synchronisierung behält die Animationsauswahl, die Schleifeneinstellungen und die übrigen Ebeneneinstellungen jedes Ziels bei. Inaktive Zielspuren, gesperrte Ebenen und Figma-Motion-Spuren werden übersprungen. Jede Anwendung ist eine einzige Änderung, die du im Panel History rückgängig machen kannst. Es handelt sich um eine einmalige Kopie: Spätere Änderungen an der Quelle ändern die Ziele nicht automatisch. Wende die Synchronisierung erneut an, wenn du eine weitere Änderung übernehmen willst.