Finally: The new GSAP Animation UI in Webflow! First real preview

Animation
Blog Post

Guys, it's finally here! The first glimpses of the brand-new Webflow GSAP Animation UI are here — and it's changing EVERYTHING.
The previous Webflow Interactions are being completely redesigned and replaced by a modern, powerful GSAP-based solution.

With:
✅ Even more features
✅ An optimized timeline
✅ And finally: a horizontal UI for your animations!

Watch the video for the first real preview — including my assessment and a look behind the scenes.

Webflow Interactions 2.0: New opportunities for web designers

Webflow recently released a preview of a major update: the full integration of GSAP, the leading JavaScript animation library. This means that all GSAP plugins, including previously paid club plugins, are now available for free.

What's new?

Interactions 2.0 brings a variety of new features:

  • Horizontal timeline: Enables intuitive control of complex animations.
  • Advanced triggers: In addition to the well-known triggers, there are now also Key Press and Hold.
  • Reusable animations: Save animations as components and use them across projects.
  • Improved SplitText feature: More efficient, barrier-free and with new features such as DeepSlice and responsive re-splitting.

Why is that relevant?

These new features enable web designers to create complex animations directly in Webflow — without additional code. This saves time and opens up creative freedom.

conclusion

The integration of GSAP into Webflow and the new interactions are a big step forward. They provide web designers with powerful tools to create impressive animations. Now is the perfect time to familiarise yourself with the new options and use them in your own projects.


More content

Blog Archiv

Make a Boring List Impressive with This Simple GSAP Effect

Build a simple typo scroll animation in Webflow with GSAP. Names scale in the center and animated brackets appear, powered by the CMS.
Video
Kategorie
GSAP
Skill
Beginner

Anschauen
Beitrag anschauen

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

Learn step-by-step how to animate a premium hero section in Webflow using GSAP, including scroll triggers, staggers, and loop effects.
Video
Kategorie
Animation
Skill
Intermediate

Anschauen
Beitrag anschauen

Webflow Text Marquee Animation with the new GSAP Timeline

Learn how to build a looping marquee in Webflow using the GSAP Timeline. No custom code needed scroll-triggered and performance-friendly.
Video
Kategorie
GSAP
Skill
Beginner

Anschauen
Beitrag anschauen

Turn Any Product Hero Into a Premium Showcase (No 3D)

Build a 360° rotating product hero in Webflow with AI-generated video, blend modes & container queries. Free cloneable included.
Video
Kategorie
Animation
Skill
Beginner

Anschauen
Beitrag anschauen

This GSAP Scroll Effect Makes Every Hero Section Feel Premium

Build a premium GSAP hero scroll effect in Webflow. Learn scale, parallax & stagger animations step by step free cloneable included.
Video
Kategorie
GSAP
Skill
Beginner

Anschauen
Beitrag anschauen

3 Hero Section Mistakes Most Webflow Designers Make

3 hero section mistakes most web designers make and how to fix them in Webflow. From min-height to clip-path tricks explained for beginners.
Video
Kategorie
Beginner Tutorial
Skill
Beginner

Anschauen
Beitrag anschauen