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

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

Du kannst jeder Ebene in deiner Zeitleiste einen Hover-Animationszustand (für HTML-Exporte) hinzufügen, indem du den Schalter Add Hover aktivierst und dann im eingeblendeten Dropdown-Menü eine Hover-Animation auswählst. Mit dem Schalter Loop lässt du die Animation wiederholen, und die Geschwindigkeit der Hover-Animation passt du an, indem du das Ende ihres Hover-Timing-Balkens ziehst.

Um zu sehen, wie die Animation aussieht, fahr im Vorschaufenster von Bannerify mit der Maus über die Ebene.

Eine Hover-Animation auf mehrere Ebenen anwenden: Du kannst eine Hover-Animation auch gleichzeitig auf mehrere Ebenen anwenden.

Hover-Zustände mit Übergang hinzufügen

Möchtest du zwischen zwei verschiedenen Zuständen wechseln (zum Beispiel beim Hover über einen CTA-Button die Farben ändern), erstellst du eine eigene Ebene für den „Hover“-Zustand, legst sie über deine ursprüngliche Ebene und wendest den Eingangs-Hover-Zustand an. So wird sie eingeblendet, sobald jemand mit der Maus über das Element fährt.