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

I Gave Claude Code My Hardest Animation Challenge Yet

Can Claude Code build an infinite slider with a seamless FLIP overlay transition? I tested it with GSAP, Smooothy and my Figma design for a fictional artist agency.
Video
​
Skill
Beginner
Kategorie
AI

Anschauen
Beitrag anschauen

I Designed This in Figma. Can Claude Build It?

I designed a website in Figma and gave Claude only a screenshot, fonts, images and one prompt. See how close AI gets to an individual animated design.
Video
​
Skill
Beginner
Kategorie
AI

Anschauen
Beitrag anschauen

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
​
Skill
Beginner
Kategorie
GSAP

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
​
Skill
Intermediate
Kategorie
Animation

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
​
Skill
Beginner
Kategorie
GSAP

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
​
Skill
Beginner
Kategorie
Animation

Anschauen
Beitrag anschauen