Merge pull request #95 from Eldemarkki/fix-textloop-flashing

Fix TextLoop flashing when cycling
Testausserveri · Apr 14, 2023 · a7e205f · a7e205f · vercel · Apr 14, 2023
2 parents a8251cc + 486ee33
commit a7e205f
Showing 1 changed file with 2 additions and 2 deletions.
diff --git a/components/TextLoop/TextLoop.tsx b/components/TextLoop/TextLoop.tsx
@@ -24,7 +24,7 @@ const TextLoopElement = styled.span<{
   stayTimeRatio: number;
   duration: number;
 }>`
-  animation: ${props => TextLoopAnimation(props.stayTimeRatio)} ${(props) => props.duration}s ease-in-out;
+  animation: ${props => TextLoopAnimation(props.stayTimeRatio)} ${(props) => props.duration}s ease-in-out infinite;
 `
 
 type TextLoopProps = PropsWithChildren<{
@@ -42,7 +42,7 @@ export const TextLoop = ({ children, duration = 3, stayTimeRatio = 95 }: TextLoo
     key={index}
     duration={duration}
     stayTimeRatio={stayTimeRatio}
-    onAnimationEnd={incrementIndex}
+    onAnimationIteration={incrementIndex}
   >
     {childrenArray[index]}
   </TextLoopElement>;