Advanced Motion Platform

A motion design and animation skill for creating programmatic animations, transitions, and visual effects for web applications, video content, and interactive experiences.

When to Use

Choose Advanced Motion Platform when:

• Building complex animation sequences for web applications with Framer Motion or GSAP
• Creating programmatic video animations and motion graphics
• Implementing physics-based animations and gesture-driven interactions
• Designing micro-interactions and page transitions for UI/UX

Consider alternatives when:

• Simple CSS animations suffice — use CSS transitions and keyframes
• Creating 3D animations — use Three.js or Blender
• Building video animations with math — use Manim

Quick Start

Copy
# Install Framer Motion for React
npm install framer-motion

# Install GSAP for general web animation
npm install gsap

Copy
import { motion, AnimatePresence, useScroll, useTransform } from 'framer-motion';

// Animated component with variants
const cardVariants = {
  hidden: { opacity: 0, y: 50, scale: 0.95 },
  visible: (i: number) => ({
    opacity: 1,
    y: 0,
    scale: 1,
    transition: {
      delay: i * 0.1,
      duration: 0.5,
      ease: [0.25, 0.46, 0.45, 0.94]
    }
  }),
  exit: { opacity: 0, scale: 0.9, transition: { duration: 0.2 } }
};

function AnimatedCardList({ items }: { items: Item[] }) {
  return (
    <AnimatePresence mode="popLayout">
      {items.map((item, i) => (
        <motion.div
          key={item.id}
          custom={i}
          variants={cardVariants}
          initial="hidden"
          animate="visible"
          exit="exit"
          layout
          whileHover={{ scale: 1.02, boxShadow: '0 8px 30px rgba(0,0,0,0.12)' }}
          whileTap={{ scale: 0.98 }}
          className="card"
        >
          <h3>{item.title}</h3>
          <p>{item.description}</p>
        </motion.div>
      ))}
    </AnimatePresence>
  );
}

// Scroll-linked animation
function ParallaxHeader() {
  const { scrollY } = useScroll();
  const y = useTransform(scrollY, [0, 500], [0, -150]);
  const opacity = useTransform(scrollY, [0, 300], [1, 0]);
  const scale = useTransform(scrollY, [0, 500], [1, 1.2]);

  return (
    <motion.div
      style={{ y, opacity, scale }}
      className="parallax-header"
    >
      <h1>Welcome</h1>
    </motion.div>
  );
}

Core Concepts

Animation Library Comparison

Feature	Framer Motion	GSAP	CSS Animations	Lottie
React Integration	Native	Plugin	Class-based	Component
Performance	GPU-accelerated	GPU-accelerated	GPU for transforms	Canvas/SVG
Layout Animations	Built-in	Manual	None	None
Gesture Support	Built-in	Draggable plugin	None	None
SVG Animation	Full	Full	Limited	Full
File Size	~30KB	~25KB	0KB	~50KB
Learning Curve	Low	Medium	Low	Medium

GSAP Animation Patterns

Copy
import gsap from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';

gsap.registerPlugin(ScrollTrigger);

// Timeline for sequenced animations
function createEntryAnimation(container: HTMLElement) {
  const tl = gsap.timeline({
    defaults: { ease: 'power3.out', duration: 0.8 }
  });

  tl.from(container.querySelector('.hero-title'), {
    y: 100, opacity: 0, duration: 1
  })
  .from(container.querySelector('.hero-subtitle'), {
    y: 50, opacity: 0
  }, '-=0.4')
  .from(container.querySelectorAll('.feature-card'), {
    y: 80, opacity: 0, stagger: 0.15
  }, '-=0.3')
  .from(container.querySelector('.cta-button'), {
    scale: 0, opacity: 0, ease: 'back.out(2)'
  }, '-=0.2');

  return tl;
}

// Scroll-triggered animations
function setupScrollAnimations() {
  gsap.utils.toArray('.section').forEach((section: any) => {
    gsap.from(section.querySelectorAll('.animate-in'), {
      scrollTrigger: {
        trigger: section,
        start: 'top 80%',
        end: 'bottom 20%',
        toggleActions: 'play none none reverse'
      },
      y: 60,
      opacity: 0,
      duration: 0.8,
      stagger: 0.1
    });
  });
}

Configuration

Option	Description	Default
library	Animation library: framer-motion, gsap, css	"framer-motion"
reduce_motion	Respect prefers-reduced-motion	true
default_duration	Default animation duration (seconds)	0.3
default_easing	Default easing function	"ease-out"
gpu_acceleration	Force GPU layer promotion	true
stagger_delay	Default stagger between items (seconds)	0.05
exit_animations	Enable exit/unmount animations	true
debug_mode	Show animation bounding boxes	false

Best Practices

1. Respect prefers-reduced-motion by checking the media query and disabling or simplifying animations for users who have enabled this accessibility setting — motion can cause discomfort or seizures for some users
2. Animate only transform and opacity for smooth 60fps performance — animating properties like width, height, top, or left triggers expensive layout recalculations and causes visible jank
3. Use layout animations in Framer Motion for list reordering and size changes instead of manually calculating positions — the layout prop handles FLIP animations automatically with minimal code
4. Keep animations under 300ms for interactions like button presses and menu toggles; longer durations feel sluggish and block user flow; reserve longer animations for page transitions and attention-drawing moments
5. Test on low-end devices because animations that run smoothly on a MacBook Pro can stutter on budget phones; use the browser performance profiler to verify frame rates on throttled CPU settings

Common Issues

Layout thrashing during animations: Animating layout properties like width and margin causes the browser to recalculate layout for every frame. Use CSS transforms (translateX, scale) to achieve similar visual effects without triggering layout recalculation, which keeps animations at 60fps.

AnimatePresence not animating exits: Components must have a unique key prop that changes when they are removed for AnimatePresence to trigger exit animations. Ensure each child has a stable, unique key and that the component is conditionally rendered inside the AnimatePresence wrapper.

Scroll-linked animations janky on mobile: Mobile browsers handle scroll events differently and often defer them until after scrolling stops. Use IntersectionObserver-based triggers instead of scroll event listeners, or GSAP's ScrollTrigger which handles browser-specific optimizations automatically.