Animations

Spring physics and duration tokens for React Native. Tac UI uses Animated.spring for organic, physical motion.

Philosophy

Tac UI Native uses spring-based animations through React Native's Animated API. Elements have mass and momentum — they spring into place with natural deceleration. Seven spring presets cover all common use cases.

Spring Presets

Import spring configs from the constants module. Each preset has distinct stiffness, damping, and mass values.

tsx

import { springConfigs } from '@tac-ui/native/constants/motion';

// Use with Animated.spring
Animated.spring(animatedValue, {
  toValue: 1,
  ...springConfigs.snappy,
  useNativeDriver: true,
}).start();

springConfigs.snappy

Standard — layout shifts, morphing

stiffness: 260 · damping: 32 · mass: 1

springConfigs.gentle

Smooth — page transitions

stiffness: 180 · damping: 30 · mass: 1

springConfigs.bouncy

Playful — confirmations, celebrations

stiffness: 260 · damping: 30 · mass: 1

springConfigs.magnetic

Snappy — toggles, dropdowns

stiffness: 400 · damping: 40 · mass: 0.8

springConfigs.entrance

Arrival — content fade-in

stiffness: 180 · damping: 28 · mass: 0.9

springConfigs.light

Nimble — interactive feedback

stiffness: 350 · damping: 35 · mass: 0.5

springConfigs.heavy

Weighty — large overlays

stiffness: 250 · damping: 38 · mass: 1.5

Duration Scale

Duration constants for non-spring animations (e.g., Animated.timing).

instant

80msMicro feedback

fast

150msHover, focus changes

normal

220msStandard transitions

slow

320msLarger state changes

complex

450msMulti-step animations

Press Feedback

All interactive native components include press feedback via Pressable's pressed state. This provides immediate tactile response.

tsx

// Standard press pattern used across native components
<Pressable
  onPress={onPress}
  style={({ pressed }) => [
    styles.base,
    pressed && { opacity: 0.8, transform: [{ scale: 0.98 }] },
  ]}
>
  {children}
</Pressable>

// Components with press feedback:
// Button:    opacity: 0.9, scale: 0.98
// Card:      opacity: 0.97, scale: 0.99
// Chip:      opacity: 0.8, scale: 0.98
// Checkbox:  opacity: 0.8
// Radio:     opacity: 0.8
// Badge:     opacity: 0.8, scale: 0.98
// Tab:       opacity: 0.7

Animated Components

Several native components use Animated.spring for smooth state transitions.

tsx

// Switch — spring-animated thumb position
// Uses Animated.spring with springConfigs.snappy

// SegmentController — animated selection indicator
// Uses Animated.spring for sliding highlight

// Tabs — animated underline indicator
// Slides between tabs with springConfigs.snappy

// Toggle — rotation animation
// 3D flip between icon states

All Spring Configs

Complete reference of available spring configurations.

typescript

import { springConfigs, duration } from '@tac-ui/native/constants/motion';

// springConfigs
{
  snappy:   { stiffness: 260, damping: 32, mass: 1 },
  gentle:   { stiffness: 180, damping: 30, mass: 1 },
  bouncy:   { stiffness: 260, damping: 30, mass: 1 },
  magnetic: { stiffness: 400, damping: 40, mass: 0.8 },
  entrance: { stiffness: 180, damping: 28, mass: 0.9 },
  light:    { stiffness: 350, damping: 35, mass: 0.5 },
  heavy:    { stiffness: 250, damping: 38, mass: 1.5 },
}

// duration (milliseconds)
{
  instant: 80,
  fast:    150,
  normal:  220,
  slow:    320,
  complex: 450,
}