tessl/npm-react-native-animatable

Easy to use declarative transitions and animations for React Native

—

Pending

Overview

Eval results

Files

Custom Animations

Name: tessl/npm-react-native-animatable
Author: tessl

Create custom keyframe-based animations with full control over timing, styling, and easing. Define animations using either simple from/to syntax or detailed keyframe sequences.

Capabilities

Create Animation

Transform animation definition objects into compiled animations ready for use with animatable components.

/**
 * Creates a compiled animation from a definition object
 * @param definition - Animation definition with keyframes and optional properties
 * @returns Compiled animation object with interpolation ranges
 */
function createAnimation(definition: CustomAnimation): object;

interface CustomAnimation {
  /** Starting styles (equivalent to keyframe 0) */
  from?: StyleObject;
  /** Ending styles (equivalent to keyframe 1) */
  to?: StyleObject;
  /** Static styles applied throughout animation (for perspective, zIndex, etc.) */
  style?: StyleObject;
  /** Default easing function for the animation */
  easing?: Easing;
  /** Keyframes defined by progress (0-1) with style objects */
  [progress: number]: StyleObject;
}

type StyleObject = {
  [key: string]: any;
};

Basic Usage Examples:

import * as Animatable from 'react-native-animatable';

// Simple fade animation
const fadeIn = {
  from: {
    opacity: 0,
  },
  to: {
    opacity: 1,
  },
};

// Use directly as animation prop
<Animatable.Text animation={fadeIn}>
  Fade me in
</Animatable.Text>

// Complex multi-keyframe animation
const zoomOut = {
  0: {
    opacity: 1,
    scale: 1,
  },
  0.5: {
    opacity: 1,
    scale: 0.3,
  },
  1: {
    opacity: 0,
    scale: 0,
  },
};

<Animatable.Text animation={zoomOut}>
  Zoom me out
</Animatable.Text>

Simple From/To Animations

Create straightforward animations using from and to states.

Usage Examples:

// Color transition
const colorChange = {
  from: {
    backgroundColor: 'red',
  },
  to: {
    backgroundColor: 'blue',
  },
};

// Scale animation
const scaleUp = {
  from: {
    scale: 0.5,
  },
  to: {
    scale: 1.2,
  },
};

// Rotation animation
const spin = {
  from: {
    rotate: '0deg',
  },
  to: {
    rotate: '360deg',
  },
};

// Combined transforms
const slideAndFade = {
  from: {
    opacity: 0,
    translateX: -100,
  },
  to: {
    opacity: 1,
    translateX: 0,
  },
};

// Usage
<Animatable.View animation={slideAndFade} duration={800}>
  <Text>I slide in and fade!</Text>
</Animatable.View>

Multi-Keyframe Animations

Create complex animations with multiple keyframes for precise control over animation progression.

Usage Examples:

// Bounce effect with multiple keyframes
const customBounce = {
  0: {
    translateY: 0,
    scale: 1,
  },
  0.3: {
    translateY: -50,
    scale: 1.1,
  },
  0.6: {
    translateY: 0,
    scale: 0.9,
  },
  0.8: {
    translateY: -20,
    scale: 1.05,
  },
  1: {
    translateY: 0,
    scale: 1,
  },
};

// Complex wave animation
const wave = {
  0: {
    rotateZ: '0deg',
    scale: 1,
  },
  0.25: {
    rotateZ: '15deg',
    scale: 1.1,
  },
  0.5: {
    rotateZ: '0deg',
    scale: 1,
  },
  0.75: {
    rotateZ: '-15deg',
    scale: 0.9,
  },
  1: {
    rotateZ: '0deg',
    scale: 1,
  },
};

// Morphing animation
const morph = {
  0: {
    borderRadius: 0,
    backgroundColor: 'red',
    scale: 1,
  },
  0.33: {
    borderRadius: 25,
    backgroundColor: 'orange',
    scale: 1.2,
  },
  0.66: {
    borderRadius: 50,
    backgroundColor: 'yellow',
    scale: 0.8,
  },
  1: {
    borderRadius: 100,
    backgroundColor: 'green',
    scale: 1,
  },
};

Animations with Static Styles

Define static styles that persist throughout the animation, useful for 3D transforms and layering.

Usage Examples:

// 3D flip with perspective
const flip3D = {
  style: {
    backfaceVisibility: 'hidden',
    perspective: 1000,
  },
  from: {
    rotateY: '0deg',
  },
  to: {
    rotateY: '180deg',
  },
};

// Layered animation with z-index
const popUp = {
  style: {
    zIndex: 999,
    elevation: 10,
  },
  from: {
    scale: 0,
    opacity: 0,
  },
  to: {
    scale: 1,
    opacity: 1,
  },
};

// Card flip animation
const cardFlip = {
  style: {
    backfaceVisibility: 'hidden',
    perspective: 1000,
  },
  0: {
    rotateY: '0deg',
  },
  0.5: {
    rotateY: '90deg',
  },
  1: {
    rotateY: '180deg',
  },
};

Animations with Custom Easing

Define default easing functions for smoother animation curves.

Usage Examples:

// Smooth elastic animation
const elasticScale = {
  easing: 'ease-out-back',
  from: {
    scale: 0,
  },
  to: {
    scale: 1,
  },
};

// Quick bounce with custom timing
const quickBounce = {
  easing: 'ease-in-out-cubic',
  0: {
    translateY: 0,
  },
  0.4: {
    translateY: -30,
  },
  0.6: {
    translateY: -30,
  },
  1: {
    translateY: 0,
  },
};

// Slow fade with sine easing
const slowFade = {
  easing: 'ease-in-out-sine',
  from: {
    opacity: 1,
  },
  to: {
    opacity: 0,
  },
};

Animation Compilation

The createAnimation function processes definitions and creates optimized interpolation objects:

// Input definition
const definition = {
  from: { opacity: 0, scale: 0.5 },
  to: { opacity: 1, scale: 1 },
};

// Compiled output (simplified)
const compiled = {
  opacity: {
    inputRange: [0, 1],
    outputRange: [0, 1],
  },
  scale: {
    inputRange: [0, 1],
    outputRange: [0.5, 1],
  },
};

Advanced Custom Animations

Staggered Element Animation

// Create staggered entrance animation
const staggeredFadeIn = (delay = 0) => ({
  from: {
    opacity: 0,
    translateY: 20,
  },
  to: {
    opacity: 1,
    translateY: 0,
  },
});

// Usage with delays
{items.map((item, index) => (
  <Animatable.View
    key={item.id}
    animation={staggeredFadeIn()}
    delay={index * 100}
    duration={500}
  >
    <Text>{item.text}</Text>
  </Animatable.View>
))}

Loading Animation

// Pulsing loader
const pulse = {
  0: {
    scale: 1,
    opacity: 1,
  },
  0.5: {
    scale: 1.2,
    opacity: 0.7,
  },
  1: {
    scale: 1,
    opacity: 1,
  },
};

<Animatable.View 
  animation={pulse} 
  iterationCount="infinite" 
  duration={1000}
>
  <LoadingSpinner />
</Animatable.View>

Success Animation

// Checkmark success animation
const successCheck = {
  style: {
    overflow: 'hidden',
  },
  0: {
    scale: 0,
    rotate: '-45deg',
  },
  0.6: {
    scale: 1.1,
    rotate: '0deg',
  },
  1: {
    scale: 1,
    rotate: '0deg',
  },
};

<Animatable.View animation={successCheck} duration={600}>
  <Icon name="check" size={50} color="green" />
</Animatable.View>

Color Animations

// Note: Use rgba() syntax for color animations
const colorPulse = {
  0: {
    backgroundColor: 'rgba(255, 0, 0, 1)',
  },
  0.5: {
    backgroundColor: 'rgba(255, 0, 0, 0.5)',
  },
  1: {
    backgroundColor: 'rgba(255, 0, 0, 1)',
  },
};

const gradientShift = {
  from: {
    backgroundColor: 'rgba(100, 150, 200, 1)',
  },
  to: {
    backgroundColor: 'rgba(200, 100, 150, 1)',
  },
};

Install with Tessl CLI

npx tessl i tessl/npm-react-native-animatable

docs

animation-registry.md

builtin-animations.md

component-creation.md

custom-animations.md

declarative-animation.md

imperative-animation.md

index.md

prebuilt-components.md

tile.json

tessl/npm-react-native-animatable