I have a React component where elements change color every 5 seconds based on a countdown timer. I want the color changes to happen smoothly, but my current approach doesn’t work.
Here’s the code for my component:
const [colour2,setColour2] = React.useState("from-white to-white");
const [colour3,setColour3] = React.useState("from-white to-white");
const [counter, setCounter] = React.useState(15);
React.useEffect(() => {
counter > 0 && setTimeout(() => setCounter(counter - 1), 1000);
if(counter == 0){
setCounter(15)
}
if([11,12,13,14,15].includes(counter)){
setColour1("from-sky-600 to-cyan-300")
setColour2("from-white to-white")
setColour3("from-white to-white")
}
if([6,7,8,9,10].includes(counter)){
setColour2("from-orange-600 to-amber-300 ")
setColour1("from-white to-white")
setColour3("from-white to-white")
}
if([5,4,3,2,1].includes(counter)){
setColour3("from-purple-600 to-pink-600")
setColour2("from-white to-white")
setColour1("from-white to-white")
}
}, [counter]);
return (
<div className='absolute top-[80px] h-[600px] w-[150vh] ml-[200px] '>
<div className='text-white'>{counter}</div>
<span class={'absolute mx-auto py-4 flex border w-fit bg-gradient-to-r blur-3xl ' + (colour1) + ' bg-clip-text text-6xl box-content font-extrabold text-transparent text-center select-none transition-colors ease-out duration-500'}>
Contact.
</span>
<h1
class={"relative top-0 w-fit h-auto py-4 justify-center flex bg-gradient-to-r items-center " + (colour1) + " bg-clip-text text-6xl font-extrabold text-transparent text-center select-auto transition-colors ease-out duration-500"}>
Contact.
</h1>
<span class={"absolute mx-auto py-4 flex border w-fit bg-gradient-to-r blur-3xl " + (colour2) + " bg-clip-text text-6xl box-content font-extrabold text-transparent text-center select-none transition-colors ease-out duration-500"}>
Dev.
</span>
<h1
class={"relative top-0 w-fit h-auto py-4 justify-center flex bg-gradient-to-r items-center " + (colour2) + " bg-clip-text text-6xl font-extrabold text-transparent text-center select-auto transition-colors ease-out duration-500"}>
Dev.
</h1>
<span class={"absolute mx-auto py-4 flex border w-fit bg-gradient-to-r blur-3xl " + (colour3) + " bg-clip-text text-6xl box-content font-extrabold text-transparent text-center select-none transition-colors ease-out duration-500"}>
Build.
</span>
<h1
class={"relative top-0 w-fit h-auto py-4 justify-center flex bg-gradient-to-r items-center " + (colour3) + " bg-clip-text text-6xl font-extrabold text-transparent text-center select-auto transition-colors ease-out duration-500"}>
Build.
</h1>
</div>
)
I have tried using transition-colors ease-out duration-500
, but it doesn’t make the transition smooth. How can I achieve smooth colour transitions for my elements?