Service / Motion

Advanced Motion

60fps. Always.

Motion that earns its bytes — GSAP, ScrollTrigger, Lottie, and CSS animations choreographed for clarity, performance, and reduced-motion users.

Discuss your project Selected Work
motion.ts

// Scroll-driven hero — SSR safe

import { gsap } from 'gsap';

import { ScrollTrigger } from 'gsap/ScrollTrigger';


gsap.registerPlugin(ScrollTrigger);


gsap.to('.hero', {

scale: 0.85,

opacity: 0.4,

scrollTrigger: { trigger: '.hero', scrub: 0.5 },

});

Capabilities_

// 01

GSAP + ScrollTrigger

Pinned sections, scroll-driven timelines, parallax, marquee, and scroll-snap experiences. SSR-safe registration.

// 02

Page Transitions

View Transitions API + GSAP fallbacks for SPA-style navigation, shared element transitions, and route-aware choreography.

// 03

Lottie & SVG

After Effects → Lottie pipeline. SVG sprite animations, morphing paths, and stroke choreography.

// 04

Reduced Motion

Respect prefers-reduced-motion at the system level. Replace decorative motion with crossfades or static states.

// 05

Performance Tuning

GPU-friendly transforms, will-change hygiene, requestAnimationFrame for layout-thrashing avoidance, and FPS budgets per scene.

// 06

Interaction Microcopy

Hover, focus, loading, and success states that communicate without dominating. Coordination with form validation patterns.

Deliverables

  • Motion brief + reference timeline (storyboard)
  • GSAP/Lottie scenes integrated with TypeScript
  • Reduced-motion alternative for every animation
  • Performance profile (60fps verified per device class)
  • Reusable hooks/composables for animation triggers
  • Documentation for engineering team handoff

Stack & Tooling

GSAP ScrollTrigger Lenis Lottie Framer Motion View Transitions API CSS Animations TypeScript

Ready to ship?

Send the load profile, deadline, and constraints. We'll come back with a stack and a plan.

Send a brief

Related Services

UI/UX Engineering _ Core Web Vitals _ Web Applications _