Skip to main content

Animation Library Exploration

This page showcases proof-of-concept implementations for different animation approaches in our DSA visualization playgrounds.

Current Setup​

We currently use Framer Motion (v12.23.24) for all animations. This exploration evaluates:

  1. LazyMotion Optimization - Reduce bundle size from ~32KB to ~5.5KB
  2. React Spring - Physics-based animations with useTrail for arrays
  3. GSAP - Timeline-based orchestration for complex sequences
  4. Comparison - Side-by-side evaluation of all approaches

Option A: LazyMotion Optimization​

Demonstrates how to reduce Framer Motion bundle size by ~80% using LazyMotion and the m component.

Bubble Sort - LazyMotion Optimized

Key Benefits:

  • Bundle size: ~5.5KB (vs ~32KB full)
  • Same API, just use m instead of motion
  • Tree-shakeable - only loads what you use

Option B: React Spring​

Physics-based animations with natural motion feel. Uses useTrail for staggered array animations.

Linear Search - React Spring Style

Key Benefits:

  • Physics-based (tension, friction) instead of duration
  • useTrail for natural staggered animations
  • No re-render overhead - runs on RAF

Option C: GSAP Timeline​

True timeline control with precise orchestration. Best for complex multi-element choreography.

Selection Sort - GSAP Timeline

Key Benefits:

  • Global timeline with labels and markers
  • Precise timing control ("<0.5" = 0.5s before previous ends)
  • useGSAP() hook for React integration
  • 100% FREE (all plugins included)

Option D: Side-by-Side Comparison​

Direct comparison of the same swap animation implemented with all three libraries.

Library Comparison

Recommendation​

ScenarioRecommended Library
Most playgroundsFramer Motion with LazyMotion
Array traversalsReact Spring useTrail (optional)
Complex sortingGSAP Timeline (optional)
Current approachKeep Framer Motion, add LazyMotion optimization

Immediate Action Items​

  1. Add LazyMotion wrapper to PlaygroundContainer component
  2. Replace motion with m in existing components for tree-shaking
  3. Consider GSAP only for sorting algorithm playgrounds with complex swaps

Installation (if proceeding with full implementation)​

# React Spring (optional)
npm install @react-spring/web

# GSAP (optional)
npm install gsap @gsap/react