Anime not working with components

[mikael-kalstad]

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.

[cbbfcd]

yep. react-anime use ref callback to add dom target to anime engine，so if you use a Component, the anime engine will be passed into a component instance, it's will not work well.

[drewhoener]

for your function, use React.forwardRef

const Box = React.forwardRef((props, ref) => {
  let style = {
    width: "100px",
    height: "100px",
    background: "#ef5858"
  };
  return <div ref={ref} style={style}>Box</div>;
});

export default Box;

and that seems to work