GSAP Demo with Cassie Evans // July 2025 // London @Webflow meetup #WFLDN

📺 Webflow Native GSAP Support: The Future of Interactions
Presenter: Cassie Evans https://www.linkedin.com/in/cassie-codes/

🚀 Key Takeaways: "Motion is your brand's body language. With GSAP now native to Webflow, we’re moving from basic jiggles to high-performance, professional-grade animation for everyone."

📝 Summary:
In this session, Cassie Evans (Creative Technologist at Webflow/GSAP) introduces the new native GSAP integration. She breaks down why this is a game-changer: moving away from legacy jQuery and toward a library that can animate anything—from HTML and SVG to WebGL. Cassie demonstrates the new UI, rebuilding a complex staggering animation in minutes, and shares the long-term vision of reaching full feature parity with the GSAP API.

Whether you're a "vibe coder" or a hardcore developer, this talk explains how to balance visual building with custom code and why high-performance animations (opacity and transforms) are the key to a "slick" web experience.

🕒 What you’ll learn:

GSAP vs. Lotty/Rive: Understanding that GSAP is a property animator, not just a rendering engine.

The New UI: How to toggle between "Classic" and "GSAP" interactions and navigate the new timeline.

Split Text & Staggering: Implementing one of GSAP’s most popular features—animating text by character, word, or line—directly in Webflow.

Performance Best Practices: Why you should target "Composite Layers" (transforms and opacity) to avoid layout "jank."

The "Actions" Philosophy: Why Webflow calls them "Actions" instead of "Tweens" (hint: they’ll eventually fire custom code and API integrations).

Easing Mastery: The difference between "Expo" swishes and "Bounce" playfulness, and how to use the GSAP Ease Visualizer.

📂 Timestamps:

1:02 – What is GSAP? (And why it’s not just for vectors).

2:50 – The Webflow Acquisition: Why GSAP is now free for everyone.

3:49 – IX2 vs. IX3: Why the move from jQuery to GSAP matters for performance.

6:39 – Live Demo: Rebuilding a staggered text-loading animation.

8:25 – Split Text Plugin: Animating by letter without manual spans.

16:35 – Image Staggers: Using Total Time vs. Offset Time.

17:42 – The Plus Button: Unlocking obscure properties like Clip Path and CSS Variables.

23:51 – Motion Guidelines: Functional UI vs. Decorative Animation.

30:32 – Custom Events: How to trigger IX3 timelines via custom JavaScript.

35:07 – Responsive Design: The roadmap for breakpoints and feature parity.

Cassie Evans is a developer, educator, and key member of the GSAP/Webflow team. She is dedicated to making the web more beautiful and accessible through the power of creative coding.

➡️ Join our next London Webflow Community Meetup 🎟️ https://www.meetup.com/london-webflow-monthly-meetup/

Видео GSAP Demo with Cassie Evans // July 2025 // London @Webflow meetup #WFLDN канала #WFLDN - London Webflow Community