EN IT
Home About Learn Blog
Intermediate

Webflow Attribute-Powered Solutions

A toolkit of Webflow effects you control entirely through custom attributes — configure the behavior in the Designer, with no JavaScript to write or edit.

15 lessons

Custom attributes are Webflow’s quietest superpower. Instead of pasting scripts you don’t fully understand and hoping nothing breaks, you drop in a small piece of code once and drive everything from the Designer — attribute names and values you set on elements, right where you’re already working. Change a duration, flip a behavior, target a different element: no code editing, no redeploys.

This course is a whole toolkit built that way — video popups, auto-opening dropdowns, draggable marquees, ripples, gradient backgrounds, and more, each configured purely through attributes. Every lesson comes with a cloneable and a clear reference table for every attribute it exposes, so you know exactly which knob does what. It’s the fastest path to effects that feel custom while staying maintainable — copy-paste-free, and genuinely yours to tune.

In this course

  1. 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.
  2. 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.
  3. 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.
  4. 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.
  5. 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.
  6. 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.
  7. 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.
  8. 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.
  9. 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.
  10. 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.
  11. 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.
  12. 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.
  13. 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.
  14. 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.
  15. 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.