or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

css-motion-list.mdcss-motion.mdindex.mdprovider.md
tile.json

tessl/npm-rc-motion

React lifecycle controlled motion library for smooth enter/leave transitions and list animations

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/rc-motion@2.9.x

To install, run

npx @tessl/cli install tessl/npm-rc-motion@2.9.0

index.mddocs/

RC Motion

RC Motion is a React lifecycle controlled motion library that provides smooth, performant animations for enter/leave transitions, appearance animations, and list animations. It offers both CSS-based animations through dynamic class names and JavaScript-controlled animations through callback hooks, with automatic cleanup and cross-browser compatibility.

Package Information

  • Package Name: rc-motion
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install rc-motion

Core Imports

import CSSMotion, { CSSMotionList, Provider } from "rc-motion";
import type { CSSMotionProps, CSSMotionListProps, MotionEventHandler } from "rc-motion";

For CommonJS:

const CSSMotion = require("rc-motion");
const { CSSMotionList, Provider } = require("rc-motion");

Basic Usage

import CSSMotion from "rc-motion";

// Simple visibility toggle with CSS transitions
function AnimatedBox() {
  const [visible, setVisible] = useState(true);
  
  return (
    <CSSMotion
      visible={visible}
      motionName="fade"
      motionAppear
      onAppearStart={(element) => {
        console.log('Animation started');
      }}
    >
      {({ style, className }) => (
        <div style={style} className={className}>
          Animated content
        </div>
      )}
    </CSSMotion>
  );
}

Architecture

RC Motion is built around several key components:

  • CSSMotion: Core component for single element animations with full lifecycle control
  • CSSMotionList: Specialized component for animating lists of keyed elements with add/remove/update transitions
  • Provider: Context provider for global motion configuration and performance optimization
  • Motion Status System: Comprehensive state management for animation phases (appear/enter/leave)
  • Cross-browser Support: Vendor prefix handling and feature detection for maximum compatibility

Capabilities

Single Element Animation

Core functionality for animating individual React elements with enter/leave/appear transitions. Supports both CSS-based animations and JavaScript motion callbacks.

export default function CSSMotion(props: CSSMotionProps): React.ReactElement;

interface CSSMotionProps {
  motionName?: MotionName;
  visible?: boolean;
  motionAppear?: boolean;
  motionEnter?: boolean;
  motionLeave?: boolean;
  motionDeadline?: number;
  children?: (
    props: {
      visible?: boolean;
      className?: string;
      style?: React.CSSProperties;
      [key: string]: any;
    },
    ref: (node: any) => void,
  ) => React.ReactElement;
}

type MotionName = string | {
  appear?: string;
  enter?: string;
  leave?: string;
  appearActive?: string;
  enterActive?: string;
  leaveActive?: string;
};

Single Element Animation

List Animation

Specialized component for animating arrays of keyed elements with smooth add/remove/reorder transitions. Automatically handles element lifecycle and position changes.

export function CSSMotionList(props: CSSMotionListProps): React.ReactElement;

interface CSSMotionListProps extends Omit<CSSMotionProps, 'onVisibleChanged' | 'children'> {
  keys: (React.Key | { key: React.Key; [name: string]: any })[];
  component?: string | React.ComponentType | false;
  onVisibleChanged?: (visible: boolean, info: { key: React.Key }) => void;
  onAllRemoved?: () => void;
  children?: (
    props: {
      visible?: boolean;
      className?: string;
      style?: React.CSSProperties;
      index?: number;
      [key: string]: any;
    },
    ref: (node: any) => void,
  ) => React.ReactElement;
}

List Animation

Global Configuration

Context provider for configuring motion behavior across your entire application. Enables performance optimizations and global motion controls.

export function Provider(props: MotionContextProps & { children?: React.ReactNode }): React.ReactElement;

interface MotionContextProps {
  motion?: boolean;
}

Motion Provider

Core Types

// Motion event handlers
type MotionEventHandler = (
  element: HTMLElement,
  event: MotionEvent,
) => React.CSSProperties | void;

type MotionEndEventHandler = (
  element: HTMLElement,
  event: MotionEvent,
) => boolean | void;

type MotionPrepareEventHandler = (
  element: HTMLElement,
) => Promise<any> | void;

// Motion event with deadline support
type MotionEvent = (TransitionEvent | AnimationEvent) & {
  deadline?: boolean;
};

// Motion and step status constants
type MotionStatus = 'none' | 'appear' | 'enter' | 'leave';
type StepStatus = 'none' | 'prepare' | 'start' | 'active' | 'end' | 'prepared';