Supasaito

In this lesson, we explore one of the core pillars of Webflow’s GSAP-powered system: the Interaction Settings.

- Repeat
- Runs On
- Conditional Playback

Through four practical, real-world examples, we’ll break down how these settings behave, when to use each one, and how they can dramatically improve both the performance and accessibility of your animations.

You’ll learn how to:

✅ Build a fully responsive infinite marquee using interaction-level Repeat
✅ Create a looping stagger animation triggered on page load
✅ Loop only part of a scroll-triggered sequence using action-level Repeat
✅ Combine Infinite + Back and Forth to build elegant hover micro-interactions
✅ Optimize performance by choosing where interactions run
✅ Improve accessibility with prefers-reduced-motion behavior
✅ Understand the difference between interaction-level and action-level Repeat
✅ Design animations that are more modular, maintainable, and intentional


👉 Watch on YouTube: https://youtu.be/Su_-In44SI0

Mastering GSAP Interactions in Webflow – Part 5: Repeat, Runs On & Conditional Playback Explained

In these 2 lessons, we explore how the Event Settings panel works behind the scenes and how properties like Control, Speed, Delay, and Jump To can be combined to build cleaner, more flexible, and more intentional interactions.

You’ll learn how to:
✅ Pause and resume infinite animations based on user interaction
✅ Freeze a timeline without breaking its logic using Speed = 0 and Control: No Action
✅ Open and close components (like popups) using only one interaction with Toggle Play/Reverse
✅ Combine multiple event triggers using custom attributes
✅ Trigger Page Load animations using Custom Events and a tiny code snippet
✅ Build hover animations that play forward and backward using one timeline
✅ Create a simple state machine using Jump To + Pause
✅ Switch background colors with clean, attribute-driven logic
✅ Use CSS transitions alongside GSAP for smoother, more elegant visual results

Episode 1: https://youtu.be/RKb-dsBhYxw
Episode 2: https://youtu.be/RDIYm79IhZI

Mastering GSAP Interactions in Webflow – Part 3-4: Event Settings Deep Dive (Control, Speed, Delay, Jump To & More)

In this lesson, we tackle one of the most common visual bugs when building GSAP interactions in Webflow — that annoying flickering that appears right before your Page Load animation starts.

We’ll break down why it happens, how Webflow’s recent update helps prevent it automatically, and how to completely eliminate it with a simple, reusable CSS + GSAP setup that gives you full control on any project.

You’ll learn how to:

✅ Understand the real reason behind the flicker
✅ Write a clean CSS snippet to hide wrappers before GSAP runs
✅ Use custom attributes instead of messy combo classes
✅ Reveal your content at the perfect time with a single GSAP action
✅ Make your fix bulletproof using html.w-mod-js
✅ Combine this with Webflow’s new built-in FOUC prevention

👉 Watch on YouTube: https://youtu.be/UoNFQpR3oeo

Mastering GSAP Interactions – Part 2: Fixing Page Load Flicker

In this first lesson of Mastering GSAP Interactions in Webflow, we lay the groundwork for the whole course. You’ll learn what an interaction really is, how triggers, actions, and targets work, and how the classic and new GSAP-based systems compare — by rebuilding the same animation with both methods.

We’ll cover:

✅ Classic vs GSAP interactions — what’s changed and why it matters
✅ Naming conventions for clarity (and team sanity)
✅ Page Load triggers and timing strategies
✅ Building a staggered text reveal (classic)
✅ Recreating it with Split Text + Stagger (GSAP)
✅ Image reveal: wrapper growth, blur cleanup, and smooth easing
✅ Making both systems coexist (mouse-move reaction after the reveal)
✅ A preview of the flickering fix we’ll fully solve in the next lesson

👉 Watch on YouTube: https://youtu.be/lGUw2ZRD3fc

Mastering GSAP Interactions – Part 1: Terminology & Core Concepts

In this video, we’ll rebuild a Swiss-style modernist poster entirely in Webflow, combining clean design principles with SVG clip paths and GSAP animations for a striking motion effect.

You’ll learn how to:

✅ Structure a responsive section with Webflow’s native tools
✅ Prepare and export SVG paths from Figma
✅ Apply clip-path masking and control motion with GSAP
✅ Build smooth entry and exit animations with perfect timing

If you’re new to motion design, this tutorial will show you how to bring clean, expressive animation to your layouts — without overcomplicating things.

And if you’re already an experienced Webflow user, you’ll learn new tricks to combine design precision with GSAP flexibility for professional-grade results.

👉 Watch on YouTube: https://youtu.be/hbJ036mlU3g

The Jam - Swiss Style

Still confused about how classes work in Webflow?

Don’t worry — you’re not alone.

In this video, I’ll walk you through everything you need to know about classes, from the basics to the advanced concepts:

✅ What a class actually is (and why it matters)
✅ How to rename and duplicate classes correctly
✅ How combo classes really work (and when not to use them)
✅ What global classes are and why they can save you hours
✅ How Webflow transforms class names when you publish

We’ll bust some myths, fix common mistakes, and make sure you finally feel 100% confident with classes inside Webflow.

If you’re new to the platform, this video will help you build solid foundations.

And if you’re more experienced, it’ll give you the clarity you need to structure cleaner, more scalable projects.

👉 Watch on YouTube: https://youtu.be/fzpeZ4i1VkE

Everything You Know About Classes

Learn how to recreate Webflow’s classic Neon Glow Effect — but this time, powered entirely by Variables, Modes, and Component Variants.

In this tutorial, we’ll rebuild the glowing border from Webflow’s previous website and turn it into a modular system that you can update with just one color.

You’ll learn how to:

✅ Use CSS Variables and color-mix() to generate consistent glow layers
✅ Organize and group your variables in Webflow’s Variables panel
✅ Create color modes to switch between palettes instantly
✅ Combine components and variants to control glow colors across multiple elements

Everything is done natively in Webflow — no custom code required.

🎨 Colors used in the demo:

Blue #1F51FF · Pink #FF1493 · Gold #FFC42E · Green #39FF14 · Red #FF3131

👉 Watch on YouTube: https://youtu.be/jTD9GpfkDQQ

Neon Glow Effect — Using Variables, Modes & Component Variants

In this tutorial we’ll build a fully interactive hero section in Webflow — complete with a spotlight effect that follows your cursor, a smooth GSAP-powered hover animation, and a custom SVG prism filter that adds a premium color-shift glow.

Here’s what you’ll learn step by step:

✅ Setting up the hero section with clean, scalable structure
✅ Creating a radial spotlight overlay that tracks the mouse
✅ Animating the hero image with GSAP scale & rotate on hover
✅ Styling the button with subtle CSS transitions
✅ Applying a custom SVG filter
✅ Using GSAP + JavaScript to animate the RGB offsets for the prism effect
✅ Ensuring full accessibility (pointer + keyboard)

The result? A dynamic, elegant hero section that feels premium and professional — and one you can easily adapt to your own projects.

👉 Watch on YouTube: https://youtu.be/334aRtyb35w

Spotlight Animation & Prism SVG Filter Effect (GSAP)

In this fourth episode, we take on the real challenge: making our mega menus fully responsive.

We’ll go breakpoint by breakpoint — Tablet, Landscape, and Portrait — and clean up everything so the layout adapts smoothly on any device.

That means:

✅ Fixing nav menu positioning
✅ Adjusting columns, gaps, and paddings
✅ Making buttons and banners work in mobile layouts
✅ Cleaning up unnecessary hover interactions
✅ Ensuring everything stays consistent and scrollable

Along the way, we’ll also tackle tricky inheritance issues and show you how to keep your responsive workflow simple and predictable.

By the end, you won’t just have a mega menu that looks great on desktop — you’ll have one that’s robust, responsive, and production-ready.

Coming up: animations and finishing touches.

👉 Watch on YouTube: https://youtu.be/hCHegeRmlD4

👉 Full Playlist: https://www.youtube.com/playlist?list=PLYPkp78mi3rYYsVC5gFamMg3ieAzNw9z_

Webflow's Navbar & Mega Menu | Mega Menu Responsiveness

In this tutorial we’ll build a crystal-like glassy button in Webflow using the magic of SVG filters and the power of GSAP.

🔹 You’ll learn how to:

✅ Set up the page structure and button styling
✅ Apply a custom SVG filter with backdrop-filter: url(#glass)
✅ Load a displacement map with JavaScript
✅ Animate the effect on hover with GSAP (soft glass ➝ icy crystal)
✅ Customize parameters like blur, scale, and duration to make the effect your own

👉 Watch on YouTube: https://youtu.be/jquGkq1cgQI

📂 Helpful Resources:
- SVG filters playlist: https://www.youtube.com/playlist?list=PLYPkp78mi3rYq0H_TjbEFgbkz1XEzfnll

Glassy Button with SVG Filters + GSAP Hover Animation

Today, we’ll build a set of hover underline animations in Webflow — powered by box-shadow and smooth CSS transitions.

You’ll learn how to:

✅ Create a growing underline from the bottom
✅ Animate from the top, left, and right
✅ Build a full-height underline effect
✅ Even animate multiple borders at once with a simple trick

No custom code needed — just smart use of styles and transitions.

👉 Watch on YouTube: https://youtu.be/bTXWsrMSPaY

Smooth Hover Underline Effects (with Box-Shadow)

In this third episode, we finally step into the world of mega menus.

We’ll take a simple dropdown list and turn it into a fully structured menu — the same kind you see on Webflow’s own website.

That means:

✅ Building out multi-column layouts
✅ Adding CTA buttons with background images
✅ Designing a banner element
✅ And making sure everything is clean, consistent, and accessible with proper ARIA labels.

Along the way, we’ll also fix common styling quirks, talk about inheritance issues, and make sure every detail works just like the original.

By the end, you won’t just have a mega menu that looks right — you’ll have one that’s structured, scalable, and ready to use in real projects.

Watch the full build — and get ready for the next step in this series.

Coming up: mega menu responsiveness, animations, and the finishing touches.

👉 Watch on YouTube: https://youtu.be/8ID1_jeLXF8

👉 Full Playlist: https://www.youtube.com/playlist?list=PLYPkp78mi3rYYsVC5gFamMg3ieAzNw9z_

Webflow's Navbar & Mega Menu | Mega Menu Desktop Structure & Hover Interactions

Discover the true power of shaders and THREE.js — now fully accessible in the world of no code with Webflow. 🚀

This interactive fluid gradient isn’t just eye candy:

✅ it’s entirely configurable via custom attributes, no code required
✅ it comes with smart default values that work out of the box, giving you an instant plug-and-play solution
✅ and it lets you fine-tune everything — brush size, strength, fluid decay, flow speed, distortion, color intensity, softness, idle speed, and more.

In this tutorial, you’ll learn how to:

✅ set up the gradient with the minimum configuration
✅ unlock a real-time GUI to preview and tweak parameters
✅ apply it to a hero section
✅ and even make your CTA hover interactions more engaging.

This isn’t your average gradient — it’s a fully interactive, GPU-powered effect that brings advanced graphics into your Webflow projects with nothing but attributes.

👉 Watch on YouTube: https://youtu.be/iTUatEAhWnI

Interactive Fluid Gradient Background

In this tutorial, I’ll walk you step-by-step through creating smooth word-by-word and letter-by-letter text reveals using Split Text, stagger settings, masking, and stagger easing.

You’ll learn:
✅ The difference between Offset Time and Total Time in stagger animations
✅ How to split text by word, line, or letter
✅ How masking works to create clean reveal effects
✅ How to control animation pacing with stagger easing
✅ Practical tips for building intentional, professional animations in Webflow

By the end, you’ll have a clear understanding of how to use these new GSAP features in Webflow — without writing a single line of code.

👉 Watch on YouTube: https://youtu.be/WQ8q27BiKzY

📂 Helpful Resources:

- Lidia’s Portfolio: https://www.lidiasantoyan.com/
- GSAP tutorials playlist: https://www.youtube.com/playlist?list=PLYPkp78mi3rYZ-pxG2zK5fXRe1mxt2kPa

Mastering GSAP Split Text Animations

In this second episode, we pick up exactly where we left off — with a clean, fully functional desktop navbar.

But today, we’re going to make it fully responsive — adjusting spacing and layout across breakpoints.

We’ll also tackle the dreaded viewport height issue, where using 'vh' units on mobile can cause strange layout bugs.

You’ll learn what 'dvh' are and when to use them.

And finally, we’ll add a professional touch: a small CSS snippet that automatically blocks page scroll when the nav menu is open.

Watch the full build — and get ready for what’s next.
Coming up: dropdown menus, animations, and beyond.

👉 Watch on YouTube: https://youtu.be/2dMqXR9K8aY

👉 Full Playlist: https://www.youtube.com/playlist?list=PLYPkp78mi3rYYsVC5gFamMg3ieAzNw9z_

Webflow's Navbar & Mega Menu | Navbar Structure Responsiveness

Need inner borders in a Webflow grid? There’s no native setting for it — but with the right combo of gap, background color, and a few layout tricks, you can achieve a clean, responsive, and accessible result.

This time, you’ll learn how to:

- Create precise inner borders between grid items
- Fix image stretching and maintain aspect ratios
- Handle edge cases with placeholder elements
- Make your layout fully accessible with aria-hidden
- Extend the solution to CMS collections with dynamic sorting

Let’s make your grids cleaner, smarter, and easier to use — across all breakpoints and use cases.

👉 Watch on YouTube: https://youtu.be/ngcPKMxpyQ8

Quick & Easy Grid Borders

Want to learn how the Webflow navbar was built — and how to recreate it yourself, maybe even a little bit better? 😎

In this first video of a complete tutorial series, we’ll rebuild the desktop version of the Webflow navbar from scratch.
No mega menu yet. No mobile adaptation (for now).
Just a solid, scalable, and accessible layout, packed with:

✅ Flexbox tricks for precise alignment
✅ Smart use of clamp() for fluid typography and spacing
✅ Perfectly balanced link groups (left and right)
✅ Smooth hover underline animations using box-shadow
✅ Inherited color transitions
✅ A fully fluid system — all built with native Webflow tools

Whether you’re just starting out or looking to level up your layout skills, this is the perfect place to start.

Coming up: responsive breakpoints, dropdown menus, animations, and beyond.

👉 Watch on YouTube: https://youtu.be/2dMqXR9K8aY

👉 Full Playlist: https://www.youtube.com/playlist?list=PLYPkp78mi3rYYsVC5gFamMg3ieAzNw9z_

Webflow's Navbar & Mega Menu | Navbar Desktop Structure & Hover Interactions

Learn how to master CSS positioning in Webflow with clear explanations and real-world examples.

This time, we explore all five position values — static, relative, absolute, fixed, and sticky — showing exactly how they work and when to use them in your projects.

🔍 What you’ll learn:

✅ How each CSS position works in Webflow
✅ The difference between normal flow and positioning
✅ How to use offsets and z-index effectively
✅ How stacking context actually works (finally!)
✅ Common issues (like disappearing fixed elements) and how to fix them
✅ Practical use cases for sticky positioning (yes, even horizontal ones!)

Whether you’re just starting with Webflow or want to understand positioning like a pro, this guide has you covered.

👉 Watch on YouTube: https://youtu.be/QysIkNE811g

📂 Helpful Resources:

- Glass Navbar Effect In Webflow: https://youtu.be/X0MYB9BHu60
- Dynamic Table Of Contents: https://youtu.be/WiDRVIpDESU

All You Need To Know About CSS Positioning

People in this category really care about Webflow. Their contributions to the community, and time spent fostering and nurturing connections within the community, don't go unnoticed.

Design System Setup

Custom Code/Scripting

Data & Analytics

Platform migrations

Web Development

Digital Marketing & Advertising

SEO Audit & Optimization

Animation

3rd Party Integrations

Our work

102976941

1038319252

gpt-4.1-nano

1070795817

112746687

Get direct access to benefits like unlimited staging sites and more control over roles & permissions

Unlock more for your business with the

1138017326

claude-sonnet-4-5

1186914386

1274323923

1316201488

1316201489

140432223

1462086697

1506258256

1567550242

1592612642

1631162196

1726628865

1733785607

173927913

1771795565

1863160016

1905118106

1975670756

2025032126

2030598753

Outliant

Hireclix

Refokus

Kinetic

Heco

2032141491

2144870841

2167006968

2213518682

2216482092

2339906037

2351366352

2355632600

https://s3.amazonaws.com/webflow-dev-assets/66fd83b6cc0c8c6ed0e398e6%2Fcontent.json

2401116685

2486364096

gpt-4o

gpt-4.1

gpt-4o-mini

2493307210

2546957535

2789269995

285302288

2857348505

2903381045

User Accounts will no longer be available on January 29, 2026.

Visit Webflow’s Help Center for migration guidance and more info.

3022611874

3023147062

3026881092

3070246498

307653616

3079159973

3106924665

3108168977

3112069432

3120801339

3125710258

3151661775

3201643127

3243842104

3258716925

3266482432

3289310561

3313039722

3315729993

3387258362

3410497685

3452464914

3458155273

google/gemini-3-pro-preview

3590523401

3591394191

3669004489

3672367630

3737116140

3801251705

3844506029

3879263312

Learn best practices for collaborating with clients in Webflow.

Sell your apps on the Webflow Marketplace.

Learn about structuring seats, roles, and permissions in your Workspace

Partner with Webflow to build your business alongside 2M+ creators and developers

Request access for your team to collaborate in a client’s Workspace.

Charge your client for a Site plan directly in Webflow.

Earn more by selling templates on the Marketplace.

Start building your site with AI, a prebuilt template, or from scratch.

Add your team members to start collaborating on sites.

Watch a quick intro to what you can build in Webflow.

3913199261

3934148661

3941255684

3951600357

3956476210

3960693283

3972857978

4063605209

4092855684

4103643638

4144203485

4178901499

4195171643

4206156914

451433404

489463363

504462606

536101258

540515386

612788821

622649767

622649768

655421556

657188092

660615456

665836192

737109165

772001133

817414265

846847440

879597835

882147072

911514507

938734410

968427424

1013057706

1045828939

104959118

1049811722

1087856901

1088396327

1106275794

1108325183

1131151533

1140906369

1157311889

1157563538

1178238107

1178621510

1193740135

1197475705

1216878544

1227154495

1234765101

1236803103

1238404733

Supasaito

About

Industry specialties

About

About