Kreis der Mauszeiger verfolgt – Webflow Tutorial

Level: Fortgeschritten
Animation
Vorschaubild zum Beitrag: Kreis der Mauszeiger verfolgt
Details
Level
Fortgeschritten
Datum
August 19, 2026
Autor
Lächelnder Mann mit kurzem braunem Haar und Bart vor orangem Hintergrund.
Jonas Arleth
Blog Post

In diesem Webdesign Tutorial zeige ich dir, wie du einen Kreis oder in meinem Fall einen Licht-Effekt mit einem Verlauf erstellen kannst, der in einem bestimmten Bereich den Cursor / Mauszeiger verfolgt.

Ich habe die Interaktion ganz dezent im Hintergrund in meiner Preistabelle integriert. Im Tutorial selber sind so komische Kreis-Artefakte zu sehen, die sind in echt natürlich nicht da. Das hat sich durch die Bildschirmaufnahme reingeschlichen.

Kleine Details machen eine Website besonders und heben sie vor allem von vielen anderen „normalen” Website-Templates ab. Mit Webflow kannst du wunderbar viele Effekte sehr einfach und schnell in deiner Website umsetzen. Und wenn du nicht das CMS von Webflow nutzen möchtest, sogar einfach mit einem Klick den Code exportieren und z.B. in dein Wordpress Projekt einbinden.

‍

Kapitel

00:00 – Intro
01:04 – Licht-Spot Effekt anlegen
06:07 – Problem des Effekts
06:54 – Lösung für das Problem
10:45 – Geschwindigkeit des Effekts optimieren
13:52 – Endergebnis
13:59 – Webflow Online-Kurs


Mehr Content

Blog Archiv

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
​
Kategorie
AI
Skill
Einfach

Anschauen
Beitrag anschauen

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
​
Kategorie
GSAP
Skill
Einfach

Anschauen
Beitrag anschauen

Kreative GSAP Hero Animation mit einem 3D Card Loop-Effekt

Lerne Schritt für Schritt, wie du in Webflow mit GSAP eine premium Hero Section animierst, inklusive Scroll Trigger, Stagger und Loop Effekt.
Video
​
Kategorie
Animation
Skill
Fortgeschritten

Anschauen
Beitrag anschauen

Webflow Text-Marquee-Animation mit der neuen GSAP Timeline

Lerne, wie du eine loopende Marquee in Webflow mit der GSAP Timeline baust. Ohne Custom Code scroll-getriggert und performance-freundlich.
Video
​
Kategorie
GSAP
Skill
Einfach

Anschauen
Beitrag anschauen

360° Produkt-Hero in Webflow ohne 3D

Baue einen 360° rotierenden Produkt-Hero in Webflow mit KI-generiertem Video, Blend Modes und Container Queries. Kostenloses Cloneable inklusive.
Video
​
Kategorie
Animation
Skill
Einfach

Anschauen
Beitrag anschauen

Dieser GSAP Scroll-Effekt macht jede Hero Section hochwertig

Baue einen hochwertigen GSAP Hero Scroll-Effekt in Webflow. Lerne Skalierung, Parallax und Stagger-Animationen Schritt für Schritt kostenloses Cloneable inklusive.
Video
​
Kategorie
GSAP
Skill
Einfach

Anschauen
Beitrag anschauen