All lessons
Every lesson on the site in one list, newest first. Filter by level or topic — or just use your browser’s find to jump straight to the one you want.
73 lessons
No lesson matches both filters.
-
Interactive Glass Lens Video Distortion in Webflow
Turn your cursor into a virtual glass lens over a hero video in Webflow — a GPU-powered chromatic distortion effect you set up with a few custom attributes.
-
Responsive Staggered Scroll Animation in Webflow
Build a responsive staggered scroll animation in Webflow: cards fade and slide in row by row, with the stagger adapting to the column count at every breakpoint.
-
Build a 3D CMS Cube Gallery on Scroll in Webflow
Build a scroll-driven 3D cube gallery in Webflow from CMS data — cross-fading images, split text, and a cube rotating through space with 3D transforms and GSAP.
-
Growing Border Hover Animation in Webflow (CSS + GSAP)
Build a growing circular border on hover in Webflow with a conic-gradient and an animatable @property; GSAP just toggles a class while CSS does the animation.
-
CMS Grow & Scatter Grid Animation in Webflow
Build a CMS grow-and-scatter gallery in Webflow: images stagger from the center then settle into a responsive grid, driven by one variable, CSS math, and GSAP.
-
Accessible CMS Sidebar in Webflow (Scroll Lock + Focus Trap)
Build a CMS-powered sidebar in Webflow with GSAP — per-card content, slide-in, scroll lock, outside-click close, and a real focus trap for keyboard users.
-
Build a Reusable Infinite Marquee System in Webflow
Build an infinite looping marquee in Webflow with GSAP that runs in any direction and is reusable across the whole site via a single attribute — no per-marquee rebuild.
-
Pin a Video on Scroll in Webflow (Picture-in-Picture)
Build a picture-in-picture video that pins into the corner on scroll in Webflow, using GSAP scroll triggers, sticky positioning, and a single animated variable.
-
Infinite Looping Webflow Lightbox (Accessible Gallery)
Upgrade the native Webflow lightbox with infinite looping navigation using one custom attribute — works with CMS or static galleries, on mobile, and stays fully accessible.
-
Advanced-Looking Hover in Webflow (Just CSS)
Build a card hover interaction in Webflow — darker border, scaling image, desaturated siblings — with no Interactions, just hover states, variables, and a little CSS.
-
Build a Cursor-Following Glow Effect in Webflow
Create a glow that follows the cursor across a grid of cards in Webflow using variables, native interactions, and a few lines of CSS — no JavaScript.
-
Real Cookie Consent in Webflow (Consent Pro)
Build a cookie consent system in Webflow that actually blocks trackers before consent — audit your site, then set up Finsweet Consent Pro with opt-in/opt-out banners.
-
Test Landscape Viewports in the Webflow Designer
Simulate a landscape (short) viewport right inside the Webflow Designer with one number variable and a calc() height — no publishing, no dev tools.
-
Build an Accessible GSAP Popup in Webflow (Scroll Lock)
Build an accessible modal popup in Webflow with GSAP — proper ARIA roles, a reversible open/close timeline, outside-click to close, and mobile-safe scroll lock.
-
Persistent Light/Dark Mode Toggle in Webflow (GSAP)
Build a persistent light/dark toggle in Webflow with variable modes, a GSAP class toggle, smooth color transitions, and localStorage that survives reloads.
-
Nest CMS Categories Under /blog in Webflow
Use a little Webflow glitch to nest a CMS collection under an existing collection path — like /blog/categories/… — for a cleaner, more intentional content structure.
-
Make a Webflow Site Fully Responsive: Breakpoints
Make a Webflow site fully responsive across tablet, landscape, and portrait — mastering the cascade principle, breakpoints, mobile navigation, and a few essential Flexbox tricks.
-
Webflow Crash Course 2026: Where to Go Next
Wrap up the Webflow crash course with the one lesson that sticks — it's about structure and systems, not visual hacks — and a map of where to take your skills next.
-
Webflow Navbar & Footer: Sticky Nav, Grid + Flexbox
Set up a sticky Webflow navbar with smooth anchor links, then build a footer from a default layout where grid and Flexbox work together to shape a two-dimensional layout.
-
CMS-Driven Components & Animated Dropdowns in Webflow
Connect component properties to the CMS in Webflow and build an accessible FAQ with smooth open and close dropdown animations, from rich text fields to the interactions panel.
-
Webflow Component Variants & Your First CMS Collection
Learn Webflow component variants to swap layouts by styling, then build your first CMS collection and lay it out with a grid — the foundation of a dynamic team section.
-
Webflow Components: Build a Reusable Features Section
Build a features section in Webflow while learning components and properties — reusable blocks you configure per instance — plus the Flexbox trick for equal columns.
-
Build a Webflow Hero Layout: Sections, Divs & Flexbox
Lay the foundations of a hero section in Webflow using sections, containers, div blocks, classes, and Flexbox — the reusable structure almost every layout starts from.
-
Style a Webflow Hero: HTML Tags & Fluid Typography
Style a Webflow hero the smart way using HTML tags for site-wide defaults, combo classes, and fluid font sizing with clamp() so type scales with the viewport.
-
Webflow Crash Course 2026: How This Course Works
Kick off a hands-on Webflow crash course where you'll build a real SaaS landing page from scratch and learn the fundamentals by putting them straight into practice.
-
Flexbox Design Patterns in Webflow
Build three reusable Flexbox layout patterns in Webflow — even columns, a fluid grid-ish layout, and content + sidebar — and understand why each one works.
-
Build a 3D CMS Slider in Webflow (Native + Finsweet)
Build a premium 3D slider in Webflow with the native Slider, a CSS reflection, a Slider Change interaction, then make it CMS-driven with Finsweet.
-
Smart Hover Micro-Interactions in Webflow (GSAP + CSS)
Design five hover-button micro-interactions in Webflow and learn when to reach for GSAP, when plain CSS is enough, and how to combine the two cleanly.
-
Repeat, Runs On & Conditional Playback in Webflow
Master GSAP interaction settings in Webflow — interaction vs action repeat, runs on, and conditional playback — for loops that perform well and respect reduced motion.
-
Smarter Hover Animations & State Machines in Webflow
Build hover animations on a single GSAP timeline with play and reverse, then a color-switching state machine with jump to — all inside Webflow, no duplicated interactions.
-
Control GSAP Interactions in Webflow (Speed & Jump To)
Use GSAP event settings in Webflow — control, speed, and jump to — to pause, resume, freeze, and toggle animations from separate triggers, with no timeline duplication.
-
Fix GSAP Page-Load Flicker in Webflow
Kill the flash of unstyled content before a GSAP page-load animation in Webflow with a reusable CSS-plus-attribute pattern that stays safe when JavaScript is off.
-
Master GSAP Interactions in Webflow for Smooth Animations
I'll help you master GSAP interactions in Webflow by breaking down triggers, actions, and timelines so you can build smooth, seamless page-load animations.
-
Animate a Swiss-Style Poster in Webflow with GSAP
Recreate a modernist Swiss-style poster in Webflow using a Figma-built clip-path mask and a GSAP page-load sequence of staggered text and slide-mask reveals.
-
Master Webflow Classes: Combo, Global & Beyond
Understand how classes really work in Webflow — renaming, duplicating, combo classes, global classes, and how Webflow rewrites your class names on publish.
-
Build a Parametric Neon Glow Effect in Webflow
Recreate Webflow's retro neon glow on hover with a parametric system built on CSS variables, color-mix(), and swappable variable modes — no manual color picking.
-
Webflow Spotlight Effect With a GSAP Prism Filter
Build a cursor-following spotlight in Webflow with a radial gradient overlay, then layer on a GSAP-powered SVG prism filter for a premium color-shift glow.
-
Make a Webflow Mega Menu Fully Responsive
Make a Webflow mega menu work on every screen — reposition the nav menu, make it scrollable, collapse columns with calc() widths, and clean up hover states for mobile.
-
Glassy Button with SVG Filters & GSAP in Webflow
Build a glassy crystal button in Webflow that refracts the page behind it with an SVG filter, then sharpens from soft glass to crisp ice on hover with GSAP.
-
Smooth Hover Underlines in Webflow (Box-Shadow)
Build smooth, growing hover underline effects in Webflow with box-shadow and CSS transitions — from bottom, top, left, right, to full-height fills, no code.
-
Build a Webflow Mega Menu: Structure & Accessibility
Turn a plain Webflow dropdown into a full-width, accessible mega menu — a positioning trick for edge-to-edge panels, a semantic list structure, columns, banners, and aria labels.
-
Build a Fluid Gradient Background in Webflow (No Code)
Add an interactive fluid gradient background to any Webflow page with custom attributes — no code — fine-tune colors, speed, and mouse reactivity live.
-
Staggered Split-Text Animations in Webflow (GSAP)
Reveal headings word by word or letter by letter in Webflow with the native GSAP panel — master stagger, the From origin, Split Text, masks, and easing.
-
Responsive Webflow Navbar: dvh Units & Scroll Lock
Turn a desktop Webflow navbar into a fully responsive mobile menu — fix the mobile height bug with dvh units, master flex wrapping, and lock page scroll when the menu is open.
-
Inner Grid Borders in Webflow: Responsive & Accessible
Create clean inner borders between Webflow grid items using only gap and background color — fully responsive and accessible, even with CMS content.
-
Build a Webflow Navbar: Desktop Structure & Hover
Rebuild Webflow's own desktop navbar from scratch — a solid Flexbox structure, an accessible nav, fluid spacing with clamp(), and a hover underline that never shifts the layout.
-
CSS Positioning in Webflow: Everything You Need
Master position in Webflow — static, relative, absolute, fixed, and sticky — plus how offsets, stacking, and reference containers actually behave.
-
Add Interactive Water Ripples to Any Webflow Section
Add a fully configurable, no-code water ripple effect to any Webflow section or CMS gallery — built on jQuery + WebGL with a live GUI panel for real-time tuning.
-
Apple Liquid Glass Navbar in Webflow (No Code)
Recreate Apple's liquid glass navbar in Webflow with layered divs and a tiny SVG filter — no external libraries and no heavy code, just native elements.
-
Accessible Table of Contents in Webflow, No Code
Build a responsive, accessible table of contents in Webflow with no code — auto-highlighting links, collapsible heading groups, and a mobile popup panel.
-
Build Draggable Cards in Webflow with GSAP (No Code)
Build a satisfying stack of draggable, throwable cards in Webflow with GSAP — swipe them away, reset the deck, and even wire it up to CMS content.
-
Apple-Style Image Sequence on Scroll (Webflow + GSAP)
Recreate Apple's AirPods scroll animation in Webflow: extract video frames, host them, and drive an image sequence on a canvas with GSAP ScrollTrigger.
-
Build a GSAP Disintegration Effect in Webflow
Create a scroll-triggered disintegration effect in Webflow with just a few GSAP attributes — no code editing, works on CMS content, and stays accessible.
-
Build Accessible Breadcrumbs in Webflow (Manual + Auto)
Build two reusable, accessible breadcrumb systems in Webflow — a manual component you configure by hand and an automatic one that reads the URL for you.
-
Build an Infinite Draggable Marquee in Webflow (No Code)
Build an infinite, draggable marquee in Webflow with no code — just attributes for direction, per-breakpoint speed, smooth pause on hover, CMS support, and accessibility.
-
Auto-Open Webflow Dropdowns With Just Attributes
Make Webflow dropdowns open on their own — on page load, on scroll, or from a link click — with just a few custom attributes and zero extra JavaScript.
-
Master While-Scrolling Animations in Webflow (No Code)
Recreate an award-winning while-scrolling scaling gallery in Webflow using native interactions, absolute-positioned triggers, and a calc() trick — no code at all.
-
Build a Horizontal Masonry Layout in Webflow
Recreate a fully responsive, accessible horizontal masonry gallery in Webflow using only Flexbox — no custom code — then wire it up to the CMS.
-
Dynamic Image-Stacking Hover Animation in Webflow
Recreate an award-winning, CMS-driven hover animation in Webflow where preview images reveal, scale, and stack on top of each other with minimal custom code.
-
Build a Logo Glow Hover Effect in Webflow (No Code)
Create a glowing logo-on-hover effect in Webflow with no code — using CSS masking, a backdrop-filter blur, and layered move and scale transforms.
-
Webflow Workspace Plans vs Site Plans, Explained
Finally understand Webflow workspace plans, site plans, seats, and client seats — explained with one simple story so the official docs stop feeling confusing.
-
Build a No-Code Glitch Logo Hover Effect in Webflow
Stack three logo layers, tint two with CSS filters, and add a native hover interaction with jerky moves — a glitch logo effect in Webflow, no code.
-
Build a 3D Card Scroll Animation in Webflow (No Code)
Build a 3D card while-scrolling animation in Webflow with no code, using sticky positioning, children perspective, and the interactions timeline for real depth.
-
Build a No-Code Masonry Layout in Webflow
Create a Pinterest-style masonry layout in Webflow using pure CSS columns — no plugins, no JavaScript, fully responsive and ready for the CMS.
-
Master No-Code Scroll Animations in Webflow
Build four native while-scrolling animations in Webflow — a logo, a 3D model, and text that shrink and glide into the navbar as you scroll, no code.
-
No-Code GSAP Staggered Animations in Webflow
Add staggered slide-and-fade animations to any Webflow gallery, CMS list, or grid with GSAP — no code, just a few attributes to control timing, easing, and order.
-
Add YouTube to Your Custom Video Popup in Webflow
Update your custom Webflow video popup to play YouTube videos too — grab the right embed URL, enable the JS API, and even recolor the play icon.
-
Responsive Staggered Animations in Webflow (CSS Only)
Build a responsive slide-and-fade staggered reveal in Webflow with zero JavaScript — using one attribute, the CSS transition-delay property, and nth-child media queries.
-
Dynamic Grid Image Gallery in Webflow (No Code)
Build a CMS-driven grid gallery in Webflow where every image keeps its true aspect ratio, uncropped — set the columns per breakpoint with a few attributes.
-
Custom Video Popup in Webflow, No Code & Autoplay
Build a no-code custom video popup in Webflow: autoplay on open, auto-pause on close, scroll lock, and CMS binding — all driven by custom attributes.
-
Disable Page Scrolling in Webflow (One CSS Rule)
Lock page scroll while the Webflow nav menu is open using a single CSS rule with :has() — no JavaScript, no libraries, no interactions.
-
Scalable Text Reveal Animations in Webflow (Custom Element)
Build reusable text reveal animations in Webflow with the Custom Element — one action, per-letter stagger via inline CSS, and multi-line support built in.
-
Sync Webflow Input Fields in Real Time (No Code)
Mirror one Webflow input into another in real time with Finsweet's Mirror Input — build live previews, personalized greetings, and duplicate fields, no code.