Wondering what’s next for npm?Check out our public roadmap! »

    react-simple-animate
    TypeScript icon, indicating that this package has built-in type declarations

    3.3.12 • Public • Published

    React Simple Animate Logo - UI Animation Made Simple

    React Simple Animate

    React UI animation made easy

    npm downloads npm npm Coverage Status

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

    Sponsors

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

    @sayav @lemcii @washingtonsoares @lixunn @SamSamskies @peaonunes @wilhelmeek @iwarner @joejknowles @chris-gunawardena @Tymek @Luchanso @vcarel @gragland @tjshipe @krnlde @msutkowski @mlukaszczyk

    Contributors

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

    Install

    npm i react-simple-animate

    DownloadsWeekly Downloads

    45,509

    Version

    3.3.12

    License

    Mit

    Unpacked Size

    49.1 kB

    Total Files

    40

    Last publish

    Collaborators

    • avatar
    • avatar