🎯 React UI animation made easy

Overview

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].

Issues
  • AnimateKeyframes does not fit within 50px X 50px

    AnimateKeyframes does not fit within 50px X 50px

    Hello Bill. I would like to use the <AnimateKeyFrames ...> component with a svg image. However, the maximum size is 50px X 50px and it seems to be impossible to compress AnimateKeyFrame to fit inside that size. Thanks in advance, Gunnar Siréus

    opened by gunnarsireus 20
  • useAnimateKeyframes to show element when in viewport

    useAnimateKeyframes to show element when in viewport

    First off, awesome project -- it's been super useful for me.

    The issue: I'm trying to use useAnimateKeyframes to show an element when it comes into view. However, unlike useAnimate where startStyle is applied as an initial style, the 0% state of the keyframes isn't applied until play is actually called.

    Essentially, the behavior ends up being that the element has opacity: 1 to start, but when it gets scrolled into view (and play() is called), the element flickers for a second as the element initializes to opacity: 0 and then proceeds to animate properly to opacity: 1.

    Am I just missing something or using it incorrectly? Please advise.

    opened by guacamoli 15
  • Support for style objects in AnimateKeyframes

    Support for style objects in AnimateKeyframes

    Is your feature request related to a problem? Please describe. The API to define styles is different in AnimateKeyframes compared to Animate. While Animate supports an object with key/value as styles, AnimateKeyframes only seems to support a string, making it harder to compute and manipulate.

    Describe the solution you'd like It would be nice if AnimateKeyframes would support the style object, too.

    Perhaps keyframes could look like this:

    [
      {at: 0,   style: { opacity: 0 }},
      {at: 100, style: { opacity: 1 }},
    ]
    

    Additional context Putting the animation index (%) into a property instead of being the object key itself would help interoperability from other languages that compile to JS, but aren't as dynamic.

    enhancement 
    opened by stroborobo 11
  • Errors when Running from Script Src

    Errors when Running from Script Src

    I'm building a photo slideshow component, and I'd like to animate each photo in using variations of scale, translateX, translateY, and opacity. So your component looks perfect!

    The page is created without a build pipeline, so I'm including your script using unpkg. I've worked through several errors already, but I'm stuck with these three errors. The page works without your animate library (sans animations of course) and now I'm not sure what the problem might be. Seems like it should all work.

    Here's how I'm importing your library, pulling in react-transition-group as a dependency for your library.

    <script src="https://unpkg.com/[email protected]/dist/react-transition-group.min.js"></script>
    <script src="https://unpkg.com/[email protected]/lib/animate.js"></script>
    

    And here's how I'm using your library.

            const Photo = ({src,questCode}) => {
                return (
                    <div className="photo-container">
                        <Animate
                            startAnimation={true}
                            startStyle={{"transform":"scale(0.5)"}}
                            endStyle={{"transform":"scale(1)"}}
                            durationSeconds="0.3"
                            easeType="linear">
                            <img key={questCode} className="photo" src={src} />
                        </Animate>
                    </div>
                )
            }
    

    image

    Here's the source of the entire file, just unzip the html page into a folder then run python -m SimpleHTTPServer in that folder to view it using a webserver... slideshow.html.zip

    opened by geirman 10
  • play value from useAnimate cannot be use in useEffect

    play value from useAnimate cannot be use in useEffect

    Describe the bug Value of play is changing during the animation and it cannot be used inside useEffect

    To Reproduce I want to play animation depends on isOpened prop from parent and I need value of isPlaying to conditionally show children (I think that is not doable using Animation component)

    
    const { play, style, isPlaying } = useAnimate({
      start: { opacity: 0 },
      end: { opacity: 1 },
      play: isOpened,
    });
    
    useEffect(() => {
      play(isOpened)
    }, [isOpened, play]);
    
    return (isOpened || isPlaying) ? children : null;
    

    Above code produces infinite loop inside useEffect.

    opened by marcin-piela 10
  • Animating only when user starts scrolling for SEO

    Animating only when user starts scrolling for SEO

    Is your feature request related to a problem? Please describe. Nope.

    Describe the solution you'd like I'm using the library to animate elements on the screen as the user scrolls to them. However, if the user loads the page, I'd like for the animations to not hide the element until the user starts scrolling. This way, google can still crawl the content on the page.

    Describe alternatives you've considered Wrapping the animations in a flag and only using the hooks when scrolling has started.

    Additional context Happy to provide more if needed.

    help wanted 
    opened by guacamoli 9
  • useAnimate question, not a bug

    useAnimate question, not a bug

    Hi,

    Simple question regarding the useAnimate hook. I was making a slider that is controlled by a prop and before I simply used that prop to revert the animation I was trying something like this:

    
    const { play, style } = useAnimate({
            start: { transform: `translateY(${showContent ? '100%' : '0%'})`},
            end: { transform:`translateY(${showContent ? '0': '100%'})` },
        });
    useEffect(() => {
            play(true);
        }, [show]);
    

    My question is more of a curiosity, but why doesn't the first implementation work like expected? Is it a misunderstanding of how the useEffect hook works?

    opened by hthief 7
  • #52 Memoize start callback in useAnimation hook

    #52 Memoize start callback in useAnimation hook

    Closes #52

    opened by marcin-piela 5
  • TypeError: useRef$1 is not a function

    TypeError: useRef$1 is not a function

    Description of the bug I get that error whenever I put a component in my code. I do not get the error then that component is not there.

    Screenshots Error Message My Code

    question 
    opened by JonathanStefanov 5
  • Unable to get useAnimateGroup hook or AnimateGroup to apply the initial start styles.

    Unable to get useAnimateGroup hook or AnimateGroup to apply the initial start styles.

    Firstly let me say this is a great little css animation component. Thank you. I have been looking for awhile for something small that is simple to use, and this is exactly what I was looking for. Unfortunately I couldn't get it to work properly.

    Describe the bug In the example provided for useAnimateGroup in https://react-simple-animate.now.sh/hooks, it starts with { opacity: 1, transform: "translateY(0)" }. If you check the DOM, these styles have not actually been applied, they are just the default. If you change these values, ie { opacity: 0.5, transform: "translateY(0)" }, these values are not applied still.

    This means in order to display an array of elements fading in, I need to first manually apply the style from the sequences array like this like this... which cant be right: style={{ ...sequences[index].start, ...styles[index]}}

    Expected behavior The start element styles to be applied before play is set to true.

    resolve 
    opened by juliankigwana 5
  • Bump nanoid from 3.1.9 to 3.2.0

    Bump nanoid from 3.1.9 to 3.2.0

    Bumps nanoid from 3.1.9 to 3.2.0.

    Changelog

    Sourced from nanoid's changelog.

    Change Log

    This project adheres to Semantic Versioning.

    3.2

    • Added --size and --alphabet arguments to binary (by Vitaly Baev).

    3.1.32

    • Reduced async exports size (by Artyom Arutyunyan).
    • Moved from Jest to uvu (by Vitaly Baev).

    3.1.31

    • Fixed collision vulnerability on object in size (by Artyom Arutyunyan).

    3.1.30

    • Reduced size for project with brotli compression (by Anton Khlynovskiy).

    3.1.29

    • Reduced npm package size.

    3.1.28

    • Reduced npm package size.

    3.1.27

    • Cleaned dependencies from development tools.

    3.1.26

    • Improved performance (by Eitan Har-Shoshanim).
    • Reduced npm package size.

    3.1.25

    • Fixed browserify support.

    3.1.24

    • Fixed browserify support (by Artur Paikin).

    3.1.23

    • Fixed esbuild support.

    3.1.22

    • Added default and browser.default to package.exports.

    3.1.21

    • Reduced npm package size.

    3.1.20

    • Fix ES modules support.

    3.1.19

    • Reduced customAlphabet size (by Enrico Scherlies).

    ... (truncated)

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Animation component is full width?

    Animation component is full width?

    Hello!

    I'm using AnimateKeyframes to move an arrow left to right. The arrow is placed in a narrow space, which is why it's vital that it doesn't move outside it's designated space. The problem is that the Arrow's parent, which is the AnimateKeyframes component, seems to be full width by default.

    See this gif: https://i.imgur.com/34uZSbG.gif The blue area is the AnimateKeyframes component. As you see in the bottom, it creates a horizontal scrollbar due to the component going too far right. The SVG itself is not full width.

    This is my component:

          <Box sx={{ margin: 2, marginTop: 6, textAlign: "center" }}>
            <AnimateKeyframes
            play
            duration={2.5}
            keyframes={[
                { 0: 'transform: translateX(0px)' }, // 0%
                { 50: 'transform: translateX(20px)' }, // 50%
                { 100: 'transform: translateX(0px)' } // 100%
              ]}
            iterationCount="infinite"
            easeType="ease"
            >
                <ArrowForwardIcon />
            </AnimateKeyframes>
            <Typography variant="h5">Click on the map to place zones</Typography>
          </Box>
    

    Any ideas on this issue? Is the Animation component intentionally fullwidth? Many thanks, and great library :)

    opened by Bosskee 4
  • Bump tmpl from 1.0.4 to 1.0.5

    Bump tmpl from 1.0.4 to 1.0.5

    Bumps tmpl from 1.0.4 to 1.0.5.

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Bump path-parse from 1.0.6 to 1.0.7

    Bump path-parse from 1.0.6 to 1.0.7

    Bumps path-parse from 1.0.6 to 1.0.7.

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
Releases(v3.3.12)
Owner
Bill
Build with passion, detail, and love to produce a delightful experience.
Bill
✨ (ノ´ヮ´)ノ*:・゚✧ A super easy animation library for React!

(ノ´ヮ´)ノ*:・゚✧ A super easy animation library for React built on top of Julian Garnier's anime.js.

plus1.tv 1.4k Jan 21, 2022
React components for the Web Animations API - http://react-web-animation.surge.sh

react-web-animation react-web-animation is a set of React components that expose the Web Animations API in a declarative way. Demos Check out how you

Charles King 291 Dec 8, 2021
react-animated-numbers - 👾 Library showing animation of number changes in react.js

react-animated-numbers - ?? Library showing animation of number changes in react.js

Yeongsu Han 86 Jan 17, 2022
Animation engine designed for React

react-tweenful Looking for an amazing React library for animating stuff? Look no more, we've got you covered! Demo https://teodosii.github.io/react-tw

Rares Mardare 69 Dec 19, 2021
✌️ A spring physics based React animation library

react-spring is a spring-physics based animation library that should cover most of your UI related animation needs. It gives you tools flexible enough

Poimandres 22.1k Jan 19, 2022
Open source, production-ready animation and gesture library for React

An open source and production-ready motion library for React on the web. Motion is an open source, production-ready library that's designed for all cr

Framer 13.4k Jan 15, 2022
React particles animation background component

particles-bg React component for particles backgrounds This project refers to the source code of the Proton official website, I packaged it into a com

lindelof 474 Jan 13, 2022
Sine wave animation using React & Typescript with Canvas API :heart_eyes:

Sine wave animation using React & Typescript with Canvas API :heart_eyes:

Ashish Yadav 56 Dec 12, 2021
Component-wrapper for collapse animation with react-motion for elements with variable (and dynamic) height

Component-wrapper for collapse animation with react-motion for elements with variable (and dynamic) height

Nikita Butenko 1k Jan 14, 2022
Simple typing text animation in React component

react-typing-text-animation - Simple typing text animation in React component

Damian Głuch 1 Jan 3, 2022
⚛️ Perform animation and transition of React component with ease.

⚛️ Perform animation and transition of React component with ease.

Zheng Song 136 Jan 9, 2022
react-bubbly-effect-button🧼 Bubble animation on button

react-bubbly-effect-button?? Bubble animation on button

Ankit Kumar 10 Nov 28, 2021
Build custom animation components in React using typescript

Build custom animation components in React using typescript

Hoa Xuan Vo 1 Oct 4, 2021
✌️ A spring physics based React animation library

✌️ A spring physics based React animation library

Poimandres 22.2k Jan 21, 2022
An animation package for react-ui-ox and the community

react-ui-ox-anim An animation package for react-ui-ox and the community Getting Started Add as a dependency npm install react-ui-ox-anim Add as a dev

null 1 Nov 3, 2021
React typing animation in ~400 bytes 🐡 of JavaScript.

react-typical React Animated typing in ~400 bytes ?? of JavaScript. DEMO Based on awesome typical library by @camwiegert Youtube Video Tutorial Instal

Catalin Miron 661 Jan 7, 2022
A react add-on for drawing polygons for any number of sides, as well as animation

react-polygon A react add-on for drawing polygons for any number of sides, as well as animation Demo https://peteroid.github.io/react-polygon/ Usage n

Peter Chow 27 Sep 16, 2021
✌️ A spring physics based React animation library

react-spring is a spring-physics based animation library that should cover most of your UI related animation needs. It gives you tools flexible enough

Poimandres 22.1k Jan 17, 2022
The best way to build animation compositions for React.

https://jondot.github.io/react-flight/ The best way to build animation compositions for React. Design and compose a component to start with, a compone

Dotan J. Nahum 2.8k Jan 12, 2022