Instructions

Hero scroll animation

How it works

This animation creates a cinematic scroll-based hero effect by animating the background image and hero card elements as the user scrolls through the hero section.

The interaction is triggered using the Scroll [hero-v1] animation and combines vertical movement, scaling depth, opacity transitions, and rotation effects to create a smooth immersive experience for the hero layout.

Customization options

• Use the Scroll [hero-v1] trigger to activate the hero animation sequence.
• Apply separate animations for each hero element.
  • [hero-v1-image]
  • [hero-v1-card]
• Adjust animation duration for smoother or faster motion.
  • Lower duration → faster animation
  • Higher duration → smoother transition
• Modify vertical movement using Move Y values.
  • Negative values → move upward
  • Positive values → move downward
• Add depth effect using scale and height properties.
  • Higher values → larger visual expansion
  • Lower values → subtle movement
• Use rotation effects for dynamic card appearance.
  • Higher rotate values → stronger perspective effect
  • Lower rotate values → softer transition
• Control fade animations using opacity values.
  • 0 → 100 → fade in effect
  • 100 → 0 → fade out effect
• Use linear easing for smooth continuous motion.
  • Recommended ease: "Linear"
• Synchronize animations using the Start timing value for better visual flow.

Features

• Smooth scroll-based hero section animation
• Cinematic background image movement
• Dynamic card reveal and perspective transition
• Supports movement, rotation, opacity, and scaling effects
• Fully customizable animation timing and direction
• Lightweight and performance-friendly interaction setup
• Enhances visual storytelling and user engagement
• Creates immersive scrolling experience for hero sections

Scroll card animation

How it works

This animation creates an interactive scrolling card effect by animating multiple service cards horizontally and rotationally as the user scrolls through the section.

The animation is triggered using the Scroll .rt-service-v1 interaction and applies different transform values to each card element, creating a layered movement effect that adds depth and visual storytelling to the layout.

Customization options

• Use the Scroll .rt-service-v1 trigger to activate the animation sequence.
• Apply separate animations for each service card element.
  • [service-v1-card-one]
  • [service-v1-card-two]
  • [service-v1-card-three]
  • [service-v1-arrow]
• Adjust animation duration for smoother or faster transitions.
  • Lower duration → faster animation
  • Higher duration → smoother movement
• Modify horizontal movement using Move X values.
  • Negative values → move left
  • Positive values → move right
• Add rotational motion for layered card interaction.
  • Higher rotate values → stronger tilt effect
  • Lower rotate values → subtle movement
• Use linear easing for consistent animation speed.
  • Recommended ease: "Linear"
• Combine multiple card animations for a stacked interactive scrolling experience.
• Control animation timing using the Start value for synchronized motion effects.
• Use opacity animation for elements like arrows or indicators.
  • 100 → 0 → fade out effect

Features

• Smooth scroll-based card animation
• Dynamic layered movement with depth effect
• Independent animation control for each card
• Supports movement, rotation, and opacity transitions
• Lightweight and performance-friendly interaction setup
• Creates engaging visual storytelling during scrolling
• Fully customizable timing, direction, and motion intensity

Counter

How it works

This animation creates a smooth counting effect that increases numbers dynamically when the user scrolls into the counter section.

The interaction is triggered using the Scroll [counter] animation and reads values from the custom attribute data-counter to animate each number automatically.

Customization options

• Use the Scroll [counter] trigger to activate the animation.
• Apply the animation to the target counter element:
  • [data-counter]
• Set custom values using attributes:
  • data-counter="50"
  • data-counter="100"
  • data-counter="500"
• Adjust animation duration to control counting speed.
  • Lower duration → faster counting
  • Higher duration → smoother counting
• Modify easing styles for different motion effects.
  • Recommended ease: "power1.out"
• Configure scroll trigger positions for precise timing.
  • Start: top 85%
  • Trigger: Counter enters viewport
• Use Math.floor() to display clean whole numbers during animation.
• Enable repeat interactions if continuous counting is required.
• Combine with statistics, finance, analytics, or achievement sections for better engagement.

Features

• Smooth scroll-triggered counter animation
• Dynamic number increment effect
• Supports custom data-counter values
• Lightweight and performance-friendly setup
• Easy integration with statistics sections
• Fully customizable duration and easing
• Clean integer-based counter display
• Improves visual interaction during scrolling

Navbar Sticky

How it works

This animation creates a dynamic sticky navbar effect that changes the navbar background, logo version, arrow icons, and text colors based on scroll position.

The interaction is triggered using ScrollTrigger and automatically switches between light and dark navigation styles when the user scrolls past the defined threshold.

Customization options

• Use the navbar wrapper class to control the sticky animation:
  • .rt-navbar-v1
• Apply logo switching using custom attributes:
  • [navlogo="white"]
  • [navlogo="dark"]
• Apply arrow icon switching using:
  • [navarrow="white"]
  • [navarrow="dark"]
• Control navigation text color using:
  • [data="nav-text-v1"]
• Adjust navbar background colors:
  • transparent → initial state
  • #ffffff → scrolled state
• Modify opacity values for smooth visual transitions.
  • opacity: 0 → hidden
  • opacity: 1 → visible
• Use pointerEvents settings to prevent inactive elements from being clickable.
• Customize animation duration for smoother interactions.
  • Lower duration → faster transition
  • Higher duration → softer animation
• Configure scroll trigger distance:
  • self.scroll() > 10
• Apply GSAP overwrite: "auto" for cleaner animation handling.
• Synchronize logos, arrows, and text animations together for seamless navbar transitions.

Features

• Sticky navbar background transition
• Dynamic logo color switching
• Arrow icon color change support
• Multiple text item color animation
• Smooth opacity-based transitions
• Lightweight GSAP + ScrollTrigger setup
• Fully customizable class and attribute system
• Responsive-friendly interaction behavior
• Clean and modern scroll-based navigation effect

‍

Navbar mobile menu open animation

How it works

This animation creates a responsive navbar toggle effect that smoothly transforms menu lines into a close icon during interaction.

The animation is triggered using the w--open state and synchronizes the menu button animation with the navigation open and close behavior across desktop and mobile devices.

Customization options

• Use the .w-nav-button trigger to control menu interactions.
• Apply animations to the target elements:
  • .rt-nav-top-line
  • .rt-nav-bottom-line
• Adjust rotation values to customize the close icon effect.
  • 45deg → diagonal open state
  • -45deg → reverse diagonal effect
• Modify vertical movement using y values.
  • Positive values → downward movement
  • Negative values → upward movement
• Control animation duration for smoother transitions.
  • Lower duration → faster interaction
  • Higher duration → softer motion
• Apply easing styles to improve animation smoothness.
  • Recommended ease: "power3.inOut"
• Use GSAP timelines for synchronized multi-element animation control.
• Configure responsive behavior for:
  • Desktop reset animation
  • Mobile and tablet open-close transitions
• Use MutationObserver to detect navigation state changes automatically.
• Enable resize handling to maintain animation consistency across screen sizes.

Features

• Smooth responsive navbar animation
• Dynamic hamburger-to-close icon transition
• Supports desktop, tablet, and mobile devices
• Lightweight GSAP-based interaction setup
• Synchronized multi-line animation control
• Automatic state detection using MutationObserver
• Fully customizable movement and rotation values
• Responsive resize handling support
• Enhances navigation interaction experience

Client marquee

How it works

This animation creates a continuous horizontal marquee movement that automatically scrolls client elements across the screen in an infinite loop.

The interaction is triggered on Page Load and animates the targeted client marquee element from its original horizontal position to the left, creating a seamless scrolling effect commonly used for client logos, brand showcases, and partner sections.

Customization options

• Use the Page Load trigger to automatically start the marquee animation.
• Apply the animation to the target element:
  • [client-marquee="1"]
• Adjust animation duration to control marquee speed.
  • Lower duration → faster scrolling
  • Higher duration → slower movement
• Modify horizontal movement using Move X values.
  • 0 → -100% → left scrolling effect
  • 0 → 100% → right scrolling effect
• Use infinite repeat for continuous seamless movement.
  • Recommended repeat: "Infinite"
• Apply linear easing for consistent scrolling speed.
  • Recommended ease: "Linear"
• Combine duplicated marquee content for a seamless loop effect.
• Adjust stagger settings if animating multiple marquee items independently.
• Keep opacity fixed for uninterrupted brand visibility during scrolling.

Features

• Smooth infinite marquee scrolling animation
• Ideal for client logos and partner showcases
• Automatic animation on page load
• Fully customizable speed and direction
• Lightweight and performance-friendly setup
• Supports seamless looping motion effects
• Creates engaging brand presentation sections
• Enhances visual movement and website interaction

FAQ

How it works

This animation creates an interactive FAQ accordion effect that expands and collapses answer sections when users click on a question item.

The interaction is triggered using the Click [faq-v1] animation and controls both the FAQ description height and the rotation of the indicator line icon, creating a smooth expandable dropdown experience for FAQ sections.

Customization options

• Use the Click [faq-v1] trigger to activate the FAQ interaction.
• Apply the animation to the following target elements:
  • [faq-v1-description]
  • [faq-v1-line="1"]
• Configure click behavior settings for accordion interaction.
  • Click type: "Each click"
  • Control mode: "Toggle play/reverse"
• Adjust animation duration for smoother or faster expansion.
  • Lower duration → faster dropdown
  • Higher duration → smoother transition
• Animate FAQ description height for open and close effects.
  • 0px → Auto → expand content
  • Auto → 0px → collapse content
• Rotate the indicator line or icon for active state feedback.
  • 90deg → 0deg → plus to minus effect
  • 0deg → 90deg → reverse rotation
• Use linear easing for smooth and consistent motion.
  • Recommended ease: "Linear"
• Configure stagger settings if animating multiple FAQ items sequentially.
• Add delay settings for custom interaction timing if required.

Features

• Smooth expandable FAQ accordion animation
• Interactive click-based dropdown behavior
• Dynamic content height expansion and collapse
• Rotating indicator icon animation
• Lightweight and performance-friendly setup
• Fully customizable timing and interaction controls
• Supports toggle open and close functionality
• Enhances readability and user interaction
• Creates clean modern FAQ section experience

Progress bar fill animation

How it works

This animation creates an interactive progress bar growth effect that fills multiple chart bars vertically as the user scrolls through the section.

The interaction is triggered using the Scroll [progress-bar-v1] animation and dynamically increases the height of each progress bar element, creating a smooth data visualization effect for contribution charts, statistics cards, and financial dashboards.

Customization options

• Use the Scroll [progress-bar-v1] trigger to activate the animation sequence.
• Apply separate animations for each progress bar element.
  • [progress-bar-line="1"]
  • [progress-bar-line="2"]
  • [progress-bar-line="3"]
  • [progress-bar-line="4"]
  • [progress-bar-line="5"]
• Configure scroll trigger positions for precise animation timing.
  • Start: Element top → Viewport bottom
  • End: Element bottom → Viewport top
• Adjust animation duration for smoother or faster bar filling.
  • Lower duration → faster growth
  • Higher duration → smoother animation
• Animate bar height values for visual progress effects.
  • 0% → 45%
  • 0% → 75%
  • 0% → 25%
  • 0% → 50%
  • 0% → 32%
• Use easing styles for natural motion transitions.
  • Recommended ease: "Power 1 out"
• Configure stagger settings for sequential chart animations if needed.
• Use scrub or trigger action controls for scroll synchronization.
• Combine with percentage labels for enhanced data visualization.

Features

• Smooth scroll-triggered progress bar animation
• Dynamic chart and statistics visualization
• Independent animation control for multiple bars
• Fully customizable height and timing settings
• Lightweight and performance-friendly interaction setup
• Supports financial dashboard and analytics sections
• Creates engaging visual storytelling through data
• Enhances user interaction with animated statistics
• Ideal for contribution charts, reports, and metric displays