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.

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.

• 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. "heading", "heading-apearence ").
• Publish your site — the code will automatically detect these elements.

The heading animation is powered by GSAP and data attributes linking the parent heading to its appearance state. Using SplitText, the text animates from opacity 0% → 100% while moving vertically from 40px → 0px. This creates a smooth fade-and-slide effect.

• Add the animation container with the "heading" attribute.
• Inside the container:
  i. Each text element needs heading-apearence to define its animation.
  ii. The animation sequence runs per-character or per-word when SplitText is applied.
  iii. Optional: adjust timing, easing, and stagger values to match your theme.