plus1tv / react-anime Goto Github PK

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.

Trying to use react-anime for mounting/unmounting of components but animations are re-run every time component is re-rendered, regardless if something changes in child or <Anime ...> definition.

e.g. <Anime opacity={[0, 1]}>hello</Anime> will rapidly flash 'hello' each time you run setState or e.g. props are changed via Redux. This makes the library a bit useless, particularly for Redux, as component must manually be cached and wrapped to avoid this behaviour.

Maybe a feature to limit animations to only run when mounting/unmounting could fix it temporarily.

Version: 2.0.1

Hey all,

I'm trying to do some function based elasticity per the anime.js documentation.

The following works for duration and delay, but not for elasticity. Does React-Anime not support this feature? The function doesnt appear to have any impact on elasticity.

   <Anime
        translateY={[-400, 0]}
        opacity={[0, 1]}
        duration={ (el, i) => 3000 + 100 * i }
        delay={ (el, i) => { console.log('delay?', i); return 3500 + 100 * i;} }
        elasticity={ (el, i) => console.log('elastic?', i)}
        complete={ props.onComplete ? props.onComplete : null}
        easing="easeOutBack"
        >
        {props.text.split('').map( (el) => createLetter(el))}
      </Anime>

The function gets called and logs for delay, but never does so for elasticity.

I am having an issue when the props.children change for an <Anime>.

To solve my issue, I made this change to function componentWillReceiveProps in react-anime.js file:

this.children = {
        /*
        cur: children.filter(function (c) {
          return difChildren.indexOf(c) < 0;
        }),
        */
        cur: children,
        prev: childrenWereRemoved ? difChildren : this.children.prev,
        next: !childrenWereRemoved ? difChildren : this.children.next
      };

For some reason, the filter was returning zero children, even though there was a child component.

I am using anime like this;

//inside parent component
<FadeIn>{messageWords}</FadeIn>

let FadeIn = props => {
    return (
        <Anime easing="linear"
            autoplay={true}
            duration={500}
            direction="normal"
            loop={false}
            opacity={[0, 1]}
            delay={(el, index) => ((index * 200) + 1500)}>
            {props.children}
        </Anime>
    )
}

Hi.
I am using React 16.4.2 and react-anime 2.1.0. And I have problem with direction and delay. If I use direction="reverse". Delay param flips.

Please see codesandox:
Sample 1 (React 15 & anime 0.3.4) - Delay works correctly
Sample 2 (React 16 & anime 2.1.0) - Delay flips

Code in both examples are identical only version of react and react-anime changes.
So question is does behavior of delay in 2.1.0 is correct. And if this behavior is correct how can i make that delay works like in version 0.3.4

Thanks

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

Really not sure what I'm doing wrong here. Just trying to get a basic translation going so I can start working with the library.

Any ideas?

render(){
		const {classes} = this.props;
		return (
			<div className={classes.landscape}>
				<div className={classes.centerpiece}>
					<Anime translateY={100} loop={true} autoplay={true}>	
						<Dot/>
					</Anime>
				</div>
			</div>
		);
	}

    <Anime easing='easeOutBounce'
   ...

results in an error: "Uncaught TypeError: l.easing is not a function"

But:

    <Anime easing='easeOutElastic'
   ...

does work.

Also: I couldn't find easeOutBounce in the anime.js documentation.

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/

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

Pipes (|) in markdown tables must be escaped in order to render correctly. Currently the docs are missing important prop types because of this issue.

I saw Anime release version 2.0 23 days ago. Updating this lib would be great!

It would be awesome to work on making this compatible with react-native. This issue is meant to open discussion and suggestions.

It requires a global React?

Not sure if this is a known issue or not, just want to make sure.
Keyframes don't seem to work.

<Anime easing="easeInOutCirc"
	targets={".highlightcolor"}
	loop={true}
	color={["#0000FF", "#FF0000", "#00FF00"]}
	translateX={[
		{ value: 250, duration: 1000, delay: 500, elasticity: 0 },
		 { value: 0, duration: 1000, delay: 500, elasticity: 0 }
	]}>

Does absolutely nothing when it comes to translation. The color property is only animated between "#0000FF", "#FF0000", so that's also not how these are supposed to work here, I guess.

Am I doing something wrong?

Hey, can you please publish the last master to npm? It would be useful to have the updated typescript interfaces that went into this MR: #45

Hi there,

Trying to use React Anime in my project, and I keep getting the above error!

node v9.8.0
react v16.2.0

Snippet of my code:

render () {
    const { type, show, title, fetching, handleCloseModal, initialValues } = this.props
    let defaultValues = initialValues || {}
    let animeProps = {
      opacity: [0, 1],
      translateY: [-64, 0],
      delay: (el, i) => i * 200
    }
    return (
      <Anime {...animeProps}>
        {
          show &&
          <ActionModal
            title={title}
            show={show}
            fetching={fetching}
            onClose={handleCloseModal}>
            {this._renderForm(type, defaultValues)}
          </ActionModal>
        }
      </Anime>
    )
  }

Where show is a bool being passed from the parent component. I am also using styled-components throughout the app if that makes any difference?

The error seems to be in the actual anime.min.js file inside node_modules - not inside react-anime itself, but there is nothing there on the issue either. Anyone had this before and manage to solve it?

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.

seems like you changed the package name?
but still it refers to react-motion in the online docs.

https://alain.xyz/libraries/react-anime

I am getting an error using this library using v8.9.4 of Node.

import Anime from 'react-anime';

....

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

This may be because I am using Gatsby, which may require one to transpile to es5 before using a library but I am not sure.

Can you push up a new version of the package onto npm?

The local code is at version 2.0.2.
https://github.com/hyperfuse/react-anime/blob/master/packages/react-anime/package.json

But the code on npm is back at 0.3.4.
https://www.npmjs.com/package/react-anime

When I went to make a fix in the package I realized that the react lifecycle methods have since changed.

This is SOOO much simpler than other react animation tools out there. If it supported mounting and unmounting animations, it would be the best option available IMO. Have you considered adding this feature?

I thought it would be cool to use react-anime to create something like this: https://tympanus.net/Development/ShapeMorphIdeas/index3.html

I tried to morph the paths by wrapping each one in and added the "d" attribute for each one respectively, but nothing happens. Any suggestions would be greatly appreciated!

Here's my code:

js

<svg className="scene" width="100%" height="100%" preserveAspectRatio="none" viewBox="0 0 1440 800">
        <Anime
          easing="easeOutElastic"
          direction="alternate"
          loop={true}
          autoplay={true}
          duration={Math.floor(Math.random() * 5000) + 3000}
          d="M -84.52,-81.13 C -94.62,-73.4 -88.88,-59.55 -90.33,-48.91 -89.29,27.31 -89.61,103.5 -88.33,179.8 -85.99,416.1 -81.32,888.9 -81.32,888.9 -81.32,888.9 974.5,888.7 1587,891.9 1518,719.9 1487,644 1429,533 1388,437.7 1447,259.7 1400,187 1362,132 1270,90.53 1207,39.93 1161,2.932 1071,-74.45 1071,-74.45 1071,-74.45 914.5,-77.77 848.2,-80.17 537.6,-80.84 227,-81.38 -83.6,-81.6 -83.91,-81.44 -84.21,-81.29 -84.52,-81.13 Z"
          >
            <path d="M -84.52,-81.13 C -94.62,-73.4 -88.88,-59.55 -90.33,-48.91 -89.29,27.31 -89.61,103.5 -88.33,179.8 -85.99,416.1 -81.32,888.9 -81.32,888.9 -81.32,888.9 974.5,888.7 1587,891.9 1518,719.9 1487,644 1429,533 1388,437.7 1447,259.7 1400,187 1362,132 1270,90.53 1207,39.93 1161,2.932 1071,-74.45 1071,-74.45 1071,-74.45 914.5,-77.77 848.2,-80.17 537.6,-80.84 227,-81.38 -83.6,-81.6 -83.91,-81.44 -84.21,-81.29 -84.52,-81.13 Z"></path>
        </Anime>
        <Anime
          easing="easeOutElastic"
          direction="alternate"
          loop={true}
          autoplay={true}
          duration={Math.floor(Math.random() * 5000) + 3000}
          d="M 665.2,-83.08 C 413.7,-81.89 162.2,-82.43 -89.29,-81.61 -90.35,164.3 -85.06,410.2 -84.09,656.1 -83.37,733.7 -82.64,811.3 -81.92,888.9 442.4,889.8 966.7,890.7 1491,891.6 1253,747.5 1417,429.4 1286,245.4 1227,163.2 1107,142.1 1043,64.54 1009,24.41 973,-76.01 973,-76.01 973,-76.01 706.6,-83.67 665.2,-83.08 Z"
          >
          <path d="M 665.2,-83.08 C 413.7,-81.89 162.2,-82.43 -89.29,-81.61 -90.35,164.3 -85.06,410.2 -84.09,656.1 -83.37,733.7 -82.64,811.3 -81.92,888.9 442.4,889.8 966.7,890.7 1491,891.6 1253,747.5 1417,429.4 1286,245.4 1227,163.2 1107,142.1 1043,64.54 1009,24.41 973,-76.01 973,-76.01 973,-76.01 706.6,-83.67 665.2,-83.08 Z"></path>
        </Anime>
        <Anime
          easing="easeOutElastic"
          direction="alternate"
          loop={true}
          autoplay={true}
          duration={Math.floor(Math.random() * 5000) + 3000}
          d="M -85.01,-74.02 C -92.39,-66.64 -85.37,-55.79 -87.81,-46.91 -86.65,265.1 -84.66,577.2 -83.18,889.2 317.2,888.3 717.5,885.8 1118,890.4 1152,890.6 1187,890.9 1221,890 1219,768.3 1224,643.6 1187,526 1153,417 1091,319.3 1029,224.1 998.8,178.5 968.8,132.6 936.6,88.23 891.7,27.39 772.2,-78.96 772.2,-78.96 772.2,-78.96 222.1,-81.07 -85.01,-74.02 Z"
          >
          <path d="M -85.01,-74.02 C -92.39,-66.64 -85.37,-55.79 -87.81,-46.91 -86.65,265.1 -84.66,577.2 -83.18,889.2 317.2,888.3 717.5,885.8 1118,890.4 1152,890.6 1187,890.9 1221,890 1219,768.3 1224,643.6 1187,526 1153,417 1091,319.3 1029,224.1 998.8,178.5 968.8,132.6 936.6,88.23 891.7,27.39 772.2,-78.96 772.2,-78.96 772.2,-78.96 222.1,-81.07 -85.01,-74.02 Z"></path>
        </Anime>
        <Anime
          easing="easeOutElastic"
          direction="alternate"
          loop={true}
          autoplay={true}
          duration={Math.floor(Math.random() * 5000) + 3000}
          d="M -92.42,-79.11 C -89.97,243.8 -87.52,566.7 -85.07,889.6 201.8,889.9 488.7,889.9 775.5,895.6 880.4,896.9 985.2,894 1090,892.5 1064,773.3 1037,651.6 976.1,544.8 946.7,495.8 914.6,448.3 882,401.3 820.9,314.4 742.3,252 666.4,177.4 583.2,98.01 496.5,12.18 386.7,-23.38 328.4,-45.64 232.6,-81.38 232.6,-81.38 232.6,-81.38 9.82,-84.94 -92.42,-79.11 Z"
          >
          <path d="M -92.42,-79.11 C -89.97,243.8 -87.52,566.7 -85.07,889.6 201.8,889.9 488.7,889.9 775.5,895.6 880.4,896.9 985.2,894 1090,892.5 1064,773.3 1037,651.6 976.1,544.8 946.7,495.8 914.6,448.3 882,401.3 820.9,314.4 742.3,252 666.4,177.4 583.2,98.01 496.5,12.18 386.7,-23.38 328.4,-45.64 232.6,-81.38 232.6,-81.38 232.6,-81.38 9.82,-84.94 -92.42,-79.11 Z"></path>
        </Anime>
        <Anime
          easing="easeOutElastic"
          direction="alternate"
          loop={true}
          autoplay={true}
          duration={Math.floor(Math.random() * 5000) + 3000}
          d="M -88.6,95.54 C -90.38,166.1 -88.23,236.7 -88.68,307.4 L -86.19,890 C 229.7,890.2 939.8,892.4 939.8,892.4 855.2,767 831,639.4 721.4,519.4 634.7,424.5 526.4,360.9 428.8,281.8 332.7,204 251.6,102.3 140.1,48.9 70.75,15.73 -24.82,24.2 -85.28,0.03 Z"
          >
          <path d="M -88.6,95.54 C -90.38,166.1 -88.23,236.7 -88.68,307.4 L -86.19,890 C 229.7,890.2 939.8,892.4 939.8,892.4 855.2,767 831,639.4 721.4,519.4 634.7,424.5 526.4,360.9 428.8,281.8 332.7,204 251.6,102.3 140.1,48.9 70.75,15.73 -24.82,24.2 -85.28,0.03 Z"></path>
        </Anime>
        <Anime
          easing="easeOutElastic"
          direction="alternate"
          loop={true}
          autoplay={true}
          duration={Math.floor(Math.random() * 5000) + 3000}
          d="M -95.69,252.3 -87.65,890.4 698.1,892 C 698.1,892 599.1,687.7 518.9,610.6 348,446.2 131.4,466.5 -95.69,252.3 Z"
          >
          <path d="M -95.69,252.3 -87.65,890.4 698.1,892 C 698.1,892 599.1,687.7 518.9,610.6 348,446.2 131.4,466.5 -95.69,252.3 Z"></path>
        </Anime>
        <Anime
          easing="easeOutElastic"
          direction="alternate"
          loop={true}
          autoplay={true}
          duration={Math.floor(Math.random() * 5000) + 3000}
          d="M -85.59,444.4 -85.59,890.6 489,895.6 C 489,895.6 436.8,745.3 382.5,690.8 258.1,565.8 57.98,629.2 -85.59,444.4 Z"
          >
          <path d="M -85.59,444.4 -85.59,890.6 489,895.6 C 489,895.6 436.8,745.3 382.5,690.8 258.1,565.8 57.98,629.2 -85.59,444.4 Z"></path>
        </Anime>
      </svg>

css

.scene {
  position: fixed;
	background: #282886;
  z-index: -10;
}

.scene g:first-child path {
	fill: #4f4fea;
}

.scene g:nth-child(2) path {
	fill: #0c27cf;
}

.scene g:nth-child(3) path {
	fill: #13269c;
}

.scene g:nth-child(4) path {
	fill: #242468;
}

.scene g:nth-child(5) path {
	fill: #2648e6;
}

.scene :nth-child(6) path {
	fill: #2c31b0;
}

.scene g:nth-child(7) path {
	fill: #262689;
}

Hey there.

I noticed that the website is not working.
Just a suggestion: a github.io one?

Cheers

Hi there. I want to use defaultStyles like react-motion to prevent executing animation on mount component. Is there some way to achieve it?
Thanks.

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

Hi, I've been trying to find a way to trigger the animation manually based on some conditions, but it looks like the only way to get a reference to the animation instance is through one of the begin, update or complete callback functions, and they all require the autoplay prop to be true to trigger. Is there any way that we can get the animation instance when the component mount?

Am I doing something wrong?

import Anime from 'react-anime';

function Header() {
   return (
      <div>
         <h1>Header</h1>
         <Anime>
           <div style={{ width: 40, height: 40, background: 'blue' }} />
         </Anime>
      </div>
   )
}

I've tried adding the props from the example, but without them I also get the same result. It simply makes my div disappear.

If I re-render(I'm using Gatsby built in react-router Link component) a page too fast e.g fast clicking; twice will drop the error 3 fast clicks will produce a blank white page. Any suggestions?

I checked the the docs, examples and source but I couldn't find any component equivalent to anime.timeline() is there any plan to include it?

Today I tried to use the cascading list feature, which worked with an initial state, but it didn't work when updating the state.

I followed the steps written here: https://alain.xyz/libraries/react-anime

I created a codesandox to reproduce the issue: https://codesandbox.io/embed/github/profran/olimpiada-inet-2019/tree/master/

Just trying to get something basic going, and it doesn't seem to be working.

Note: I have figured out how to use anime.js with React, and will be doing so until I can figure out how to use react-anime.

Here's my code:

render(){
		const {classes} = this.props;
		return (
			<div className={classes.landscape}>
				<div className={classes.centerpiece}>
					<Anime delay={100} scale={[.1, .9]}>
						<Dot className={classes.dot}/>
					</Anime>
				</div>
			</div>
		);
	}

Hey,

I am trying to write tests to check the state changes of my component on mouse enter.

describe('animeButton', () => {
  it('swaps between normal and hover views', () => {
    const Button = mount( <AnimeButton
                            hoverTextClassName="hoverText"
                            normalTextClassName="normalText" />);
    // ReactTestUtils.Simulate.mouseEnter(Button); <-- Would also error out
    const element = Button.find('a');
    element.simulate('mouseEnter');  <-- Errors out

When I run the little bit of code, I get an error 'NodeList is not defined' from Line 219 of /dist/anime.js. I was able to alter the source code to get passed this function if of unknownHTMLElement type, but then I hit a tags button elsewhere in the anime.js source code.

Ive tried many different approaches and cant find a way to simulate this mouseEnter.

What's the current recommended solution for testing components that use Anime components?

Full Error Log:

1) animeButton swaps between normal and hover views:
     ReferenceError: NodeList is not defined
      at p (node_modules/react-anime/dist/anime.min.js:1:3112)
      at Array.map (native)
      at _ (node_modules/react-anime/dist/anime.min.js:1:5577)
      at Q (node_modules/react-anime/dist/anime.min.js:1:8715)
      at H (node_modules/react-anime/dist/anime.min.js:1:9096)
      at e.createAnime (node_modules/react-anime/dist/anime.min.js:1:12115)
      at e.value (node_modules/react-anime/dist/anime.min.js:1:11575)
      at node_modules/react-dom/lib/ReactCompositeComponent.js:264:25
      at measureLifeCyclePerf (node_modules/react-dom/lib/ReactCompositeComponent.js:75:12)
      at node_modules/react-dom/lib/ReactCompositeComponent.js:263:11
      at CallbackQueue.notifyAll (node_modules/react-dom/lib/CallbackQueue.js:76:22)
      at ReactReconcileTransaction.close (node_modules/react-dom/lib/ReactReconcileTransaction.js:80:26)
      at ReactReconcileTransaction.closeAll (node_modules/react-dom/lib/Transaction.js:209:25)
      at ReactReconcileTransaction.perform (node_modules/react-dom/lib/Transaction.js:156:16)
      at ReactUpdatesFlushTransaction.perform (node_modules/react-dom/lib/Transaction.js:143:20)
      at ReactUpdatesFlushTransaction.perform (node_modules/react-dom/lib/ReactUpdates.js:89:32)
      at Object.flushBatchedUpdates (node_modules/react-dom/lib/ReactUpdates.js:172:19)
      at ReactDefaultBatchingStrategyTransaction.closeAll (node_modules/react-dom/lib/Transaction.js:209:25)
      at ReactDefaultBatchingStrategyTransaction.perform (node_modules/react-dom/lib/Transaction.js:156:16)
      at Object.batchedUpdates (node_modules/react-dom/lib/ReactDefaultBatchingStrategy.js:62:26)
      at Object.batchedUpdates (node_modules/react-dom/lib/ReactUpdates.js:97:27)
      at node_modules/react-dom/lib/ReactTestUtils.js:349:18
      at ReactWrapper.<anonymous> (node_modules/enzyme/build/ReactWrapper.js:776:11)
      at ReactWrapper.single (node_modules/enzyme/build/ReactWrapper.js:1421:25)
      at ReactWrapper.simulate (node_modules/enzyme/build/ReactWrapper.js:769:14)
      at Context.<anonymous> (test/index2.test.js:26:13)```

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

looks like its missing some core files

Hey,

I'm building a React-Anime button with an animated SVG and I want to publish it on NPM.

So that component would be a peer dependency of your project. But when I install your project, it does not automatically install animejs.

Is this on purpose? Could you explain why?

Now when I publish mine, do I just require your package and leave a note for the user that they will need to npm i -S animejs themselves?

The documentation doesn't show after the loading animation. I've tried across different browsers but the results are the same

I'm fairly new with React and had some questions using this module.

The idea is to have an element that animates opacity and becomes hidden after animation based on a button toggle (opacity 0 doesn't works in this case since mouse events still works in an element with opacity 0, so display: none or visibility:hidden should work)

Problem: I need to animate opacity based on custom prop, it's ok and animates perfectly using opacity={this.props.opened ? 1 : 0}. But at the end of animation, i need to apply {visibility: 'hidden'} or {display: 'none'} to child component, and on animation start, i also need to apply back {visibility: 'visible'} for element to reaper.

I tried keeping this style in state but when i call setState in 'begin' method it enters in an infinite loop. also, i tried to set style directly using this.refs but it returns Uncaught TypeError: Can't add property style, object is not extensible

What are the best ways to approach this problem?

I am having some problems with getting the animation to work when wrapping the <Anime> component with other components. Is this not supported? I could not find any relevant info in the documentation.

Example
Box component

import React from 'react';

export default function Box() {
    let style = {
        width: '100px',
        height: '100px',
        background: '#71bed6'
    }
    return <div style={style}>Box</div>
}

Index.js

import React from "react";
import ReactDOM from "react-dom";
import "./styles.css";
import Box from "./Box";
import Anime from "react-anime";

function App() {
  return (
    <div>
      <p>With div</p>
      <Anime
        easing="easeInOutElastic"
        duration={1000}
        loop={true}
        translateX={100}
      >
        <div className="box">Box</div>
      </Anime>

      <p>With component</p>
      <Anime
        easing="easeInOutElastic"
        duration={1000}
        loop={true}
        translateX={100}
      >
        <Box />
      </Anime>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

I have made the example in codesandbox

It would be easier if I could apply the animation to pre-made components instead of changing all of my components with the <Anime> component.

Hi,
Using create-react-app-ts, even a very basic

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.

The following TypeScript code, that uses styled-components only animates the first 4 divs (those with a style object). The other four (styled components) do not animate. Animation using the animejs library in componentdidmount with a css selector on the styled components does work. But I would prefer to use your wrapper library.

import * as React from "react";
import styled from "styled-components";
import Anime from "react-anime"

const Box = styled.div`
	width: 20px;
	height: 20px;
	background: red;
`

export default class Test extends React.Component
{
	public render(): JSX.Element
	{
		const style = {
			width: "20px",
			height: "20px",
			background: "green"
		}

		return (
			<div>
				<Anime delay={(e, i) => i * 100}
						scale={[.1, .9]}>

						<div style={style}/>
						<div style={style}/>
						<div style={style}/>
						<div style={style}/>

						<Box/>
						<Box/>
						<Box/>
						<Box/>
				</Anime>
			</div>
		)
	}
}

trying to use with a typescript app and getting the error abobe

Module '"../../../../../../../../../../Users/dc/dev/tix/recobot/stack/timeline/node_modules/react-anime/dist/react-anime"' has no exported member 'Motion'.ts(2305)

Trying to animate the following:

<polygon strokeWidth='1' stroke='currentColor' points='70 24 119.574 60.369 100.145 117.631 50.855 101.631 3.426 54.369' />

...and getting Error: Problem parsing points="[object Object]", a whole bunch of times. Here's the whole component:

<svg width='140' height='140' viewBox='0 0 140 140'>
  <g fill='currentColor' fillOpacity='.15' transform='translate(0 6)'>
    <polygon points='70 0 136.574 48.369 111.145 126.631 28.855 126.631 3.426 48.369' />
    <polygon points='70 18 119.455 53.931 100.565 112.069 39.435 112.069 20.545 53.931' />
    <polygon points='70 34.86 101.727 57.911 89.609 95.209 50.391 95.209 38.273 57.911' />
    <polygon points='70 50.898 84.864 61.697 79.186 79.171 60.814 79.171 55.136 61.697' />
  </g>

  <g fill='none' fillRule='evenodd'>
    <Anime
      points={[
        {
          value: '70 41 118.574 59.369 111.145 132.631 60.855 84.631 20.426 60.369'
        }, {
          value: '70 6 119.574 60.369 100.145 117.631 39.855 117.631 55.426 68.369'
        }, {
          value: '70 57 136.574 54.369 89.145 100.631 28.855 132.631 38.426 64.369'
        }, {
          value: '70 24 119.574 60.369 100.145 117.631 50.855 101.631 3.426 54.369'
        }
      ]}
      easing='easeOutQuad'
      duration={2000}
      loop={false}
    >
      <polygon strokeWidth='1' stroke='currentColor' points='70 24 119.574 60.369 100.145 117.631 50.855 101.631 3.426 54.369' />
    </Anime>
  </g>
</svg>

Hi,

Just discovered this today and it was a breeze to get this working!
I have each component set up with specific animations.
But when one component is updated, all the component in the container animate.
Even though the container itself does not have any animations defined.

Ideally I'd like only the specific component to animate and not the others.
Is there a way to stop this? May be I am doing something wrong?

Thanks

I checked the docs and assumed that the lib didn't support strokeDashEffort for drawing an SVG's shape borders only to find that this example actually made use of the prop. Do you think the docs could use some improvements?