Webflow GSAP Interactions Masterclass

Meistere Website-Animationen und Motion Design mit der neuen GSAP Timeline in Webflow.

Zugang sichern

Der einzige Webflow GSAP Kurs auf Deutsch

Mit Webflow Experte
Jonas Arleth

Die Zukunft von Webflow Animationen

Neu 2025
Online Course
23 Videos

Diese Masterclass ist ein spezialisierter Deep-Dive-Kurs, der dich Schritt für Schritt in das neue Animationssystem einführt. Kompakt, fokussiert und sofort umsetzbar.

Kein langes Bla-Bla, sondern pure Praxis.

Wir animieren gemeinsam ein modernes Studio-Layout mit lebendigem Motion Design, das nicht nur technisch, sondern visuell überzeugt.

Du siehst, wie Design und Bewegung eins werden, direkt visuell im Webflow Interface – Ohne Coding-Skills.

4
Kapitel
23
Lektionen
3+
Stunden an Videos

Das lernst du in diesem Kurs

  • Komplexe Motion-Sequenzen mit der neuen GSAP Timeline
  • Worauf es bei Easing, Timing & Flow wirklich ankommt
  • Scroll-, Hover- & Click-Animationen mit Stagger-Effekten
  • Globale Motion-Systeme über Attribute & Scopes
  • Page Loads & Transitions mit professionellem Motion Design
  • Ergebnisse, die aussehen wie aus einem Award-Winning Studio

Nach dem Kurs wirst du …

  • Animationen mit System statt Zufall gestalten.
  • Strukturiert mit der neuen GSAP Timeline in Webflow arbeiten.
  • Mit GSAP deutlich schneller und effizienter arbeiten als mit den alten Webflow Interactions.
  • Bewegung gezielt einsetzen, um Design und User Experience zu verstärken.
  • Interaktionen entwickeln, die Performance und Ästhetik vereinen.
  • Animationen erschaffen, die sich flüssig, modern und hochwertig anfühlen.

Liste der Kursinhalte und Videos

Grundlagen

  1. Warum Webflow jetzt GSAP integriert und was das für dich bedeutet
  2. Was professionelle Website-Animationen ausmachen
  3. Konflikte vermeiden: Classic & neue GSAP Interactions zusammen nutzen oder trennen?

Core-Animations

  1. Wie GSAP in Webflow funktioniert – das schnelle Orientierungs-Video
  2. Alles zu Stagger-Animationen für Headlines und Texte
  3. Globale Animationen mit Attributen umsetzen
  4. Abgeschnittene Buchstaben bei Mask-Split-Text beheben
  5. Alles Wichtige zu Hover-Interaktionen
  6. Klick-Interaktionen am Beispiel eines Accordions (Öffnen & Schließen)
  7. Content während des Scrollens animieren
  8. Looping Animationen und Timing beherrschen
  9. Native Webflow-Navigation mit GSAP animieren (Öffnen und Schließen)

Pro-Techniques

  1. Fortgeschrittener Button-Hover-Effekt
  2. Meisterhafte Page-Load-Animationen mit der neuen GSAP Timeline
  3. Scope Descendants mit CSS Superpower
  4. Layered Multi-Stage Hero Reveal Scroll Animation
  5. Page Transitions animieren (2 Varianten)
  6. Unterschätztes addClass Feature: Elemente per Klasse in jeden Zustand schalten
  7. Custom JS Events – Animationen im Code triggern mit Preloader Beispiel
  8. Native Slider und Tab-Komponenten animieren (YouTube Video)
  9. Fortgeschrittene maskierte Hero-Scroll-Animation

Optimierungen

  1. Flackern beim Seitenladen verhindern
  2. Responsive Design und Barrierefreiheit von GSAP Animationen
Nutze die im Kurs erstellte Webflow-Vorlage frei für deine Kundenprojekte.
Optional Figma Design-Datei im Checkout als Download wählen
Über die Kommentarfunktion im Kurs kann ich dir bei Fragen direkt weiterhelfen

Tools, mit denen wir im Kurs arbeiten

Webflow
GSAP Animations
Figma
Frank
GSAP in Webflow endlich verstanden

Jonas’ Kurs kam genau zum richtigen Zeitpunkt, denn ich wollte endlich meine eigene Website neu gestalten – mit coolen Interaktionen. Mit Jonas erklärt endlich mal jemand ausführlich und nachvollziehbar, wie das neue GSAP in Webflow funktioniert. Zuvor habe ich online meist nur kurze, unvollständige Videos gefunden, die mir nicht wirklich weitergeholfen haben. Dank des Kurses habe ich jetzt einen hervorragenden Überblick über die Funktionsweise und kann es kaum erwarten, mich an die erste echte Umsetzung zu wagen. Danke, Jonas, für deine Geduld, deinen Sinn für Gestaltung und deinen Fokus auf Details!

Frank
Gafikdesigner, Webflow Developer
Ralf
Von After Effects zu GSAP mit Webflow

Ich habe gerade die GSAP Masterclass abgeschlossen und bin äußerst zufrieden mit der Qualität dieses Kurses. Die detaillierten Erklärungen zu den GSAP-Tools und dazu, wie man sie in der neuen horizontalen Timeline anwendet, waren für mich extrem hilfreich. Als jemand, der ursprünglich aus dem Motion Design mit Adobe After Effects kommt, hatte ich bisher Schwierigkeiten, komplexe Animationen mit den nativen Webflow-Funktionen umzusetzen. Die Workflows empfand ich oft als wenig intuitiv und schwer überschaubar. Durch Jonas’ hervorragend aufbereiteten GSAP-Kurs hat sich das grundlegend geändert. Bereits nach den ersten vier bis fünf Lektionen war ich in der Lage, deutlich schneller anspruchsvollere und qualitativ hochwertigere Animationen zu erstellen. Jonas vermittelt die Inhalte anhand realer Use Cases und taucht dabei tief in die Funktionsweise der einzelnen Tools ein. Die Videos enthalten eine Vielzahl konkreter Tipps und bewährter Workflows, die ich bereits jetzt in meine bestehenden Projekte integriere.

Ralf
Webdesigner

Dein Upgrade für Webflow.

Mit der neuen GSAP Timeline steuerst du Animationen wie ein Motion Designer – direkt im Interface und ohne coding.

Webflow GSAP Interactions Masterclass
Webflow GSAP Interactions Masterclass
German Flag
Deutsch
  • 25 praxisnahe Video-Lektionen (3 Stunden komprimiertes Wissen)
  • Lebenslanger Zugang inklusive Updates
  • Webflow-Projektvorlage mit allen Animationen für deine Kundenprojekte
  • Fragen & Probleme direkt per Chat klären
  • Optional: Figma-Vorlage im Checkout hinzufügen
  • Abschlusszertifikat
199
299
Oder 3 Raten von nur 72
Bundles

Spare 30 % auf jeden weiteren Kurs

Webflow Komplettkurs
Webflow Komplettkurs
German Flag
Deutsch
Bundle-Deal  -30%
  • 16+ Stunden an Videomaterial
  • Lebenslanger Zugang und Updates
  • Website Launch Checkliste
  • Webflow Projektvorlage mit allem was wir bauen
  • Abschlusszertifikat
350
499
Oder 3 Raten von nur 129
Webflow Profi-Kurs
Webflow Profi-Kurs
German Flag
Deutsch
Bundle-Deal  -30%
  • 10+ Stunden an Videomaterial
  • Lebenslanger Zugang und Updates
  • Figma Designvorlage
  • Webflow Projektvorlage mit allem was wir bauen
  • Abschlusszertifikat
315
449
Oder 3 Raten von nur 116
Webdesign Angebote mit 3 Preisoptionen erstellen
Webdesign Angebote mit 3 Preisoptionen erstellen
German Flag
Deutsch
Bundle-Deal  -30%
  • 10-seitige Vorlage, die du in Pages oder Word bearbeiten kannst
  • 3 echte Angebote von mir:
    Ein 50.000€ Auftrag, 16.000€ Auftrag und 6.000€ Auftrag
  • 25 erklärende Videos
  • Inklusive Bedingungen und rechtlicher Absicherung (von einer Anwältin geprüft)
  • Bonusmaterial
252
359
Oder 3 Raten von nur 93
Haupt-produkt
Webflow GSAP Interactions Masterclass

Webflow GSAP Interactions Masterclass

German Flag
Deutsch
199
299
Webflow GSAP Interactions Masterclass

Webflow GSAP Interactions Masterclass

-30% Bundle-Rabatt
German Flag
Deutsch
140
199
Webflow Profi-Kurs

Webflow Profi-Kurs

-30% Bundle-Rabatt
German Flag
Deutsch
315
449
Webflow Trick-Kiste

Webflow Trick-Kiste

-30% Bundle-Rabatt
German Flag
Deutsch
49
49
Webdesign Angebote mit 3 Preisoptionen erstellen

Webdesign Angebote mit 3 Preisoptionen erstellen

-30% Bundle-Rabatt
German Flag
Deutsch
252
359
Webflow Komplettkurs

Webflow Komplettkurs

-30% Bundle-Rabatt
German Flag
Deutsch
350
499
Hol dir 30 % Rabatt auf zusätzliche Kurse
Gesamt
399
000
Ratenzahlung möglich.
Steuern werden beim Checkout berechnet.
Checkout
🔒 Sicher bezahlen mit Kreditkarte, PayPal & mehr
💡 14 Tage Geld-zurück-Garantie
Alle Preise inklusive 19% Umsatzsteuer. Du erhältst eine Rechnung, die du als Werbungskosten in deiner Steuererklärung absetzen kannst (Fortbildungskosten).
Johannes
Frank
Ralf
Vlad Cîrneală
Christian B.
Tom
Syed
+00
Mehr als 00 Personen nutzen Kurse von Formburg für ihre Weiterbildung. Rückmeldungen lesen.

Schüler oder Student?

Erhalte 25% Rabatt.
Bitte sende dazu einfach eine Mail mit der Info, wie dein Studiengang bzw. deine Ausbildung heißt und auf welche Schule du gehst an:

FAQ

Häufige Fragen zum Onlinekurs

Sind alle zukünftigen neuen Inhalte kostenlos inklusive?

Mit dem Kauf des Kurses erhältst du lebenslangen Zugang – inklusive aller bisherigen Inhalte sowie sämtlicher zukünftiger Updates und neuer Module. Einmal zahlen, alles inklusive: Es entstehen keine zusätzlichen Kosten für dich.

Gibt es einen Weg mit Jonas zu sprechen, wenn ich irgendwo nicht weiter komme?

Während des Online Kurses kannst du zu jederzeit die Kommentarfunktion nutzen, die unter jeder Lektion integriert ist. Darauf werde ich einmal pro Woche antworten. Taucht darüber hinaus ein Problem auf oder du kommst irgendwo gar nicht mehr weiter, kannst du mich auch direkt über den Chat kontaktieren.

Gibt es ein Abschlusszertifikat?

Du kannst ein Abschluss-Zertifikat mit deinem Namen als PDF von mir bekommen, sobald du 80% des Kurses abgeschlossen hast.
Für das Zertifikat musst du mich kontaktieren mit dem Namen, der auf das Zertifikat soll und deiner Bestellnummer. Dann werde ich deinen Fortschritt überprüfen.

Wie lange habe ich Zugang zu diesem Kurs?

Lebenslang! Du erhältst sogar kostenlos alle Updates und Lern-Module, die ich zukünftig  hinzufügen werde.

Bekomme ich mein Geld zurück, wenn mir der Kurs nicht gefällt?

Ja, es gibt eine 14 Tage Geld-Zurück-Garantie.