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-train-v1" and transitions the X position from 0% to -100%, creating a seamless marquee movement commonly used for text banners and looping sections.

Customization options

• Use the attribute data="marquee-train-v1" 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

• SmoothSmooth infinite horizontal scrolling animation
• Ideal for text banners and looping sections
• Fully customizable speed and direction
• Lightweight and performance-friendly
• Creates dynamic movement and visual engagement

Counter

How it works

This animation creates a smooth number counting effect that triggers when the element scrolls into view, animating from zero up to the target number.

The animation targets elements with the attribute data-counter and counts up from 0 to whatever value is set in the attribute, creating an engaging statistic reveal commonly used for achievements and milestone sections.

Customization options

• Use the attribute data-counter="ANY_NUMBER" to apply the animation to any element.
  • Example: data-counter="25" counts up to 25
  • Example: data-counter="98" counts up to 98
  • Example: data-counter="1450" counts up to 1450
• Adjust the animation speed by changing the duration.
  • Lower duration → faster count
  • Higher duration → slower count
• Modify when the counter triggers by changing the start value.
  • top 85% → triggers earlier as element enters view
  • top 50% → triggers when element reaches center
• Control replay behavior by changing toggleActions.
  • play none none none → counts once, never replays
  • play none none reset → replays every time you scroll back

Features

• Smooth scroll-triggered number counting animation
• Ideal for statistics, achievements, and milestone sections
• Fully customizable target number via data-counter attribute — set any number you want
• Counts only integers, no decimals
• Triggers once when element enters the viewport
• Lightweight and performance-friendly

Banner Slider

How it works

This animation creates a smooth auto-playing image and text slider that transitions between slides with a vertical wipe effect, scaling the active image from 1.2 to 1 for a subtle Ken Burns effect.

The animation targets elements with specific classes and transitions images, tags, and headings in sequence, creating an engaging hero section commonly used for interior design and portfolio showcases.

Customization options

• Images use these classes to apply the animation.
  • fda-hero-v3-banner-image → large hero images (3 needed)
  • fda-small-image-v1 / v2 / v3 → small preview images
• Tags use these classes for text reveal.
  • fda-tag-wrapper fda-v1 / fda-v2 / fda-v3 → one per slide
• Headings use these classes for text reveal.
  • fda-h5-heading fda-text-1 / fda-text-2 / fda-text-3 → one per slide
• Arrow buttons control manual navigation.
  • fda-progress-left → goes to previous slide
  • fda-progress-right → goes to next slide
• Progress bar fills automatically between slides.
  • fda-inner-bar → the filling bar element
• Adjust the auto-play speed by changing the duration.
  • Lower duration → faster auto-play
  • Higher duration → slower auto-play

Features

• Smooth vertical wipe transition between images
• Subtle Ken Burns scale effect on each large image
• Auto-plays continuously with a progress bar
• Manual prev/next arrow navigation with active dark state
• Text tag and heading animate in and out per slide
• Small preview image transitions in sync with large image
• Clicking an arrow pauses auto-play then resumes after transition

FAQ Accordion

How it works

This animation creates a smooth open and close accordion effect on FAQ items. When a trigger is clicked the answer expands from height 0 to auto, and the icon bar rotates to indicate the open state. Clicking again reverses both animations to close.

The animation targets [FAQ-answer] for the height transition and [FAQ-bar] for the icon rotation, both within the clicked trigger element.

Customization options

• Use these attributes on your elements to apply the animation.
  • FAQ-answer → add this attribute to the answer/content div
  • FAQ-bar → add this attribute to the plus/minus icon element
• Adjust the animation speed by changing the duration.
  • Lower duration → faster open and close
  • Higher duration → slower open and close
• Modify the icon rotation by changing the rotate value.
  • 90 → 0 → rotates from vertical to horizontal on open
  • 45 → 0 → rotates to a diagonal cross on open
• Only one FAQ item opens at a time — clicking a new item closes the previous one automatically.

Features

• Smooth height transition from 0 to auto on open
• Icon bar rotates 90 degrees to indicate open state
• Clicking same item again closes it
• Opening a new item automatically closes any previously open item
• Duration 0.3s with linear ease matches your Webflow interaction settings
• Lightweight and works with any number of FAQ items on the page
  

Hover Image

How it works

This animation creates a smooth hover effect on team cards. When you hover over a card, a blur overlay fades in, a small image scales up from nothing, and the large image scales up slightly — all triggered together on hover enter and reversed on hover leave.

The animation targets three elements within each card using attributes, creating an engaging interactive effect commonly used for team and portfolio sections.

Customization options

• Use these attributes on your elements to apply the animation.
  • blur-overlay="1" → add this to the overlay div that fades in
  • small-image-hover → add this to the small image that pops in
  • large-image-hover → add this to the main card image
• Three actions fire together on hover enter.
  • Blur overlay fades from opacity 0 → 100% in 0.6s with Power 4 out ease
  • Small image scales from 0 → 1 in 0.7s with Linear ease
  • Large image scales from 1 → 1.1 in 0.45s with Linear ease
• All three reverse automatically on hover leave.
• Trigger is set on card-wrapper so the whole card area is hoverable.
• Disable on mobile by setting Conditional Playback to Mobile (L), Mobile → No animation

Features

• Smooth blur overlay fade on hover
• Small image pops in from scale 0 to full size
• Large image subtly scales up for a zoom effect
• All animations reverse cleanly on hover leave
• Disabled on mobile automatically via conditional playback
• Works with CMS collection lists for dynamic team members

Service hover animation

How it works

This animation creates a smooth hover effect on service list items. When you hover over a row, that row becomes fully opaque and its arrow button fills white with a dark icon, while all other rows fade and their arrows go back to outlined. The matching image fades in on the right. On mouse leave, everything resets to the first item.

The animation targets four element groups using class selectors, with a shared activeIndex variable to prevent redundant re-triggers.

Customization options

• Use these class names on your Webflow elements to connect the animation:
  • .fda-service-wrapper → add to each service row (the hoverable trigger)
  • .fda-service-v6-box → add to each image box that fades in/out
  • .fda-icon-main-wrapper → add to the circular arrow button container
  • .fda-service-arrow → add to the arrow icon element inside the button
  • .fda-service-v6-bottom-wrapper → add to the outer section wrapper (used to detect mouse leave)
• Arrow active state uses backgroundColor: #ffffff on the circle and filter: invert(0%) on the icon — no color overrides needed on the icon itself.
• Inactive arrows use backgroundColor: transparent and filter: invert(100%) to show white on dark backgrounds.
• All four element groups must have equal counts — one of each per service row, in DOM order.

What fires on hover enter

• All service rows fade to opacity: 0.6 in 0.4s with Power2 out ease
• The hovered row snaps back to opacity: 1 in 0.4s
• All image boxes fade to opacity: 0 and scale to 1.1 in 0.5s
• The matching image box fades to opacity: 1 and scales to 1 in 0.5s
• The matching arrow circle fills white; all others go transparent with white border
• The matching arrow icon inverts to black; all others stay white

What fires on mouse leave

• All rows reset to opacity: 0.6, then row 0 resets to opacity: 1
• All images reset to hidden/scaled out, then image 0 resets to visible
• Arrow 0 becomes active (white fill, black icon); all others reset to outlined
• activeIndex resets to 0

Initial state on load

• Row 0 starts at opacity: 1; rows 1–3 start at opacity: 0.6
• Image 0 starts at opacity: 1, scale: 1; others start at opacity: 0, scale: 1.1
• Arrow 0 starts active (white bg, black icon); others start outlined (transparent bg, white icon)
• All set via gsap.set — instant, no animation on load

Features

• Arrow active state driven by CSS filter: invert() — works on any icon color
• Guard clause (if activeIndex === index return) prevents redundant re-triggers
• Mouse leave resets to first item, not just clears state
• Null check on serviceSection prevents errors if element is missing
• Wrapped in DOMContentLoaded — safe to place in <head> or before elements exist
• No Webflow interactions needed — pure GSAP via custom code embed

Feature list hover

How it works

This animation creates a smooth opacity-based hover effect on a vertical list of feature items. When you hover over any item it becomes fully opaque while all other items fade to half opacity. When the cursor leaves the list entirely, the last hovered item stays active — the list does not reset on mouse leave.

The animation targets all elements with the class .fda-feature-list-item and uses a shared activeIndex variable to track which item was last interacted with.

Customization options

• Use the class .fda-feature-list-item on each row in your feature list to apply the animation.
• Adjust the animation speed by changing the duration.
  • Lower duration → faster fade
  • Higher duration → slower fade
• Change the inactive opacity by modifying the 0.5 value.
  • 0.3 → stronger contrast between active and inactive
  • 0.7 → subtler fade for a lighter effect
• The first item starts active on load — change items[0] to items[1] or any other index to start a different item active.
• Works with any number of items — no hardcoded count required.

What fires on hover enter

• All items animate to opacity: 0.5 in 0.3s with Power2 out ease
• The hovered item animates to opacity: 1 in 0.3s
• activeIndex updates to the current item's index

What fires on hover leave

• A 50ms timeout checks if the cursor has moved to another list item
• If no item is hovered, the last active item stays at opacity: 1 and all others stay at opacity: 0.5
• The list does not reset to the first item — the last hovered item remains active

Initial state on load

• Item 0 starts at opacity: 1
• Items 1 and 2 start at opacity: 0.5
• Set via gsap.set — instant, no animation on load
• Script returns early if no .fda-feature-list-item elements are found on the page

Features

• Last hovered item stays active after cursor leaves — no jarring reset
• 50ms debounce on mouse leave prevents flickering when moving between items
• Guard clause skips re-animation if the same item is re-entered
• Early return prevents errors if the class is missing from the page
• Wrapped in DOMContentLoaded — safe to place anywhere in the page
• No Webflow interactions needed — pure GSAP via custom code embed