Badge mit Text im Kreis erstellen und animieren – Webflow Tutorial

Level: Einfach

Animation

Vorschaubild zum Beitrag: Badge mit Text im Kreis erstellen und animieren

ressourcen

* AFFILIATE LINK

Details

Level

Einfach

Datum

August 19, 2026

Autor

Lächelnder Mann mit kurzem braunem Haar und Bart vor orangem Hintergrund.

Jonas Arleth

Share

Blog Post

Texte lassen sich in Webflow auch im Kreis animieren, was man immer häufiger bei Websites sieht. In diesem Tutorial zeige ich dir meinen Prozess so einen Text-Badge in Sketch zu erstellen, exportieren und mit Webflow zu bauen und zu animieren. Ich habe genau das bei einem Kundenauftrag gebraucht und bin mit dem Design-Programm Sketch auf ein paar Hürden gestoßen, weshalb ich dir meine Erfahrungen gerne weitergeben möchte.

Mehr Content

Meine bisher schwierigste Animation für Claude Code

Schafft Claude Code einen Infinite Slider mit nahtlosem FLIP Übergang ins Overlay? Mein Test mit GSAP, Smooothy und einem eigenen Figma Design.

Video

Skill

Einfach

Kategorie

AI

Ich habe ein Layout in Figma gestaltet. Kann Claude es bauen?

Ich habe eine Website in Figma designt und Claude nur einen Screenshot, Fonts, Bilder und einen Prompt gegeben. So nah kommt AI an ein individuelles animiertes Design.

Video

Skill

Einfach

Kategorie

AI

Mit diesem GSAP-Effekt wird jede Liste zum Hingucker – Webflow Tutorial

Baue eine einfache Typografie Scroll Animation in Webflow mit GSAP. Namen skalieren in der Mitte und animierte Klammern erscheinen, gesteuert über das CMS.

Video

Skill

Einfach

Kategorie

GSAP