Kreis der Mauszeiger verfolgt – Webflow Tutorial

Level: Fortgeschritten
Animation
Details
Level
Fortgeschritten
Datum
July 12, 2026
Autor
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

Next-Level 3D Buchstaben-Animation in Webflow (NEUER GSAP Ease Visualizer)

Lerne, wie du eine 3D Bühnen-Animation in Webflow mit GSAP, Bounce Easing, Split Text und modernem Apple-like Motion Design baust.
Video
Kategorie
Animation
Skill
Fortgeschritten

Anschauen
Beitrag anschauen

Webflow CMS: Stagger Animation jedes Items pro Grid Row

Animier Webflow CMS Collection List Items nacheinander beim Scrollen mit Set Class + CSS nth-child Delays, inkl. Reduced Motion und Designer-Tipp.
Video
Kategorie
Animation
Skill
Einfach

Anschauen
Beitrag anschauen

Website Preloader mit der neuen Webflow GSAP Events Funktion

Wie du mit der neuen GSAP Timeline in Webflow über einen Event Trigger eine komplett eigene Loading Animation erstellst und diese in Custom JS Code abfeuern kannst.
Video
Kategorie
Animation

Anschauen
Beitrag anschauen

Scroll-basierte 3D-Globus-Animation aus Webflow (CSS & GSAP)

Baue eine 3D-Globus Scroll Animation direkt in Webflow mit der neuen GSAP Timeline: preserve-3d, Sticky Section, Lines-Trick & Text Reveal.
Video
Kategorie
Animation
Skill
Fortgeschritten

Anschauen
Beitrag anschauen

Typografie-Meisterwerk in Webflow gebaut: Mit Swiper JS und GSAP | Deep Dive

Ich zeige dir, wie ich eine komplexe Kursseite für Oliver Gareis mit Webflow gebaut habe – inkl. Slider, CMS, Animationen & anspruchsvoller Typografie-Layouts.
Video
Kategorie
Animation
Skill
Einfach

Anschauen
Beitrag anschauen

Navigation beim Scrollen transformieren: von zentriert zu sticky links | Webflow GSAP Animation

Lerne in diesem Tutorial, wie du eine zentrierte Navigation mit Stagger Effekt in Webflow und GSAP umsetzt – inspiriert vom Shopify Winter Edition Design.
Video
Kategorie
Animation
Skill
Fortgeschritten

Anschauen
Beitrag anschauen