Typografie-Meisterwerk in Webflow gebaut: Mit Swiper JS und GSAP | Deep Dive
In diesem Webflow Tutorial zeige ich dir ein spannendes Projekt, das ich für Oliver Gareis umgesetzt habe – bekannt durch seine kreativen Typo Monday Designs. Gemeinsam haben wir seine neue Kursseite in Webflow realisiert. Ich gebe dir Einblick in komplexe Layouts, kreative Lösungen mit CMS, Swiper.js, GSAP und nativen Webflow-Funktionen. Außerdem zeige ich dir, wie du elegante Animationen, flexible Komponenten und anspruchsvolle Typografie-Layouts umsetzen kannst. Unten findest du auch einen exklusiven Gutscheincode für Olivers Typografie-Kurs – perfekt, wenn du deine Design-Skills aufs nächste Level bringen willst.
🎁 Mit dem Code FORMBURG erhältst du 15 % Rabatt auf den Kurs von Oliver 👉 https://www.typomonday.com/course
Hinweis: Ich erhalte ggf. eine Provision, wenn du den Code nutzt.
TypoMonday Club Kursseite: Hinter den Kulissen in Webflow
- 00:00 – Einführung & Projektvorstellung
- 01:40 – Bedeutung von Typografie im Webdesign
- 02:20 – Erste Animationen & Slider mit Swiper JS
- 03:30 – Fade-In-Page-Animation & GSAP Setup
- 04:45 – Page Transition mit CSS & Layer-Konzept
- 06:00 – Karussell & GSAP Loop-Animation
- 07:10 – Testimonials & Spaltenüberlappung
- 09:30 – Custom Code & Kind-Element-Steuerung
- 10:27 – Masonry-Ansatz umsetzen & Break Inside Avoid
- 12:50 – Überlappende CMS Galerie & flexible Erweiterung
- 15:12 – Rich Text Listen mit Custom Icons
- 17:34 – Container Queries & responsives Verhalten
- 19:56 – Nativer Slider & Custom JS Erweiterung
- 21:00 – Pricing Tabs & dynamischer Content
- 22:18 – Modalfenster, Komponenten & Custom Code Steuerung
- 23:40 – Newsletter-Formular & Footer-Setup
- 24:30 – Community-Gutschein & Abschluss
Die Umsetzung einer Kursseite für Oliver Gareis – bekannt für seine „TypoMonday Club“-Grafiken – war nicht nur technisch spannend, sondern auch ein perfektes Beispiel dafür, wie Design und Struktur in Webflow aufeinandertreffen.
Projektüberblick: Vom Design zum Webflow-Aufbau
Olivers Kurs richtet sich an Designer, die Typografie gezielt verbessern möchten. Das Design war mutig, ungewöhnlich und fordernd – genau das Richtige für ein technisches Deep Dive-Projekt.
Ich habe das komplette Layout in Webflow umgesetzt und dabei auf Wiederverwendbarkeit und Flexibilität geachtet. Wichtig war mir: Der Kunde kann später selbst Inhalte pflegen oder erweitern.
Swiper.js und GSAP für Slider und Animationen
Ein besonderes Element war der Typo Monday Slider. Mit Swiper.js, CSS-Transforms und GSAP habe ich dafür gesorgt, dass die Slides nicht nur „sliden“, sondern dabei visuell interessant wirken.
Auch die Page Transitions wurden mit einem einfachen Trick umgesetzt: Ein dunkler Layer, der per GSAP ein- und ausgeblendet wird – elegant und performant.
Komplexe Layouts durch clevere CMS-Strukturen
Testimonial-Spalten, sich überlappende Layouts, animierte Cover – all das habe ich mit Collection Lists, Custom Code und CSS gelöst. Besonderes Augenmerk lag auf responsiven Lösungen und der Erweiterbarkeit durch den Kunden selbst.
Komponenten und Rich Text Listen mit Icons
Ein Highlight für Editierbarkeit: Listen, die im Rich Text mit Icons dargestellt werden – professionell, sauber und einfach zu pflegen. Auch das Banner-Element und modale Fenster wurden als Komponenten umgesetzt.
Container Queries & CQW für fließende Typografie
Mit Container Queries habe ich z. B. Headlines realisiert, die sich exakt innerhalb des Layoutbereichs skalieren – ein echter Gamechanger für responsive Typografie.
