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 inertia hover effect reacts to the mouse’s entry velocity. The parent container tracks pointer movement, and when the user hovers a card, the target element receives an inertia-based animation on x, y, and rotation. Motion eases out naturally and returns to the initial state. The effect runs only on devices with fine pointer control (desktop).

🧩 Customization Options

• data-momentum-init → container that tracks mouse velocity.
• data-momentum-card → element that triggers the effect on hover.
• data-momentum-target(optional) → element that receives the animation (defaults to the card itself).

Adjust feel in the script:

• xyMultiplier — movement intensity.
• rotationMultiplier — rotation torque.
• inertiaResistance — decay speed.

🎯 Features

• Physics-based movement and rotation.
• Auto-reset after inertia.
• Supports inner targets.
• Disabled on touch devices.
• Multiple cards inside one container.

⚙️ 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.