Animation is run on every rerender

[Jan Nicklas]

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

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

[Moe]

I Am also having this issue, whenever rerendering occurs (in my case selecting an item), the animation is rerun.

[Axonn Echysttas]

Same here. Using functional components & useState.

I really liked the simplicity of defining animations. Anyway, until a solution is found, I switched to react-spring.

[Andrea Z.]

Same here

[CLEAREINK]

单击按钮将再次显示动画，尽管标记没有更改：

 从“ react” 导入React ， {  useState  }  ; 进口动漫从“反应-动漫” ; 
   

出口 默认 函数 应用（） { 
  const的 列表 =  [ 0 ， 1 ， 2 ， 3 ， 4 ， 5 ] ; 
  const  [ ， set ]  =  useState （）; 
  返回 （
    < 动画 规模= { [ 0 ， 1 ] } > 
      { 列表。映射（我 =>  （
        <按钮 键= { i }  onClick = { （） =>  设置（i ）} > 
          { i } 
        < / button > 
      ））} 
    < / 动漫> 
  ）; 
}

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

I think it's because the component's props have changed,Although they are both [0,1]

[slapbox]

I haven't found any way around this, or any circumstance that I can React-Anime due to this issue. It's a really elegant solution to integrating AnimeJS with React and I'd really like to use it. I'm not seeing how to work around this issue though. I even forked the library and spent the past few hours trying to remedy this.

@alaingalvan can you explain why this is, or what the correct implementation with React-Anime is?

[Bryan]

I second this, reach pushing functional components makes animations really hard when every update of the state triggers all animations over.

[Juan Christian]

I also have the same problem.

@alaingalvan just wondering will there be a fix to this issue?