Enroll Now
.svg)
English version
Webflow GSAP Interactions Masterclass
Master website animations and motion design with the new GSAP timeline in Webflow.
The most comprehensive Webflow + GSAP Timeline masterclass
With Webflow Expert
Jonas Arleth
The future of Webflow animations
New 2025
This Masterclass is a specialized deep-dive course that guides you step by step into the new animation system. Compact, focused, and instantly actionable.
No fluff — just pure practice.
Together, we’ll animate a modern studio layout with vibrant motion design that’s not only technically refined but visually compelling.
You’ll see how design and movement become one directly and visually inside the Webflow interface, with no coding skills required.
4
chapters
23
lessons
3+
hours of videos
What you learn in this course
- Complex motion sequences with the new GSAP timeline
- What really matters when it comes to easing, timing & flow
- Scroll, hover & click animations with stagger effects
- Global motion systems via attributes & scopes
- Page loads & transitions with professional motion design
- Results that look like they came from an award-winning studio
After the course, you will...
- Create animations with intention instead of coincidence.
- Work confidently and systematically with the new GSAP Timeline in Webflow.
- Work much faster and more efficiently with GSAP than with the old Webflow Interactions.
- Use motion purposefully to enhance design and user experience.
- Develop interactions that balance performance and aesthetics.
- Create animations that feel smooth, modern, and high-end.
List of course content and videos
Foundations
- Why Webflow Is Bringing GSAP Into the Platform and What It Means for You
- What Makes Professional Website Animations Stand Out
- Avoiding Conflicts: Using Classic and GSAP Interactions Together or Separately?
Core-Animations
- How GSAP Works in Webflow – The Quick Orientation Video
- All About Stagger Animations for Headlines and Texts
- Creating Global Animations with Attributes
- Fixing Cut-Off Letters in Mask-Split-Text
- Everything About Hover Interactions
- Click Interactions Explained with an Accordion (Open & Close)
- Animating Content While Scrolling
- Mastering Looping Animations and Timing
- Animating Webflow’s Native Navigation with GSAP (on Open and Close)
Pro-Techniques
- Advanced Button Hover Effect
- Masterful Page-Load Animations with the New GSAP Timeline
- Scope Descendants with CSS Superpower
- Layered Multi-Stage Hero Reveal Scroll Animation
- Animating Page Transitions (2 Variants)
- The Underrated addClass Feature: Trigger any visual state via class
- Custom JS Events – Triggering Animations in Code Using a Preloader Example
- Animating Native Slider and Tab Components (YouTube Video)
- Advanced Masked Hero Scroll Animation
Optimization
- Preventing Flicker on Page Load
- Breakpoints and Responsive Design for GSAP Animations
Freely use the webflow template created in the course for your client projects.
Including Figma design file download
Through the course comment function, I can directly assist you with any questions.
Tools we use in the course
Webflow
GSAP Animations
Figma
Finally understood GSAP in Webflow
Jonas' course came at just the right time because I wanted to finally redesign my own website — with cool interactions. With Jonas, someone finally explains in detail and comprehensibly how the new GSAP works in Webflow. Before, I've usually only found short, incomplete videos online that didn't really help me. Thanks to the course, I now have an excellent overview of how it works and can hardly wait to try out the first real implementation. Thank you Jonas for your patience, your sense of design, and your focus on details!
Frank
Gafikdesigner, Webflow Developer
From After Effects to GSAP with Webflow
I have just completed the GSAP Masterclass and am extremely satisfied with the quality of this course. The detailed explanations of the GSAP tools and how to use them in the new horizontal timeline were extremely helpful to me. As someone who originally comes from motion design with Adobe After Effects, I've had difficulty implementing complex animations with the native Webflow features so far. I often found the workflows to be unintuitive and difficult to understand. Jonas' excellently prepared GSAP course has fundamentally changed this. After just the first four to five lessons, I was able to create more sophisticated and high-quality animations much faster. Jonas conveys the content using real use cases and dives deep into how the individual tools work. The videos contain a variety of specific tips and proven workflows, which I am already integrating into my existing projects.
Ralf
Webdesigner
Your Webflow upgrade
With the new GSAP Timeline, you can control animations like a motion designer — directly in the interface and without coding.
Webflow GSAP Interactions Masterclass
English
- 25 practical video lessons (3 hours of compressed knowledge)
- Lifetime access including updates
- Webflow project template with all animations for your client projects
- Clarify questions & problems directly via chat
- Optional: Add Figma file download in the checkout
- Certificate of completion
199
€
299
€
Or 3 payments of just 72€
Bundles
Save 30% on every additional course
Webflow Expert Course
English
Bundle-Deal -30%
- 9+ hours of video material
- Lifetime access and updates
- Figma design template
- Webflow project template with everything we build
- Completion certificate
315
€
449
€
Or 3 payments of just 116€
Haupt-produkt
Webflow GSAP Interactions Masterclass
English
199
€
299
€
Webflow GSAP Interactions Masterclass
-30% bundle discount
English
140
€
199
€
Webflow Expert Course
-30% bundle discount
English
315
€
449
€
Webflow Trick-Kiste
-30% bundle discount
German
49
€
49
€
Webflow All-in-One Beginner Course
-30% bundle discount
German
350
€
499
€
Webdesign Angebote mit 3 Preisoptionen erstellen
-30% bundle discount
German
252
€
359
€
Total
399
€
000
€
Payment in installments is possible.
Taxes are calculated at checkout.
Taxes are calculated at checkout.
Checkout
🔒 Pay securely with credit card, PayPal & more
💡 14-day money-back guarantee
💡 14-day money-back guarantee
After payment, you will receive an invoice with VAT (if applicable). Depending on your country’s tax regulations, you may be able to deduct this course as a business or training expense.
+00
More than 00 people use Formburg courses for their professional development. Read feedback.
student Discount
Get 25% off
Please simply send an email with information about the name of your degree or education and which school you go to:
Shared experiences, real successes
FAQ
Frequently asked questions about the online course
Are all future new content updates included for free?
With the purchase of the course, you get lifetime access – including all existing content as well as all future updates and new modules. One-time payment, all-inclusive: There are no additional costs for you.
How long do I have access to this course?
Lifetime access! You even get all future updates and learning modules for free that I will add over time.
Do I get a certificate of completion?
You can receive a completion certificate with your name as a PDF once you have completed 80% of the course. To get the certificate, please contact me with the name you want on the certificate and your order number. I will then verify your progress.
Is there a way to talk to Jonas if I get stuck?
During the online course, you can use the comment function under each lesson at any time. I will respond to these once a week. If you encounter a bigger issue or get completely stuck, you can also contact me directly via chat.
Will I get my money back if I don't like the course?
Yes, there is a 14-day money-back guarantee.
English