react-simple-animate

What is react-simple-animate?

react-simple-animate is a lightweight animation library for React that allows you to easily add animations to your components. It provides a simple API to animate elements with various effects such as transitions, keyframes, and more.

What are react-simple-animate's main functionalities?

Transition Animation

This feature allows you to animate the transition of an element's properties from a start state to an end state. In this example, the opacity of the div element transitions from 0 to 1, creating a fade-in effect.

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

const TransitionExample = () => (
  <Animate
    play
    duration={1}
    start={{ opacity: 0 }}
    end={{ opacity: 1 }}
  >
    <div>Fade In</div>
  </Animate>
);

export default TransitionExample;
```

Keyframe Animation

This feature allows you to define keyframe animations, where you can specify multiple steps of an animation. In this example, the div element slides 100px to the right and then back to its original position.

```jsx
import React from 'react';
import { AnimateKeyframes } from 'react-simple-animate';

const KeyframeExample = () => (
  <AnimateKeyframes
    play
    duration={2}
    keyframes={[
      { 0: { transform: 'translateX(0)' } },
      { 50: { transform: 'translateX(100px)' } },
      { 100: { transform: 'translateX(0)' } }
    ]}
  >
    <div>Slide</div>
  </AnimateKeyframes>
);

export default KeyframeExample;
```

CSS Animation

This feature allows you to use CSS animations within the AnimateGroup component. In this example, a div element with a bounce animation is created using CSS keyframes.

```jsx
import React from 'react';
import { AnimateGroup } from 'react-simple-animate';

const CSSAnimationExample = () => (
  <AnimateGroup play>
    <div className="box" style={{ animation: 'bounce 2s infinite' }}>Bounce</div>
  </AnimateGroup>
);

export default CSSAnimationExample;

// CSS
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
  40% { transform: translateY(-30px); }
  60% { transform: translateY(-15px); }
}

.box {
  width: 100px;
  height: 100px;
  background-color: red;
}
```

Other packages similar to react-simple-animate

react-spring

react-spring is a spring-physics-based animation library for React. It provides more advanced and flexible animations compared to react-simple-animate, allowing for complex animations and interactions. It is highly performant and can handle a wide range of animation scenarios.

framer-motion

framer-motion is a powerful animation library for React that offers a wide range of features including gestures, layout animations, and more. It is more feature-rich compared to react-simple-animate and is suitable for creating complex animations and interactions.

react-transition-group

react-transition-group is a low-level animation library for React that provides more control over the transition states of components. It is more flexible but requires more setup compared to react-simple-animate, making it suitable for developers who need fine-grained control over animations.

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

• Getting started
• Animate
• AnimateKeyframes
• AnimateGroup
• Custom Hooks
• Advanced

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>)};
};

Sponsors

Thank you very much for those kind people with their sponsorship to this project.

Contributors

This project exists thanks to all the people who contribute. [Contribute].