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.

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

How it works

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

When the attribute heading-title="1" is added to a heading, the script automatically :

• Detects the element
• Splits the text into words
• 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.

Customization options

• Add the attribute heading-title="1" to any heading element
• The script automatically targets only elements with this attribute
• You can modify the stagger timing for faster or slower reveal
• Adjust the translateY value (e.g., 120% instead of 100%) for stronger motion
• Adjust the translateY value (e.g., 120% instead of 100%) for stronger motion

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

Text opacity change

How it works

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

When the attribute opacity="1" is added, the script automatically :

• Detects the element
• Links the animation with scroll position
• Animates opacity from 0 → 1
• Creates a smooth fade-in effect while scrolling

The animation is synced with scroll using a scrub effect, making the transition feel fluid and responsive.

Customization options

• Add the attribute opacity="1" to any text element
• The script automatically targets only elements with this attribute
• You can adjust the scrub value for smoother or faster animation
• Modify the start and end trigger positions to control when the fade begins
• Combine with other animations for more advanced effects

• Smooth scroll-based opacity animation
• Fade-in effect from 0 to 100%
• Attribute-based targeting (no extra classes required)
• Fully customizable ScrollTrigger settings
• Works on any text element
• Clean Webflow structure with no layout issues