GSAP guide

🔎 Using custom attributes

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.

• 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.

✍️ Heading appear

The heading animation is powered by GSAP and connected through a custom attribute applied directly to the text element.

When the attribute banner-text-appear="" is added to a heading, the script automatically :

• Detects the element on page load.
• Splits the text into characters using SplitText
• Animates each character from translateY(100%) → 0%
• Fades opacity from 0 → 1

The animation runs in sequence with a stagger effect, creating a smooth bottom-to-top reveal.

• Add the attribute banner-text-appear="" to any heading element only for banner.
• Add the attribute appear-text="" to any heading element on banner.
• The script automatically targets only elements with this attribute.
• You can modify the initial transform value (e.g., 120% instead of 100%) for stronger motion.
• ScrollTrigger settings can be updated to control when the animation starts.

• Letter-by-letter animation using SplitText.
• Bottom-to-top smooth reveal effect.
• Attribute-based targeting (no extra classes required).
• Fully customizable GSAP timeline controls.
• Works on any heading element (H1–H6).
• Clean Webflow structure with no layout breakage.

This animation is powered by GSAP + ScrollTrigger and targets elements using the custom attribute fade-heading.

When an element contains the fade-heading attribute, the script :

• Detects it inside the trigger wrapper
• Optionally splits the text into letters
• Animates opacity from a lower value (e.g., 40%) to full visibility (100%)
• Links the animation progress directly to scroll position

As the user scrolls downward, the text gradually fades in.

When scrolling upward, the opacity smoothly reverses.

The animation is scroll-synced, meaning it does not rely on time-based playback but instead follows the scrollbar movement.

• Add the scrolling-text="1" attribute to any heading or text element.
• The animation automatically applies within its trigger section.

You can adjust the following inside the GSAP timeline :

• Starting opacity value
• Ending opacity value
• Stagger timing (if SplitText is enabled)
• ScrollTrigger start and end positions
• Ease type (Linear recommended for scroll-based animations)

• Scroll-controlled opacity transition.
• Smooth fade-in and fade-out effect.
• Fully reversible when scrolling upward.
• Attribute-based targeting (fade-heading).
• Compatible with Webflow structure.