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 big-text-reveal="1" is added to a heading, the script automatically :

• Detects the element
• 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.

Customization options

• Add the attribute big-text-reveal="1" to any heading element.
• 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.

Text opacity changes while scroll

How it works

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.

Customization options

• Add the fade-heading 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.

Sticky service image & number transition

How it works

This section uses GSAP + ScrollTrigger inside a sticky container to create a synchronized content transition effect.

As the user scrolls :

• The service image changes
• The service title updates
• The service number transitions

All elements are targeted using class selectors, not custom attributes.

Each scroll step triggers a timeline where :

• The active image fades from opacity : 100% → 0%
• The next image fades from opacity: 0% → 100%
• The service number transitions with a quick opacity shift
  (100% → 0%, duration: 0.05s)

Because the section is sticky, the content transitions while the container remains fixed in the viewport.

Customization options

• All elements are controlled via class names.
• Each content block (image, title, number) must follow the same class structure.

You can modify :

• Image fade duration
• ScrollTrigger start and end positions
• Number transition speed
• Easing type (Power or Linear recommended)
• Delay between content transitions

• Sticky scroll-driven content transitions.
• Image fade in/out effect.
• Fast number opacity switch (100% → 0%).
• Fully scroll-controlled animation.
• Class-based targeting (no attribute setup required).
• Smooth synchronized text and image changes.
• No layout shifting during transitions.

Sticky service image & number transition

How it works

This section uses GSAP + ScrollTrigger inside a sticky container to create a synchronized content transition effect.

As the user scrolls :

• The service image changes
• The service title updates
• The service number transitions

All elements are targeted using class selectors, not custom attributes.

Each scroll step triggers a timeline where :

• The active image fades from opacity : 100% → 0%
• The next image fades from opacity: 0% → 100%
• The service number transitions with a quick opacity shift
  (100% → 0%, duration: 0.05s)

Because the section is sticky, the content transitions while the container remains fixed in the viewport.

Customization options

• All elements are controlled via class names.
• Each content block (image, title, number) must follow the same class structure.

You can modify :

• Image fade duration
• ScrollTrigger start and end positions
• Number transition speed
• Easing type (Power or Linear recommended)
• Delay between content transitions

• Sticky scroll-driven content transitions.
• Image fade in/out effect.
• Fast number opacity switch (100% → 0%).
• Fully scroll-controlled animation.
• Class-based targeting (no attribute setup required).
• Smooth synchronized text and image changes.
• No layout shifting during transitions.

Marquee scroll animation

How it works

This marquee animation is powered by GSAP and targets elements using the class name : rt-marque-train

• The active image fades from opacity The element moves horizontally from : 100% → 0%
• X: 0% → -100%

This creates a continuous right-to-left scrolling effect.

Customization options

• The animation targets elements using the class .rt-marque-train.
• Duplicate the marquee content inside the wrapper to ensure seamless looping.

You can modify inside the GSAP timeline :

• Movement direction (0% → -100% or reverse)
• Duration (controls scrolling speed)
• Repeat value (set to infinite for continuous loop)
• Ease type (Linear recommended for constant speed)

• Smooth horizontal marquee effect.
• Infinite repeat animation.
• Class-based targeting (.rt-marque-train).
• Fully customizable speed and direction.
• No layout shifting during animation.
• Optimized for performance using transform (translateX).