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 tab system is powered by a custom class called ModernTabSystem. It listens to user interaction or autoplay settings and triggers animations between tab items and their associated images using GSAP.

⚙️ Customization Options

• Add data-tab-wrapper to the container.
• Inside the wrapper:
  i. Each clickable tab needs data-tab-item.
  ii. Each corresponding image block requires data-tab-image.
  iii. Optionally, use data-tab-progress inside each tab to show animated progress bars.
• Enable autoplay:
  Add data-tab-autoplay="true" and data-tab-duration="5000" (duration in ms) on the wrapper.i. Each clickable tab needs data-tab-item.

🎯 Features

• Click or autoplay tab switching
• Uses is-active and active classes for styling control
• Optional progress bar animation
• Smooth opacity, scale and position transitions

How it works

ModernMarqueeSystem creates a seamless infinite scrolling effect by duplicating the content and animating it using gsap.to() and the ModifiersPlugin for perfect looping.

⚙️ Customization Options

• Wrap your marquee with data-marquee.
• The direct child content must have data-marquee-content.
• Optional attribute: data-marquee-speed="60" to control animation speed.
• Optional attribute: data-marquee-pause="true" to pause on hover.

🎯 Features

• Responsive speed (mobile, tablet, desktop)
• Uses modifiers for pixel-perfect infinite looping
• Autopause on hover supported