react-simple-animate

🎯 React UI animation made easy

1,820

View on GitHub View on NPM

Top Related Projects

motion

23,338

Open source, production-ready animation and gesture library for React

react-spring

28,112

✌️ A spring physics based React animation library

react-motion

21,681

A spring that solves your animation problems.

react-animations

3,059

🎊 A collection of animations for inline style libraries

react-transition-group

10,155

An easy way to perform animations when a React component enters or leaves the DOM

Quick Overview

React Simple Animate is a lightweight React animation library that provides an easy-to-use API for creating smooth animations. It offers a declarative approach to animations, allowing developers to create complex animations with minimal code and without relying on CSS keyframes.

Pros

Simple and intuitive API for creating animations
Lightweight and performant, with minimal impact on bundle size
Supports both mount/unmount animations and state-based animations
Compatible with server-side rendering (SSR)

Cons

Limited built-in animation effects compared to more comprehensive libraries
May require additional effort for complex, multi-step animations
Documentation could be more extensive, especially for advanced use cases

Code Examples

Basic animation on mount:

import { AnimateKeyframes } from 'react-simple-animate';

<AnimateKeyframes
  play
  duration={2}
  keyframes={['opacity: 0', 'opacity: 1']}
>
  <div>Fade in on mount</div>
</AnimateKeyframes>

Animating based on state:

import { Animate } from 'react-simple-animate';

<Animate
  play={isVisible}
  start={{ opacity: 0, transform: 'translateY(50px)' }}
  end={{ opacity: 1, transform: 'translateY(0px)' }}
>
  <div>Fade in and slide up when visible</div>
</Animate>

Sequence animation:

import { AnimateGroup } from 'react-simple-animate';

<AnimateGroup play>
  <Animate
    sequenceIndex={0}
    start={{ opacity: 0 }}
    end={{ opacity: 1 }}
  >
    <div>First animation</div>
  </Animate>
  <Animate
    sequenceIndex={1}
    start={{ transform: 'scale(0)' }}
    end={{ transform: 'scale(1)' }}
  >
    <div>Second animation</div>
  </Animate>
</AnimateGroup>

Getting Started

Install the package:
```
npm install react-simple-animate
```

Import and use in your React component:

import React from 'react';
import { Animate } from 'react-simple-animate';

const MyComponent = () => (
  <Animate
    play
    start={{ opacity: 0 }}
    end={{ opacity: 1 }}
  >
    <div>Hello, animated world!</div>
  </Animate>
);

export default MyComponent;

This setup creates a simple fade-in animation for the div element when the component mounts.

Competitor Comparisons

motion

23,338

Open source, production-ready animation and gesture library for React

Pros of Motion

More comprehensive animation capabilities, including gestures and complex transitions
Larger community and ecosystem, with extensive documentation and examples
Built-in layout animations and advanced features like shared layout animations

Cons of Motion

Steeper learning curve due to its extensive API and features
Larger bundle size, which may impact performance for smaller projects
More complex setup and configuration for basic animations

Code Comparison

React Simple Animate:

<Animate play start={{ opacity: 0 }} end={{ opacity: 1 }}>
  <div>Fading content</div>
</Animate>

Motion:

<motion.div
  initial={{ opacity: 0 }}
  animate={{ opacity: 1 }}
  transition={{ duration: 1 }}
>
  Fading content
</motion.div>

Both libraries offer declarative ways to create animations, but Motion provides more granular control over the animation process. React Simple Animate focuses on simplicity, making it easier to implement basic animations with less code. Motion, on the other hand, offers a more powerful and flexible API at the cost of increased complexity.

react-spring

28,112

✌️ A spring physics based React animation library

Pros of react-spring

More powerful and flexible, offering a wide range of animation capabilities
Physics-based animations for more natural and realistic motion
Large community and ecosystem with extensive documentation and examples

Cons of react-spring

Steeper learning curve due to its more complex API
Larger bundle size, which may impact performance in smaller projects
Overkill for simple animations, potentially leading to unnecessary complexity

Code Comparison

react-spring:

import { useSpring, animated } from 'react-spring'

const AnimatedComponent = () => {
  const props = useSpring({ opacity: 1, from: { opacity: 0 } })
  return <animated.div style={props}>I will fade in</animated.div>
}

react-simple-animate:

import { Animate } from 'react-simple-animate'

const AnimatedComponent = () => (
  <Animate play start={{ opacity: 0 }} end={{ opacity: 1 }}>
    <div>I will fade in</div>
  </Animate>
)

Both libraries offer ways to create animations in React applications, but react-spring provides more advanced features at the cost of complexity, while react-simple-animate focuses on simplicity and ease of use for basic animations.

react-motion

21,681

A spring that solves your animation problems.

Pros of react-motion

More mature and battle-tested library with a larger community
Provides physics-based animations for more natural-looking motion
Offers more fine-grained control over animation behavior

Cons of react-motion

Steeper learning curve due to its physics-based approach
More complex API compared to simpler animation libraries
Potentially overkill for basic animations or simpler projects

Code Comparison

react-motion:

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

<Motion defaultStyle={{x: 0}} style={{x: spring(10)}}>
  {({x}) => <div style={{transform: `translateX(${x}px)`}} />}
</Motion>

react-simple-animate:

import { Animate } from 'react-simple-animate';

<Animate
  play
  start={{ transform: 'translateX(0px)' }}
  end={{ transform: 'translateX(10px)' }}
>
  <div />
</Animate>

react-motion uses a physics-based approach with springs, while react-simple-animate offers a more straightforward API for basic animations. react-motion provides more control but requires more setup, whereas react-simple-animate is simpler to use for basic transitions.

react-animations

3,059

🎊 A collection of animations for inline style libraries

Pros of react-animations

Provides a wide range of pre-defined animations based on popular CSS animation libraries
Easily integrates with CSS-in-JS solutions like styled-components or Radium
Offers flexibility in applying animations to various CSS properties

Cons of react-animations

Requires additional setup and dependencies for CSS-in-JS libraries
Limited to predefined animations, less customizable than react-simple-animate
May have a steeper learning curve for developers new to CSS-in-JS concepts

Code Comparison

react-animations:

import { bounce } from 'react-animations';
import styled, { keyframes } from 'styled-components';

const Bounce = styled.div`animation: 2s ${keyframes`${bounce}`} infinite`;

react-simple-animate:

import { Animate } from "react-simple-animate";

<Animate play start={{ opacity: 0 }} end={{ opacity: 1 }}>
  <h1>Hello World</h1>
</Animate>

react-animations relies on CSS-in-JS libraries and predefined animations, while react-simple-animate offers a more straightforward, declarative approach with customizable animations. react-simple-animate provides an easier setup and more intuitive API for basic animations, making it potentially more accessible for beginners. However, react-animations offers a broader range of pre-built animations and better integration with CSS-in-JS ecosystems, which may be preferable for more complex projects or those already using styled-components or similar libraries.

react-transition-group

10,155

An easy way to perform animations when a React component enters or leaves the DOM

Pros of react-transition-group

More mature and widely adopted in the React ecosystem
Offers fine-grained control over transition stages (enter, exit, etc.)
Supports both CSS and JavaScript animations

Cons of react-transition-group

Steeper learning curve due to more complex API
Requires more boilerplate code for basic animations
Larger bundle size compared to react-simple-animate

Code Comparison

react-transition-group:

<CSSTransition
  in={inProp}
  timeout={200}
  classNames="fade"
  unmountOnExit
>
  <div>I'm a fading element</div>
</CSSTransition>

react-simple-animate:

<Animate
  play={inProp}
  start={{ opacity: 0 }}
  end={{ opacity: 1 }}
>
  <div>I'm a fading element</div>
</Animate>

react-transition-group provides more granular control over transition stages but requires more setup. react-simple-animate offers a simpler API for basic animations, making it easier to use for straightforward cases. The choice between the two depends on the complexity of animations required and the developer's familiarity with each library.

Convert designs to code with AI

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

React Simple Animate

React UI animation made easy

Features

Animation from style A to B
CSS keyframes animation
Chain up animation sequences
Tiny size without other dependency

Install

$ npm install react-simple-animate

Docs

Quickstart

Components

import React from "react";
import { Animate, AnimateKeyframes, AnimateGroup } from "react-simple-animate";

export default () => (
  <>
    {/* animate individual element. */}
    <Animate play start={{ opacity: 0 }} end={{ opacity: 1 }}>
      <h1>React simple animate</h1>
    </Animate>
    
    {/* animate keyframes with individual element. */}
    <AnimateKeyframes
      play
      iterationCount="infinite"
      keyframes={["opacity: 0", "opacity: 1"]}
    >
      <h1>React simple animate with keyframes</h1>
    </AnimateKeyframes>
    
    {/* animate group of animation in sequences */}
    <AnimateGroup play>
      <Animate start={{ opacity: 0 }} end={{ opacity: 1 }} sequenceIndex={0}>
        first
      </Animate>
      <Animate start={{ opacity: 0 }} end={{ opacity: 1 }} sequenceIndex={1}>
        second
      </Animate>
      <Animate start={{ opacity: 0 }} end={{ opacity: 1 }} sequenceIndex={2}>
        third
      </Animate>
    </AnimateGroup>
  </>
);

Hooks

import react from 'react';
import { useAnimate, useAnimateKeyframes, useAnimateGroup } from 'react-simple-animate';

export const useAnimateExample = () => {
  const { style, play } = useAnimate({ start: { opacity: 0 }, end: { opacity: 1 } });
  useEffect(() => play(true), []);
  
  return <div style={style}>useAnimate</div>;
};

export const useAnimateKeyframesExample = () => {
  const { style, play } = useAnimateKeyframes({ 
    keyframes: ['opacity: 0', 'opacity: 1'], 
    iterationCount: 4 
  });
  useEffect(() => play(true), []);
  
  return <div style={style}>useAnimate</div>;
};

export const useAnimateGroup = () => {
  const { styles = [], play } = useAnimateGroup({
    sequences: [
      { start: { opacity: 1 }, end: { opacity: 0 } },
      { start: { background: "red" }, end: { background: "blue" } }
    ]
  });
  useEffect(() => play(true), []);

  return {styles.map(style => <div style={style}>useAnimateGroup</div>)};
};

By the makers of BEEKAI

We also make BEEKAI. Build the next-generation forms with modern technology and best in class user experience and accessibility.

Top Related Projects

Convert designs to code with AI

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

Top Related Projects

Quick Overview

Pros

Cons

Code Examples

Getting Started

Competitor Comparisons

Pros of Motion

Cons of Motion

Code Comparison

Pros of react-spring

Cons of react-spring

Code Comparison

Pros of react-motion

Cons of react-motion

Code Comparison

Pros of react-animations

Cons of react-animations

Code Comparison

Pros of react-transition-group

Cons of react-transition-group

Code Comparison

Convert designs to code with AI

README

React Simple Animate

Features

Install

Quickstart

Components

Hooks

By the makers of BEEKAI

Top Related Projects

Convert designs to code with AI

NPM DownloadsLast 30 Days