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 data attributes linking the parent heading to its appearance state. Using SplitText, the text animates by moving vertically from -100%→ 0%. This creates a smooth slide effect.

• Add the animation container with the "box" attribute.
• Inside the container:
  i. Each text element needs heading 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.

• Works seamlessly with GSAP SplitText.
• Supports "box" (parent) and "heading" (descendant) attributes.
• Animates Y-translation (-100% → 0%).
• Fully customizable with GSAP timeline controls (stagger, duration, delay, easing).

Video button ripple

The ripple animation uses GSAP to create a smooth expanding effect across three line elements. Each line has a custom ripple attribute (one, two, and three) that defines its sequence. The animation scales each line from 1 to 1.5 while fading its opacity from 100% to 0%, creating a continuous ripple motion that feels fluid and dynamic.

• Timing & Delay: Adjust animation duration or delay in the GSAP timeline to control the ripple rhythm.
• Scale Value: Change the scale factor (default 1.5) to make the ripple grow larger or smaller.
• Opacity Transition: Modify starting or ending opacity for stronger or softer fade-outs.
• Color & Stroke Width: Update line color or thickness in Webflow Designer to match your site’s style.
• Ripple Count: Add or remove line elements and assign new ripple attribute values to extend the sequence.

• Smooth GSAP-powered animation for optimal performance.
• Fully customizable through attributes and CSS styling.
• Lightweight and compatible with any Webflow layout.
• Easy to replicate or expand with additional ripple layers.
• Responsive and works seamlessly across all screen sizes.

Text opacity changes while scroll

This animation uses GSAP to create a smooth fade-in effect on heading text. The parent container is given the attribute top-box, and the target heading inside it has the attribute fade-heading. The script splits the heading text into individual characters, then animates each one by gradually changing its opacity from 0% to 100%, creating a clean and elegant text reveal effect.

• Animation Speed: Adjust the duration or stagger timing in GSAP to make the fade happen faster or slower.
• Opacity Range: Change the start or end opacity values for softer or stronger visibility transitions.
• Easing Style: Modify easing (e.g., power2.out, easeInOut) for different motion feels.
• Delay: Add or reduce delay between characters for tighter or more spaced reveals.
• Trigger: Control when the animation starts (on page load, on scroll, or on hover).

• Clean GSAP-driven fade-in animation for text characters.
• Attribute-based setup for easy reuse across multiple headings.
• Lightweight and fully compatible with Webflow interactions.
• Customizable timing, opacity, and easing for complete creative control.
• Perfect for adding subtle, professional motion to hero titles or section headings.