or run

npx @tessl/cli init

Version

Tile

Overview

Evals

Files

docs

index.md motion.md spring-system.md staggered-motion.md transition-motion.md

tile.json

tessl/npm-react-motion

A spring that solves your animation problems.

Workspace: tessl
Visibility: Public
Created: 3 months ago
Last updated: 3 months ago
Describes: pkg:npm/react-motion@0.5.x

To install, run

npx @tessl/cli install tessl/npm-react-motion@0.5.0

React Motion

React Motion is a spring-based animation library for React applications that uses spring physics instead of traditional easing curves and durations to create natural, fluid animations. The library provides three core components and utility functions for creating sophisticated animations that feel more responsive and natural when interrupted or adapted to changing conditions.

Package Information

Package Name: react-motion
Package Type: npm
Language: JavaScript (with Flow types)
Installation: npm install --save react-motion

Core Imports

import { Motion, StaggeredMotion, TransitionMotion, spring, presets, stripStyle, reorderKeys } from 'react-motion';

For CommonJS:

const { Motion, StaggeredMotion, TransitionMotion, spring, presets, stripStyle, reorderKeys } = require('react-motion');

Basic Usage

import React from 'react';
import { Motion, spring } from 'react-motion';

function AnimatedComponent() {
  return (
    <Motion defaultStyle={{x: 0}} style={{x: spring(10)}}>
      {value => <div style={{transform: `translateX(${value.x}px)`}}>Animated!</div>}
    </Motion>
  );
}

Architecture

React Motion is built around several key principles:

Physics-Based Animation: Uses spring-damper physics instead of time-based easing
Interruption-Safe: Animations can be seamlessly interrupted and redirected
Declarative API: Specify target values, not animation durations
Performance Optimized: Uses requestAnimationFrame and efficient batching
Component-Based: Three specialized components for different animation scenarios

Capabilities

Basic Animation

Single element animations with spring physics. Ideal for simple state transitions, hover effects, and basic UI animations.

class Motion extends React.Component {
  static propTypes = {
    defaultStyle: PropTypes.objectOf(PropTypes.number),
    style: PropTypes.objectOf(PropTypes.oneOfType([
      PropTypes.number,
      PropTypes.object,
    ])).isRequired,
    children: PropTypes.func.isRequired,
    onRest: PropTypes.func,
  };
}

Motion Component

Staggered Animation

Cascading animations where each element's motion depends on the previous element. Perfect for list transitions and domino effects.

class StaggeredMotion extends React.Component {
  static propTypes = {
    defaultStyles: PropTypes.arrayOf(PropTypes.objectOf(PropTypes.number)),
    styles: PropTypes.func.isRequired,
    children: PropTypes.func.isRequired,
  };
}

StaggeredMotion Component

Transition Animation

Advanced component for animating mounting and unmounting elements with full lifecycle control. Essential for dynamic lists and complex UI transitions.

class TransitionMotion extends React.Component {
  static propTypes = {
    defaultStyles: PropTypes.arrayOf(PropTypes.shape({
      key: PropTypes.string.isRequired,
      data: PropTypes.any,
      style: PropTypes.objectOf(PropTypes.number).isRequired,
    })),
    styles: PropTypes.oneOfType([
      PropTypes.func,
      PropTypes.arrayOf(PropTypes.shape({
        key: PropTypes.string.isRequired,
        data: PropTypes.any,
        style: PropTypes.objectOf(PropTypes.oneOfType([
          PropTypes.number,
          PropTypes.object,
        ])).isRequired,
      }))
    ]).isRequired,
    children: PropTypes.func.isRequired,
    willEnter: PropTypes.func,
    willLeave: PropTypes.func,
    didLeave: PropTypes.func,
  };
}

TransitionMotion Component

Spring Configuration

Spring physics configuration system for controlling animation behavior.

function spring(val/*: number */, config/*?: SpringHelperConfig */)/*: OpaqueConfig */;

// Type definitions (Flow syntax):
/*::
type SpringHelperConfig = {
  stiffness?: number,
  damping?: number,
  precision?: number,
};

type OpaqueConfig = {
  val: number,
  stiffness: number,
  damping: number,
  precision: number,
};
*/

// Preset configurations for spring physics
const presets = {
  noWobble: {stiffness: 170, damping: 26}, // default
  gentle: {stiffness: 120, damping: 14},
  wobbly: {stiffness: 180, damping: 12},
  stiff: {stiffness: 210, damping: 20},
};

Spring System

Utility Functions

Helper functions for working with spring configurations and style objects.

function stripStyle(style/*: Style */)/*: PlainStyle */;
function reorderKeys()/*: void */; // DEPRECATED

stripStyle: Extracts plain numeric values from spring-configured style objects. Useful for getting initial values or converting spring styles to plain styles.

reorderKeys: Deprecated function that shows warning message. No longer needed for TransitionMotion's new styles array API.

Core Types

// Core type definitions (Flow syntax):
/*::
// Style object that can contain numbers or spring configurations
type Style = {[key: string]: number | OpaqueConfig};

// Plain numeric style object (interpolated values)
type PlainStyle = {[key: string]: number};

// Spring configuration object (internal use)
type OpaqueConfig = {
  val: number,
  stiffness: number,
  damping: number,
  precision: number,
};

// Additional types for TransitionMotion
type TransitionStyle = {
  key: string,
  data?: any,
  style: Style,
};

type TransitionPlainStyle = {
  key: string,
  data?: any,
  style: PlainStyle,
};
*/

Dependencies

performance-now: ^0.2.0 - High-resolution timing for animation frames
prop-types: ^15.5.8 - Runtime type checking for React props
raf: ^3.1.0 - RequestAnimationFrame polyfill for older browsers

Peer Dependencies

React: ^0.14.9 || ^15.3.0 || ^16.0.0

Platform Support

Browser environments with React
React Native v0.18+
Server-side rendering compatible (with appropriate polyfills)