Zum Inhalt springen
DE

6 Interaktionen · 300 Icons

Interaktionen der animierten Icons

Jedes Icon kommt mit der Mikrointeraktion, für die es gestaltet wurde: Es läuft in Schleife, schaltet um, spielt per Klick erneut ab oder reagiert auf Hover. Die React-Komponente verdrahtet das, berücksichtigt reduzierte Bewegung, und mit dem Prop interaction wechselt jedes Icon zu einer anderen Interaktion.

Die passende Interaktion wählen

  • Ein andauernder Zustand wie Laden oder eine aktive Warnung: Loop.
  • Ein Ein-/Aus-Schalter wie Stummschalten, Menü oder Passwort anzeigen: Klick-Toggle, mit active für kontrollierten State.
  • Eine einmalige Aktion wie Senden, Speichern oder Aktualisieren: Klick-Replay.
  • Ein Hinweis darauf, was ein Link öffnet: Hover, das beim Verlassen rückwärts läuft.
  • Toolbars und Listen, über die man schnell hinwegfährt: Hover-Replay, das von selbst zu Ende läuft.
  • Links, die zu einem längeren Blick einladen, etwa Social-Icons: Hover-Loop.

Reduzierte Bewegung

Die React-Komponente richtet sich nach prefers-reduced-motion und reagiert, sobald sich die Einstellung ändert. Tippen auf Touchscreens startet nie eine Hover-Animation.

  • loop: Das Icon startet nicht automatisch und bleibt auf seinem statischen ersten Frame.
  • click-toggle: Ein Klick wechselt sofort in den anderen Zustand, ohne die Animation dazwischen.
  • click-replay: Klicks erreichen weiterhin Ihren Handler, die Animation spielt aber nicht ab.
  • hover: Hover spielt die Animation nicht ab.
  • hover-replay: Hover spielt die Animation nicht ab.
  • hover-loop: Das Icon bleibt auch bei Hover statisch.