Animation

Spring easing toggle

Eine Kachel, die zwischen zwei Stopps auf einer Federkurve gleitet, die in einen einfachen CSS-Übergang eingebettet ist, wobei die generierte Kurve daneben dargestellt wird.

Spring easing toggle verwenden

Eine Kachel, die zwischen zwei Stopps auf einer Federkurve gleitet, die in einen einfachen CSS-Übergang eingebettet ist, wobei die generierte Kurve daneben dargestellt wird.

Teste die Vorschau mit Maus und Tastatur. Prüfe den sichtbaren Fokus und das Layout auf schmalen Bildschirmen in deiner eigenen Seite. Nenne deinem Agenten die Nummer oder den Bezeichner, um diese Komponente abzurufen.

Eigenschaften: bounce, duration, accent, showCurve, spin

Welche Frameworks sind verfügbar?

Der Katalog enthält diese Versionen: react, vue, svelte, astro, html. Die Vorschau auf dieser Seite verwendet React.

Wie greife ich auf die Implementierung zu?

Code, Framework-Versionen und Installationsbefehle sind im Arbeitsbereich oben verfügbar.

Verbinde deinen Agenten

Ähnliche Komponenten

Easing preview tile

1772Easing preview tileAnimationEine Kachel, die unter jeder von Ihnen ausgewählten Beschleunigungskurve die gleiche Skalierung abspielt, wobei die Kurve daneben gezeichnet wird und eine Markierung synchron darauf verläuft.

Entrance timing playground

1773Entrance timing playgroundAnimationEine Disc spielt auf Abruf den gleichen Eingangszug ab, sodass Sie genau spüren können, welchen Beitrag Dauer, Verzögerung und Entspannungskurve jeweils leisten.

Composable Reveal

1676Composable RevealAnimationEin Reveal-Wrapper, dessen Schiebe-, Fade-, Zoom- und Defokussierungsteile jeweils eingeschaltet und zu einem einzigen Federübergang kombiniert werden können.

Spring tuner

1810Spring tunerAnimationEine Kachel, die zwischen zwei Zuständen hin- und herspringt, während eine Live-Kurve ihre Überschreitung aufzeichnet, sodass Steifheit, Dämpfung und Masse gleichzeitig gefühlt und abgelesen werden können.

Swap timing modes

1814Swap timing modesAnimationDrei Abzeichen tauschen dasselbe Symbolpaar nebeneinander unter drei unterschiedlichen Ausgangsregeln aus, sodass überlappende, aufeinanderfolgende und Out-of-Flow-Entfernungen auf einen Blick verglichen werden können.

Bobble tile grid

1763Bobble tile gridAnimationEin Gitter aus farbigen Kacheln, die auf einer Feder vom Zeiger wegbewegen und umso stärker abprallen, je schneller der Zeiger darüber gleitet.