Transition API Reference

Relevant source files

The following files were used as context for generating this wiki page:

• src/transitions/index.ts
• src/transitions/tween.ts
• src/transitions/spring.ts
• src/transitions/inertia.ts
• src/hooks/useAnimationSequence.ts

The Transition API provides a collection of pre-configured animation settings built on top of Framer Motion. These transitions define how an element moves from one state to another, covering easing functions (tweens), spring physics, and inertial movement for gestures.

By providing standardized presets like easeCyber or springSnappy, the API ensures visual consistency across the @pcstyle/motion ecosystem while allowing developers to easily swap between different animation "feels" ranging from organic spring-based physics to sharp, technical cyberpunk transitions.
Sources: src/transitions/index.ts, src/transitions/tween.ts:51-54

Core Transition Types

The API categorizes transitions into three primary types based on their underlying mathematical models.

This diagram illustrates the hierarchical structure of transition presets available in the library.
Sources: src/transitions/index.ts:1-3

Tween (Easing) Transitions

Tween transitions use duration-based easing functions to control the rate of change over time. These are ideal for standard UI exits, entrances, and technical effects.

Preset	Duration	Ease Function / Bezier	Description
easeOut	0.3s	[0.4, 0, 0.2, 1]	Standard exit for most elements.
easeIn	0.3s	[0.4, 0, 1, 1]	Standard entrance for elements.
easeInOut	0.4s	[0.4, 0, 0.2, 1]	Balanced smooth transition.
easeElastic	0.6s	[0.68, -0.55, 0.27, 1.55]	Overshoot effect for organic feel.
easeCyber	0.2s	[0.9, 0, 0.1, 1]	Sharp, high-speed movement.
linear	1.0s	linear	Constant speed for continuous loops.

Sources: src/transitions/tween.ts:8-54

Spring Physics Transitions

Spring transitions utilize physical properties like stiffness and damping instead of fixed durations. This results in more natural, responsive interactions.

Preset	Stiffness	Damping	Mass / Bounce	Use Case
springSnappy	400	30	-	Rapid UI feedback.
springBouncy	300	10	-	Playful, elastic elements.
springSmooth	-	-	0.25 (Bounce)	Duration-based (0.5s) spring.
springWobbly	200	5	-	Attention-grabbing oscillation.
springDrag	300	30	0.8	Optimized for draggable items.

Sources: src/transitions/spring.ts:8-50

Inertia Transitions

Inertia transitions are specifically designed for momentum-based movements, such as scrolling or releasing a dragged element. They calculate deceleration based on an initial velocity.

The flow of inertia transitions focuses on how velocity decays over time based on specific constant values.
Sources: src/transitions/inertia.ts:8-33

Integration with Hooks

Transitions are typically consumed through the useAnimationSequence hook or directly in Framer Motion components. The AnimationStep interface allows transitions to be applied to specific targets in a sequence.

// src/hooks/useAnimationSequence.ts:8-16
interface AnimationStep {
  target: string;
  animation: DOMKeyframesDefinition;
  options?: {
    duration?: number;
    delay?: number;
    stagger?: number;
  };
}

The hook processes these steps, applying the duration (defaulting to 0.3s) and handling complex timing like stagger logic for multi-element transitions.
Sources: src/hooks/useAnimationSequence.ts:24-34

Summary

The Transition API simplifies the application of complex motion paths by providing a robust set of Tween, Spring, and Inertia presets. By centralizing these definitions in src/transitions/, the library enables a unified animation language that balances performant technical transitions (easeCyber) with fluid, physics-based interactions (springSnappy).