Platform Adaptation

Motion patterns that adapt to platform conventions, device capabilities, and internationalization requirements.

Platform-Specific Conventions

iOS / Apple

Android / Material

Web / Desktop

RTL (Right-to-Left) Adaptation

For languages like Arabic, Hebrew, Farsi, and Urdu, horizontal animations must be mirrored.

What to Mirror

What NOT to Mirror

CSS Implementation

/* Base animation (LTR) */
.slide-in {
  animation: slide-in-ltr 300ms ease-out;
}

@keyframes slide-in-ltr {
  from { transform: translateX(-100%); }
  to { transform: translateX(0); }
}

/* RTL override */
[dir="rtl"] .slide-in {
  animation-name: slide-in-rtl;
}

@keyframes slide-in-rtl {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}

JavaScript Direction Helper

function getDirectionMultiplier() {
  return document.dir === 'rtl' ? -1 : 1;
}

function slideIn(element, options = {}) {
  const dir = getDirectionMultiplier();
  return gsap.from(element, {
    x: (options.distance || 100) * -dir,
    opacity: 0,
    duration: 0.3,
    ease: 'power2.out'
  });
}

Device Capability Adaptation

const capabilities = {
  gpu: detectGPU(),
  memory: navigator.deviceMemory || 4,
  connection: navigator.connection?.effectiveType || '4g',
  cores: navigator.hardwareConcurrency || 4
};

function getAnimationQuality() {
  if (capabilities.memory < 2) return 'minimal';
  if (capabilities.memory < 4) return 'reduced';
  if (capabilities.gpu === 'low-end') return 'standard';
  return 'full';
}

Common Mistakes

1. Forgetting RTL - Test all horizontal animations in RTL mode
2. Mirroring everything - Vertical and scale should NOT mirror
3. Hardcoded directions - Use logical properties and direction multipliers
4. Platform mismatch - iOS users expect iOS conventions
5. Ignoring capabilities - Low-end devices need simpler animations

Related Skills

• transitions/ - Page transition patterns
• accessibility/ - Reduced motion for all platforms
• testing-patterns/ - RTL testing strategies
• tools/ - Platform-specific tool usage

See references/ for complete Framer Motion and Remotion RTL implementations.