After successfully creating this animation using CSS animations and React, I encountered a flickering issue. The cause of this problem is unclear to me, it could be due to my usage of setInterval or potential issues with the keyframes in my CSS animations. Any help in resolving this flickering problem would be greatly appreciated. The flicker only seems to occur after some time, as the animation functions perfectly without any issues upon refreshing the page.
Here is how the animation appears after a page refresh, which is the desired outcome (please ignore the screen recorder watermark).
Desired animation
However, after some time, the animation starts flickering like this:
Flickering problem
Below are the code snippets I have written:
JSX snippet:
<div className="relative w-[280px] md:w-[350px] lg:w-[500px]">
<span>{"[ "}</span>
<p className="text_animate ml-2">
{dev ? "for" : "by"} Developers
</p>
<span className="absolute right-0 ">{" ]"}</span>
</div>
CSS snippet:
.text_animate {
color: orange;
margin: 0 auto;
display: inline-block;
position: relative;
letter-spacing: .15em;
text-align: start;
animation: text-up 6s linear infinite;
cursor: none;
}
@keyframes text-up {
0% {
top:45px;
opacity: 0;
}
20% {
top:0;
opacity: 1;
}
35% {
top: 0;
opacity: 1;
}
50% {
top: -45px;
opacity: 0;
}
52% {
top: 45px;
opacity: 0;
}
70% {
top: 0;
opacity: 1;
}
85% {
top: 0;
opacity: 1;
}
100% {
top: -45px;
opacity: 0;
}
}
useState changing text:
const [dev, setDev] = useState(true);
setInterval(() => {
setDev(!dev);
}, 3000);
If there is a better approach to achieving this animation without the flickering issue, I am eager to learn. Please feel free to share any suggestions or solutions.