Closed kriziacamilleuayan closed 3 years ago
Functions can be triggered by creating references (React.createRef()) of the 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! 🙂
@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
@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
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!