✨ (ノ´ヮ´)ノ*:・゚✧ A super easy animation library for React!

Last update: Jul 28, 2022

react-anime

Npm Package License Unit Tests Coverage Tests Dependency Status devDependency Status

(ノ´ヮ´)ノ*:・゚✧ A super easy animation library for React built on top of Julian Garnier's anime.js.
Just place an component and what you want animated inside.

Documentation | Demos | Anime.js

Installation

npm i react-anime -S

Features

  • Animate nearly all CSS, SVG, & DOM attributes by adding a prop with their name (eg. opacity, backgroundColor, translateX).

  • Nested animations are as easy as putting an component inside another.

  • Cascading animations through delay prop.

  • Add elements dynamically and have them animate in.

  • TypeScript definitions included.

Usage

import React from 'react';
import Anime, { anime } from 'react-anime';

let colors = [ 'blue', 'green', 'red' ];

const MyAnime = (props) => (
    <Anime delay={anime.stagger(100)} scale={[ 0.1, 0.9 ]}>
        {colors.map((color, i) => <div key={i} className={color} />)}
    </Anime>
);

GitHub

https://github.com/plus1tv/react-anime
Comments
  • 1. "Warning: The tag is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter."

    Using a blank create-react-app application, with only react-anime installed and only a simple Anime tag I get this warning in Chrome:

    Warning: The tag <g> is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter.

    Reviewed by karl-run at 2017-11-03 19:26
  • 2. Docs and examples links don't work?

    Clicking on the link to either the API Docs or the Examples from the repo homepage just reloads the main https://hyperfuse.github.io/react-anime/ page...

    Reviewed by hilary-L at 2017-06-23 21:34
  • 3. Would be nice to have a list of default animations that people can use out of the box.

    It would be nice to have a list of default animations that can be used out of the box.

    For example, animate.css has animations such as:

    • bounce
    • flash
    • rubberBand
    • fadeIn

    etc

    See the example here:

    https://daneden.github.io/animate.css/

    Reviewed by dkwin at 2016-09-08 23:37
  • 4. Animation is run on every rerender

    Clicking on a button will show the animation again although there was no markup change:

    ReactAnime

    import React, { useState } from "react";
    import Anime from "react-anime";
    
    export default function App() {
      const list = [0, 1, 2, 3, 4, 5];
      const [, set] = useState();
      return (
        <Anime scale={[0, 1]}>
          {list.map(i => (
            <button key={i} onClick={() => set(i)}>
              {i}
            </button>
          ))}
        </Anime>
      );
    }
    

    Codesandbox: https://codesandbox.io/s/react-anime-rerender-ttfbu

    Reviewed by jantimon at 2020-03-21 15:48
  • 5. Typescript - why most of the unnecessary props are required but ignored in main example?

    Main example on react-anime doesn't compile in typescript

    <Anime delay={(e, i) => i * 100}
             scale={[.1, .9]}>
        <div className="blue"/>
        <div className="green"/>
        <div className="red"/>
      </Anime>
    

    Anime declaration define multiple props as required which are not present in example. Can anyone explain me why those props are required? I'm new in react-anime and anime.js it self. Maybe I could help with typescript here?

    Please see an example below: https://codesandbox.io/s/20jn36m0l0

    Reviewed by kresli at 2017-12-15 21:35
  • 6. Cannot import react-anime

    Importing react-anime results in: SyntaxError: Cannot use import statement outside a module

    Import statements used:

    import Anime, { anime } from 'react-anime'
    or
    import Anime from 'react-anime'
    

    Trying out the latest package on npm using RunKit results in the same error: https://npm.runkit.com/react-anime

    I am using Next.js with JavaScript.

    EDIT: I ended up fixing this issue by using Next.JS Dynamic Imports. I believe it has to do with how the 'window' element is undefined in the development environment.

    Here is the import statement I used to fix the issue:

    import dynamic from 'next/dynamic'
    const Anime = dynamic(() => import('react-anime'), {ssr: false})
    
    Reviewed by jwl-7 at 2021-09-20 03:02
  • 7. What about Timeline animation?

    Hi there. Could you give some example to animate components one by one, like kind of TimeLine animation in anime.js. It's not staggerAnimation of list's items. I want to animate two different components in two different places of page, but one by one. I know how it may be implemented with anime.js or gsap. Is there some way to make it with react-anime?. http://anime-js.com/documentation/#basicTimeline I'll be grateful for any help, thanks.

    Reviewed by maximusnikulin at 2017-05-20 18:54
  • 8. Questions

    It would be lovely if there were moar examples on the readme, I can't seem to trigger another animation using the complete callback, like in https://github.com/juliangarnier/anime/blob/master/examples/callbacks.html

    TIA

    Reviewed by polmoneys at 2016-11-03 16:10
  • 9. composite components

    This currently does not work:

    class Button extends React.Component {
      render () {
        return <button>{this.props.children}</button>
      }
    }
    
    // functional components don't work anyway because we can't attach a ref
    // const Button = ({ children }) => <button>{children}</button>
    
    function App () {
      return (
        <Anime opacity={[0, 1]} translateY={'1em'}>
          <Button>Hello World</Button>
        </Anime>
      )
    }
    

    We could solve this by querying the raw dom node using findDOMNode() but that would make it even more incompatible with react-native because of the react-dom dep.

    Reviewed by queckezz at 2016-09-30 12:17
  • 10. Controls Documentation

    Hi, sorry but I'm kinda stuck with the controlspart because it's not listed on the documentation.
    I also tried to read the source code and some examples but my code wont work, It'll be great if you add it on Read.me for noobies like me. Thank you!

    Reviewed by kriziacamilleuayan at 2020-02-25 14:04
  • 11. The resulting from an tag breaks a Relative % Chain

    When inserting an component within one of my containers (i.e a 50% container) to animate a child of a relative width (i.e 100% of its container), the will break the relative width chain and not occupy the full container.

    Proposed fix: initiating Anime components with a width style of 100% or to give g elements a property of width: 100% in the .css.

    Let me know if you approve of a solution to this issue and I can make the PR

    Reviewed by Crizzooo at 2017-06-18 00:00
  • 12. Bump terser from 5.6.0 to 5.14.2

    Bumps terser from 5.6.0 to 5.14.2.

    Changelog

    Sourced from terser's changelog.

    v5.14.2

    • Security fix for RegExps that should not be evaluated (regexp DDOS)
    • Source maps improvements (#1211)
    • Performance improvements in long property access evaluation (#1213)

    v5.14.1

    • keep_numbers option added to TypeScript defs (#1208)
    • Fixed parsing of nested template strings (#1204)

    v5.14.0

    • Switched to @​jridgewell/source-map for sourcemap generation (#1190, #1181)
    • Fixed source maps with non-terminated segments (#1106)
    • Enabled typescript types to be imported from the package (#1194)
    • Extra DOM props have been added (#1191)
    • Delete the AST while generating code, as a means to save RAM

    v5.13.1

    • Removed self-assignments (varname=varname) (closes #1081)
    • Separated inlining code (for inlining things into references, or removing IIFEs)
    • Allow multiple identifiers with the same name in var destructuring (eg var { a, a } = x) (#1176)

    v5.13.0

    • All calls to eval() were removed (#1171, #1184)
    • source-map was updated to 0.8.0-beta.0 (#1164)
    • NavigatorUAData was added to domprops to avoid property mangling (#1166)

    v5.12.1

    • Fixed an issue with function definitions inside blocks (#1155)
    • Fixed parens of new in some situations (closes #1159)

    v5.12.0

    • TERSER_DEBUG_DIR environment variable
    • @​copyright comments are now preserved with the comments="some" option (#1153)

    v5.11.0

    • Unicode code point escapes (\u{abcde}) are not emitted inside RegExp literals anymore (#1147)
    • acorn is now a regular dependency

    v5.10.0

    • Massive optimization to max_line_len (#1109)
    • Basic support for import assertions
    • Marked ES2022 Object.hasOwn as a pure function
    • Fix delete optional?.property
    • New CI/CD pipeline with github actions (#1057)

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

    Reviewed by dependabot[bot] at 2022-07-20 02:47
  • 13. Bump node-fetch from 2.6.1 to 2.6.7

    Bumps node-fetch from 2.6.1 to 2.6.7.

    Release notes

    Sourced from node-fetch's releases.

    v2.6.7

    Security patch release

    Recommended to upgrade, to not leak sensitive cookie and authentication header information to 3th party host while a redirect occurred

    What's Changed

    Full Changelog: https://github.com/node-fetch/node-fetch/compare/v2.6.6...v2.6.7

    v2.6.6

    What's Changed

    Full Changelog: https://github.com/node-fetch/node-fetch/compare/v2.6.5...v2.6.6

    v2.6.2

    fixed main path in package.json

    Commits
    • 1ef4b56 backport of #1449 (#1453)
    • 8fe5c4e 2.x: Specify encoding as an optional peer dependency in package.json (#1310)
    • f56b0c6 fix(URL): prefer built in URL version when available and fallback to whatwg (...
    • b5417ae fix: import whatwg-url in a way compatible with ESM Node (#1303)
    • 18193c5 fix v2.6.3 that did not sending query params (#1301)
    • ace7536 fix: properly encode url with unicode characters (#1291)
    • 152214c Fix(package.json): Corrected main file path in package.json (#1274)
    • See full diff in compare view
    Maintainer changes

    This version was pushed to npm by endless, a new releaser for node-fetch since your current version.


    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.

    Reviewed by dependabot[bot] at 2022-06-24 22:05
  • 14. Bump minimist from 1.2.5 to 1.2.6

    Bumps minimist from 1.2.5 to 1.2.6.

    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.

    Reviewed by dependabot[bot] at 2022-04-08 22:41
  • 15. "Failed to parse source map from" error

    Hi, I'm familiarizing myself with react-anime and have it installed and working on my React app on Node 17.4.0 with a simple translateX animation. I'm getting both an error and warning in the terminal. No errors in the browser console. I've removed both node_modules and package-json.lock file and did a npm install again with no luck. Any help would be great! Here's the error:

    Compiled with warnings.
    
    Failed to parse source map from '/Users/byuen/Documents/Dev/billboard/node_modules/react-anime/dist/react-anime.modern.js.map' file: Error: ENOENT: no such file or directory, open '/Users/byuen/Documents/Dev/billboard/node_modules/react-anime/dist/react-anime.modern.js.map'
    
    Search for the keywords to learn more about each warning.
    To ignore, add // eslint-disable-next-line to the line before.
    
    assets by chunk 1.68 MiB (name: main)
      asset static/js/bundle.js 1.67 MiB [emitted] (name: main) 1 related asset
      asset main.83f09de76eaf347ab393.hot-update.js 12.2 KiB [emitted] [immutable] [hmr] (name: main) 1 related asset
    assets by path *.json 343 bytes
      asset asset-manifest.json 315 bytes [emitted]
      asset main.83f09de76eaf347ab393.hot-update.json 28 bytes [emitted] [immutable] [hmr]
    asset index.html 555 bytes [emitted]
    Entrypoint main 1.68 MiB (1.75 MiB) = static/js/bundle.js 1.67 MiB main.83f09de76eaf347ab393.hot-update.js 12.2 KiB 2 auxiliary assets
    cached modules 1.53 MiB [cached] 120 modules
    runtime modules 28.2 KiB 13 modules
    ./src/App.js 8.53 KiB [built] [code generated]
    
    WARNING in ./node_modules/react-anime/dist/react-anime.modern.js
    Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
    Failed to parse source map from '/Users/username/Documents/Dev/billboard/node_modules/react-anime/dist/react-anime.modern.js.map' file: Error: ENOENT: no such file or directory, open '/Users/username/Documents/Dev/billboard/node_modules/react-anime/dist/react-anime.modern.js.map'
     @ ./src/App.js 7:0-43 159:41-46 162:19-32
     @ ./src/index.js 8:0-24 11:33-36
    
    1 warning has detailed information that is not shown.
    Use 'stats.errorDetails: true' resp. '--stats-error-details' to show it.
    
    webpack 5.68.0 compiled with 1 warning in 127 ms
    ^C
    [email protected] billboard % node -v
    v17.4.0
    
    Reviewed by brianyuen at 2022-02-03 17:54
  • 16. Removing forced delay in

    Reviewed by Papput at 2020-09-29 13:36
🎯 React UI animation made easy
🎯 React UI animation made easy

React Simple Animate React UI animation made easy Features Animation from style A to B CSS keyframes animation Chain up animation sequences Tiny size

Aug 2, 2022
react-animated-numbers - 👾 Library showing animation of number changes in react.js

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

Jul 27, 2022
✌️ A spring physics based React animation library
✌️ 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

Jul 31, 2022
Open source, production-ready animation and gesture library for React
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

Jul 30, 2022
✌️ A spring physics based React animation library
✌️ A spring physics based React animation library

✌️ A spring physics based React animation library

Aug 4, 2022
✌️ A spring physics based React animation library
✌️ 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

Aug 5, 2022
🎰 Library showing animation of number changes in react-native
🎰  Library showing animation of number changes in react-native

react-native-animated-numbers Library showing animation of number changes in react-native If you want web version in react.js download react-animated-

Jul 27, 2022
SimpleReveal - A simple scroll animation library in React

SimpleReveal A simple scroll animation library in React Zero-dependency No additional DOM element Simple and predictable API SSR Support (Next.js, Gat

May 29, 2022
A small but powerful animation library for React, built on Web Animations API
A small but powerful animation library for React, built on Web Animations API

A small but powerful animation library for React, built on Web Animations API

Aug 3, 2022
A wrapper over Motion One, An animation library, built on the Web Animations API for the smallest filesize and the fastest performance

A wrapper over Motion One, An animation library, built on the Web Animations API for the smallest filesize and the fastest performance. Works with solid-js

Jul 31, 2022
React components for the Web Animations API - http://react-web-animation.surge.sh
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

Jul 27, 2022
Animation engine designed for React
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

Jul 31, 2022
React particles animation background component
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

Jul 30, 2022
Sine wave animation using React & Typescript with Canvas API :heart_eyes:

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

Jun 13, 2022
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

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

Aug 3, 2022
Simple typing text animation in React component

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

Jan 3, 2022
⚛️ Perform animation and transition of React component with ease.

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

Aug 4, 2022
react-bubbly-effect-button🧼 Bubble animation on button
 react-bubbly-effect-button🧼 Bubble animation on button

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

Jul 17, 2022
Build custom animation components in React using typescript
Build custom animation components in React using typescript

Build custom animation components in React using typescript

May 6, 2022