Controls Documentation

[kriziacamilleuayan]

Hi, sorry but I'm kinda stuck with the controls part 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!

[b30wulffz]

Functions can be triggered by creating references (React.createRef()) of the component, and then calling functions using these refs as ref.current.anime.FUNCTION() where FUNCTION() can be replaced by play(), pause(), restart(), etc.

To know more, do console.log(ref.current.anime) and see what all functions are present.

I have attached an example for your reference:

import React from "react";
import "./styles.css";

import Anime from "react-anime";

export default function App() {
  const refer = React.createRef(); //created a reference which is used to identify a rendered component
  return (
    <div className="App">
      <Anime
        autoplay={false}
        opacity={[0, 1]}
        translateX={["100vw", 0]}
        ref={refer} //giving reference to the component
        duration={5000}
      >
        Hello
      </Anime>
      <button
        onClick={() => {
          refer.current.anime.play(); //triggering play() function
        }}
      >
        Play
      </button>
      <button
        onClick={() => {
          refer.current.anime.pause(); // triggering pause() function
        }}
      >
        Pause
      </button>
      <button
        onClick={() => {
          refer.current.anime.restart(); //triggering restart() function
        }}
      >
        Restart
      </button>
    </div>
  );
}

Here is a link to actual implementation of the above-mentioned code: Click Here

I hope it helps! 🙂

[WebKieth]

@b30wulffz u really still write components on classes? Welcome to 2021th, this unuseful adapter - it wont push reference if i try to use reference hook 😂 Really, its better to use clean animejs plugin, then this peace of problems

[mlepe]

@b30wulffz u really still write components on classes? Welcome to 2021th, this unuseful adapter - it wont push reference if i try to use reference hook 😂 Really, its better to use clean animejs plugin, then this peace of problems

^ So dumb yet so brave. What a jumbled mess of a post