Das Easing der Animation festlegen

Wähle Easing-Kurven, um das Timing deiner eigenen Animationen zu steuern.

Video-Tutorial: Eigene Animationen zu deinen Banner-Designs in Figma hinzufügen

Dieses Video zeigt, wie du mit dem Bannerify-Plugin eigene Keyframe-Animationen zu deinen Bannern hinzufügst.

Welches Easing deine Animation haben soll, legst du über eine Option im Menü Easing fest. Das Easing gilt automatisch für deine gesamte Zeitleiste und aktualisiert den Bereich Live preview, sodass du siehst, wie das gewählte Easing die Bewegung deiner Keyframe-Animation verändert.

Folgende Easing-Optionen stehen zur Auswahl:

  • Ease (Standard)
  • Ease out
  • Ease in
  • In and out
  • Linear
  • Gentle
  • Overshoot
  • Anticipate

Einen eigenen Cubic-Bezier-Wert für das Easing festlegen ​

Video-Tutorial: Cubic-Bezier-Easing zu Banner-Animationen in Figma hinzufügen

Dieses Video zeigt, wie du mit dem Bannerify-Plugin eigenes Cubic-Bezier-Easing zu Banner-Animationen in Figma hinzufügst.

Für eine eigene Kurve ziehst du die Anfasser der Kurve im Menü Easing oder fügst einen gültigen CSS-cubic-bezier-Wert (zum Beispiel cubic-bezier(0.65,0.05,0.36,1);) in das Feld unter den Presets ein. Eine eigene Cubic-Bezier-Kurve kannst du mit einer Website wie https://easings.co/ oder einem anderen Dienst deiner Wahl erzeugen, der dir hilft, eigene CSS-cubic-bezier-Kurven zu erstellen.