Animations & FX Reference

Character-by-character text reveal

Text splits into characters, each fading in individually, linked to scroll position

GSAP + SplitType + ScrollTrigger (scrub mode, stagger: 0.05s, power2.out)

GSAP + SplitType + ScrollTrigger — hero, challenge, case studies headings (scrub, stagger: 0.05s, power2.out)

Element scroll reveals (fade, slide, scale, blur, clip-path)

Elements animate in with configurable presets as they enter the viewport, fully reversible

Webflow IX2 scroll-triggered TRANSFORM_MOVE + STYLE_OPACITY with staggered keyframes across all pages

useScrollAnimation — GSAP + ScrollTrigger scrub (11 presets, 5 easings, delay, randomRotate)

Simple scroll reveal (opacity + translateY)

Basic fade-up reveal with fixed travel distance

IX2 stat-intoview: 4 stat numbers fade + slide up (y: 1.5-3rem → 0, 600ms ease, staggered delays)

useScrollReveal (not yet used, superseded by useScrollAnimation)

Staggered rotation entrance

Cards rotate into view alternately from left and right with translateX + rotateZ

4 stats cards alternate from left (x:-30rem, z:-15deg) and right (x:28rem, z:+15deg), IX2 home-second

Gradient sweep on viewport entry

Radial gradient overlay sweeps across card backgrounds on scroll entry, then loops through positions

stats cards: gradient sweeps x:-90%→0% (2s outExpo), then loops through 4 ambient positions (2s/step)

Scale-in reveal (scale + translate + opacity)

Elements scale down from oversized while sliding in and fading, creating depth

solution cards scale 1.5→1, translateY 80%→0%, fade in, IX2 solution (SCROLL_PROGRESS)

Hero video expand-on-scroll

Hero video container grows from constrained to full-width as user scrolls through hero section

width 48–60% → 100%, borderRadius 1.7vw → 0, scroll-linked at 20–33%

useHeroScroll — GSAP timeline + ScrollTrigger scrub at 15%–35%, width 65% → 100%, borderRadius → 0

Hero image parallax + gloss overlay

Image zooms with object-position shift, frame expansion, and diagonal white gloss sweep

useHeroImageParallax — GSAP ScrollTrigger onUpdate: scale 1.0→1.8, crop 50%→-30%, frame +6%, gloss 0.3→0.75

Floating panel parallax (differential scroll speed)

Positioned elements scroll faster than page at constant rates with viewport-based fade in/out

Command Center side panels — left (12% faster) and right (8% faster) with fade in at 85% vh, fade out at top 18% vh

Parallax marquee text

Background-clip text with scroll-linked horizontal gradient sweep for reveal/unreveal

two-phase slide in (15–24%) / out (28–35%) within .height-cases section

Hero parallax layers

Multiple positioned elements move upward at different scroll rates, creating layered depth

7 elements (set-1 through set-7) at different rates (-51vw to -70vw), IX2 hero-scroll-july (SCROLL_PROGRESS)

Card spotlight (cursor-tracking gradient)

Radial gradient follows cursor via CSS --mouse-x / --mouse-y custom properties on cards

#cards .service-card, ::before pseudo-element, opacity 500ms transition

useCardSpotlight: .card-spotlight elements, same CSS variable technique

Magnetic button glow (explode)

Hidden .explode element inside buttons tracks cursor and scales up massively on hover

scale 0.1→50–70, 0.6s cubic-bezier(.455,.03,.515,.955), text color swap

Magnetic element attraction

Elements shift toward cursor proportional to distance and configurable strength

Social icons (strength 10), stat blocks (strength 30), instant reset on leave

Multi-layer image hover

Image duplicated into layers that fan out on hover via staggered GSAP timeline

4 layers, scale property, power2.inOut, -0.1s reverse stagger, data-attribute config

Count-up numbers

Numbers animate from 0 to target value on viewport entry with easeOutCubic

useCountUp (IntersectionObserver trigger, plays once, not yet used in pages)

Nav collapse on scroll direction

Nav links shrink/fade on scroll-down, expand on scroll-up; button fills the space

scale(0.6), width 0, opacity 0, button expands to 16rem, 0.7s ease

Logo swap (section background detection)

Logo variant switches based on which section the nav overlaps via section-color attribute

reads section-color="black"|"white", toggles opacity + z-index per frame

Swiper carousel with hover theme

Touch-enabled carousel with slide color inversion on hover (light ↔ dark)

Swiper 8, speed 2100ms, loop, 2.25 slides desktop / 1 mobile

Testimonial section collapse

Content elements collapse into compact proof bar on scroll-down, reverse on scroll-up

headings width→0, Clutch icon 3.875vw→16.6vw, 0.3–0.7s transitions

Preloader (first visit)

Lottie logo animation on first visit, skipped on return via sessionStorage

DOMContentLoaded + sessionStorage check, hidden for internal navigation

Lottie scroll control

Lottie animation playback progress tied to scroll position (scrubbed)

card Lottie loops (SCROLL_INTO_VIEW trigger) Development: Lottie scrub via SCROLL_PROGRESS