I recently used styled-components npm to use in my Remix application.
The animations works fine, but after the third refresh it stops.
I've deployed it on Netlify aswell, but the animation just doens't start there.
This is the code I use
import skills from '../js/skills.jsx';
import styled, { keyframes } from 'styled-components';
export default function Test(){
skills.forEach((skill: any, index) => {
const moveLeftFirst = keyframes`
0% {
left: 110%;
}
100% {
left: -10%;
}`;
const IconDiv = styled.div`
animation: ${moveLeftFirst} 8s infinite linear;
animation-delay: ${index * 0.8}s;
`;
iconDivs.push(IconDiv);
});
{iconDivs.map((IconDiv, index) => (
<IconDiv id="skillIcon"
data-tip
data-for={skills[index].title}
className="skillIcon mx-3 justify-center absolute hover:text-white ease-in transition
duration-300 left-[110%]"
onMouseOver={() => stopAnimation(true)}
onMouseOut={() => stopAnimation(false)}>
{createElement(skills[index].icon.type, { className: 'w-20 h-20' })}
</IconDiv>
))}
}
If you need more info, I'll be happy to give it to you, since I can't exactly explain it in a thread.
You should never define styled components inside another component, always define them at the top level, same when defining animations, see https://styled-components.com/docs/faqs#why-should-i-avoid-declaring-styled-components-in-the-render-method.
So you can move moveLeftFirst at the top level, and move IconDiv at the top level as well, turning index into a transient prop $index.