I have a css file and a js file that imported into my react class like so:
import React from 'react'
import '../App.css'
import '../motion'
const Landing = () => {
return (
<div id="container">
<div className="center">
<h1 className="el-st">El Que Sabe Sabe</h1>
{/* <span className="scroll">Scroll to shuffle</span> */}
</div>
</div>
)
}
export default Landing
The animation only works when I remove the imported js file , re-add it and save the file leading me to believe the file is not being properly read when the component is mounted.
Is there a way to resolve this?
If it works when you remove, re-add and then saving the files, that means that the state isn't updated per animation iteration.
I am not sure if you are using css animation, or js animation. But either or, i'd suggest implementing a simple useState statement somewhere. There really isn't enough information provided.
You can define something like:
const [animation, setAnimation] = useState(false);
And every time you want to play the animation, just call:
setAnimation(!animation);