Instructions

Marquee

How it works

This animation creates a continuous horizontal scrolling effect by moving elements from their original position to the left across the screen.

The animation targets elements with the attribute  data= "marquee" and transitions the X position from 0% to -100%, creating a seamless marquee movement commonly used for logos, announcements, or looping text sections.

Customization options

• Use the attribute data= "marquee" to apply the animation.
• Adjust the animation speed by changing the duration.
  • Lower duration → faster movement
  • Higher duration → slower movement
• Modify the movement direction by changing the X values.
  • 0% → -100% → left scroll
  • 0% → 100% → right scroll
• Enable infinite looping for continuous movement.
• Add linear easing for a consistent scrolling speed.
  • Recommended: ease: "none"
• Combine with duplicated content for a seamless infinite marquee effect.

Features

• Smooth infinite horizontal scrolling animation
• Ideal for logo strips, text banners, and announcements
• Fully customizable speed and direction
• Lightweight and performance-friendly
• Creates dynamic movement and visual engagement

FAQ animation

How it works

This animation creates a smooth FAQ toggle effect where the answer box expands from 0px height to auto when activated.

Elements with the class "rt-faq-bottom-wrapper" are targeted for height animation, allowing dynamic content expansion.

At the same time, the element with data-plus rotates to indicate open/close state.The animation is triggered on click and uses GSAP for smooth transitions.

Customization options

• Use the class "rt-faq-bottom-wrapper" for the FAQ answer container.
• Default state should be height: 0px and overflow: hidden.
• Adjust the animation speed by changing the duration.
  • Lower duration → faster expand/collapse
  • Higher duration → smoother, slower motion
• Animate height from 0 to "auto" for flexible content size.
• Use the attribute data-plus for the icon element.
  • Rotate 0deg → closed state
  • Rotate 45deg or 180deg → open state
• Add easing for better motion feel.
  • Recommended ease: "power2.out"

Features

• Smooth height animation from 0px to auto
• Clean FAQ accordion interaction
• Icon rotation for clear visual feedback
• Works with dynamic content length
• Lightweight and performance-friendly

Stagger card reveal

How it works

This animation reveals cards one by one using a staggered fade-up effect.

The animation targets elements with the attribute data="card-v2" and separates cards into two groups:

• Cards already visible in the viewport animate immediately on page load.
• Remaining cards animate as they enter the viewport while scrolling.

Each card transitions from lower opacity and a downward Y offset to its original position, creating a smooth layered reveal effect.

Customization options

• Use the attribute data="card-v2" to apply the animation.
• Adjust the stagger value to control the delay between cards.
  • Default: 0.3
  • Lower value → faster sequence
  • Higher value → more dramatic reveal
• Customize the Y movement distance.
  • Default: 80
  • Smaller values create subtler motion.
• Modify the animation duration.
  • Default: 0.8s
• Change the easing style for different motion feels.
  • power2.out → smooth and modern
  • power3.out → softer finish
• Adjust the ScrollTrigger start position.
  • Default: "top 85%"
  • Earlier trigger: "top 95%"
  • Later trigger: "top 70%"

Features

• Smooth staggered card entrance animation
• Instantly animates visible cards on page load
• Reveals additional cards on scroll
• Creates depth and visual rhythm in layouts
• Fully customizable timing, spacing, and movement
• Lightweight and performance-friendly for large grids

Counter animation

How it works

This animation creates a counting effect by animating numbers from 0 to a specified target value when the element enters the viewport.

The animation targets elements with the attribute data-counter. Each element reads its target number directly from the attribute value and smoothly increments the number using GSAP.

The animation is triggered using ScrollTrigger when the element reaches 85% of the viewport.

Customization options

• Use the attribute data-counter to define the target number.
  • Example: data-counter="150"
• Adjust the animation duration to control counting speed.
  • Default: 2s
• Customize the easing for different motion styles.
  • power1.out → smooth deceleration
  • power2.out → softer finish
• Change the ScrollTrigger start point.
  • Default: "top 85%"
  • Earlier trigger: "top 95%"
  • Later trigger: "top 60%"
• Use snap to create whole-number counting instead of decimals.
• Add prefixes or suffixes using additional text elements.
  • Example: +150
  • Example: 150K

Features

• Smooth animated number counting effect
• Triggered on scroll using ScrollTrigger
• Automatically reads values from attributes
• Supports customizable speed and trigger position
• Lightweight and performance-friendly
• Perfect for stats, achievements, and metrics sections

Navbar hamburger

How it works

This animation transforms the navbar hamburger icon into a close icon when the mobile menu is opened.

The animation targets the hamburger lines:

• .rt-top-line
• .rt-middle-line
• .rt-bottom-line

Using a GSAP timeline, the top and middle lines rotate into an “X” shape while the bottom line scales down and disappears.

The animation automatically syncs with Webflow’s native navbar state by detecting the w--open class on .w-nav-button.

On desktop screens, the animation resets automatically to prevent unwanted states during resizing.

Customization options

• Use .w-nav-button as the Webflow navbar trigger.
• Customize the line movement and rotation values.
  • Top line:
    • y: 7.5
    • rotateZ: 44
  • Middle line:
    • rotateZ: -44
• Modify the bottom line hide animation.
  • Default:
    • scaleX: 0
• Adjust animation duration.
  • Default: 0.45s
• Customize easing styles.
  • power3.inOut → smooth and polished
  • power2.out → faster interaction feel
• Change the transform origin for different rotation behavior.
• Adjust responsive breakpoint behavior.
  • Current desktop reset breakpoint:
    • 991px
• Add opacity, color, or background transitions for enhanced interactions.

Features

• Smooth hamburger-to-close icon transformation
• Fully synced with Webflow native navbar state
• Responsive behavior with automatic desktop reset
• Timeline-based animation control
• Smooth rotation and scaling transitions
• Lightweight and performance-friendly
• Ideal for mobile navigation menus and responsive headers

Clickable slider

How it works

This animation creates a seamless infinite testimonial slider using GSAP. All testimonial slides are duplicated once, allowing the slider to loop continuously without visible jumps.

Elements with the attribute data-slide are treated as individual slides, while the container with the class "rt-testimonial-main-wrapper" is translated horizontally based on the active slide index.

Navigation is controlled through elements containing data-left-button and data-right-button attributes. Clicking either button smoothly moves the slider to the previous or next testimonial.

When the slider reaches the last original slide, it instantly resets to the first slide position after the animation completes, creating an infinite loop effect.

Customization options

• Use the class "rt-testimonial-main-wrapper" for the slider track.
• Add the attribute data-slide to each testimonial item.
• Add navigation buttons:
  • data-left-button
  • data-right-button

Features

• Infinite looping carousel
• Smooth GSAP-powered transitions
• Previous and next navigation controls
• Dynamic slide width calculation
• Seamless slide reset without visual flicker
• Resize-aware positioning
• Lightweight and performance-friendly
• Easy attribute-based setup
• No external slider library required
• Fully customizable animation timing and easing

Integration card

How it works

This interaction highlights a single integration card when users hover over it. The active card receives an icon scale animation and activates the associated icon, arrow, and inner arrow states by adding the rt-active class.

The script targets every element with the class .rt-integration-item. On page load, the first card is activated automatically, and hovering over another card transfers the active state while resetting all others.

Customization options

• Target items
  • Use the class .rt-integration-item for each interactive card.
• Default active card
  • Change items[0] to another index.
  • items[0] → First card
  • items[2] → Third card
• Animation scale
  • Modify the active icon scale value.
  • scale: 1.08 → Larger icon
  • scale: 1 → Disable scaling
• Animation duration
  • Adjust the transition speed.
  • Lower duration → Faster animation
  • Higher duration → Slower animation
• Animation easing
  • Replace "power2.out" with any GSAP easing.
  • Examples:
    • "power1.out"
    • "power3.out"
    • "back.out(1.7)"
• Active state classes
  • Customize styles by editing:
    • .rt-active on .rt-integration-icon
    • .rt-active on .rt-integration-item-arrow
    • .rt-active on .rt-arrow-inner
• Interaction trigger
  • Current trigger: mouseenter
  • Replace with click if you prefer click-based activation.

Features

• Automatically activates the first integration card on page load.
• Smooth GSAP-powered icon scaling animation.
• Only one card remains active at a time.
• Active state updates instantly on hover.
• Lightweight and easy to customize.
• Clean, reusable structure for Webflow projects.
• Uses CSS classes for complete design flexibility.
• Optimized for modern browsers and responsive layouts.

Active FAQ

How it works

This interaction creates an accordion where only one FAQ item remains open at a time. The first item is automatically expanded when the page loads, while all other items stay collapsed.

The script targets every element with the class .rt-integration-main-item. Clicking an item adds the rt-active class, animates its content open using GSAP, and closes any previously active item with a smooth height and opacity transition.

Customization options

• Target items
  • Use the class .rt-integration-main-item for each accordion item.
• Content wrapper
  • Place the expandable content inside .rt-integration-text.
• Default open item
  • Change the default active index.
  • index === 0 → First item open
  • index === 1 → Second item open
  • index === 2 → Third item open
• Animation duration
  • Modify the opening and closing speed.
  • Lower duration → Faster animation
  • Higher duration → Slower animation
• Animation easing
  • Replace "power2.out" with any GSAP easing.
  • Examples:
    • "power1.out"
    • "power3.out"
    • "back.out(1.7)"
• Active state classes
  • Customize the appearance by styling:
    • .rt-active on .rt-integration-main-item
    • .rt-active on .rt-check-icon
    • .rt-active on .rt-integration-text
• Interaction trigger
  • Current trigger: click
  • Replace with mouseenter if you want hover-based activation.
• Initial state
  • All inactive content is hidden using:
    • height: 0
    • opacity: 0
    • overflow: hidden

Features

• Automatically expands the first FAQ item on page load.
• Only one accordion item remains open at a time.
• Smooth GSAP height and opacity animations.
• Active states are managed with reusable CSS classes.
• Lightweight, responsive, and performance-friendly.
• Easy to customize for FAQs, feature lists, or expandable content sections.
• Clean JavaScript with no external dependencies beyond GSAP.
• Ideal for Webflow projects and reusable components.