GSAP Guide

To activate the animations and systems in this template, all logic is driven by Custom Attributes directly inside the Webflow Designer — no need to touch the code.

🛠 What are Custom Attributes?

Custom Attributes are key-value pairs you can assign to any HTML element in Webflow. They allow you to add interactivity or behaviors that connect to the code.

🧪 How to Add One

• Select the element in the Webflow Designer.
• Go to the Settings Panel.
• Scroll down to Custom Attributes.
• Click “+ Add Custom Attribute”.
• Add the attribute name and value exactly as described in the guide (e.g. data-tab-item, data-marquee, data-tab-autoplay="true").
• Publish your site — the code will automatically detect these elements.

💡 Important

• Attribute names must be exactly as written (lowercase, dash-separated).
• These attributes do not change the element visually in Webflow — they act as invisible hooks for animations and interactions.
• You can mix and match multiple attributes on the same element (e.g. data-marquee + data-marquee-speed).

⚙️ How it works

The bottom navbar is driven by data attributes linking each trigger to its matching dropdown. A GSAP timeline reveals the dropdown (height 0 → auto and opacity 0 → 1). On desktop (≥ 992px), items open on hover with a short tolerance to bridge the gap between the trigger and the dropdown. On tablet/mobile (< 992px), items open/close by click. Only one dropdown stays open at a time.

🧩 Customization Options

• Add the navbar content inside the .bottom-nav .nav container.
• Inside the container:
  i. Each clickable item needs data-dropdown-trigger with a unique id.
  ii. Each dropdown panel needs data-dropdown using the same id as its trigger.
  iii. Optional: adjust trigger background colors in your styles (default, active, inactive) to match your theme.
• Behavior by breakpoint:
  i. Desktop (≥ 992px): hover to open, hover out of the dropdown to close.
  ii. Tablet/Mobile (< 992px): click to toggle; clicking outside the navbar closes any open dropdown.

🎯 Features

• Hover on desktop and click on mobile/tablet.
• One dropdown open at a time; opening one closes the others.
• Automatic accessibility attributes (aria-expanded, aria-controls, aria-haspopup).
• Subtle background color transitions on triggers to indicate state (default, active, inactive).

⚙️ How it works

The text highlight effect fills a colored bar behind selected words while switching the text color. It activates when the element scrolls into view and plays once. The highlight grows from left to right using a background fill; multi‑line text is supported.

🧩 Customization Options

• Wrap the words to highlight with a span and add data-hl to that span.
• Configure appearance and behavior with optional attributes on the same span:
  i. data-hl-color → highlight color (default #FF6A45).
  ii. data-hl-text → text color after fill (default #0d0d0d).
  iii. data-hl-radius → border radius in pixels (default 0).
  iv. data-hl-pad → padding (CSS shorthand, default 0rem 0rem 0rem 0rem).
  v. data-hl-speed → animation duration in seconds (default 0.8).
  vi. data-hl-ease → GSAP easing (e.g., power1.inOut, default power3.out).

🎯 Features

• Scroll‑triggered highlight fill with smooth color swap.
• Works across line breaks without breaking layout.
• Compatible with multiple highlights on the same page.

⚙️ How it works

The marquee scrolls a continuous line of content inside a track. The wrapper defines speed, direction, and item spacing through data attributes. The system duplicates the content once to create a seamless loop and recalculates sizes on resize. Works with text, logos, images, or mixed inline elements.

🧩 Customization Options

• Add data-marquee to the marquee wrapper.
• Inside the wrapper, add one element with data-marquee-list that contains all inline items.
• Configure the wrapper using optional attributes:
  i. data-marquee-speed — scrolling speed in pixels per second (default 60).
  ii. data-marquee-direction — left or right (default left).
  iii. data-marquee-gap — spacing between items (CSS length, default 2rem).
• Ensure your items are inline-friendly (e.g., spans, links, images). The track uses flex layout with no wrapping.
• If your items include images, set consistent dimensions (width/height or aspect‑ratio) to avoid layout shifts.

🎯 Features

• Infinite, seamless horizontal loop.
• Direction control (left / right).
• Speed control per marquee instance.
• Responsive: re-measures content on resize.
• Supports mixed content (text, SVGs, images, buttons).
• Multiple marquees on the same page.