Skip to content

Commit 5af3bd5

Browse files
fix animationRef
1 parent d4ab64e commit 5af3bd5

File tree

2 files changed

+15
-7
lines changed

2 files changed

+15
-7
lines changed

src/ts-default/Components/PixelCard/PixelCard.tsx

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -182,7 +182,7 @@ export default function PixelCard({
182182
const containerRef = useRef<HTMLDivElement>(null);
183183
const canvasRef = useRef<HTMLCanvasElement>(null);
184184
const pixelsRef = useRef<Pixel[]>([]);
185-
const animationRef = useRef<any>(null);
185+
const animationRef = useRef<ReturnType<typeof requestAnimationFrame> | null>(null);
186186
const timePreviousRef = useRef(performance.now());
187187
const reducedMotion = useRef(
188188
window.matchMedia("(prefers-reduced-motion: reduce)").matches
@@ -264,7 +264,9 @@ export default function PixelCard({
264264
};
265265

266266
const handleAnimation = (name: keyof Pixel) => {
267-
cancelAnimationFrame(animationRef.current);
267+
if (animationRef.current !== null) {
268+
cancelAnimationFrame(animationRef.current);
269+
}
268270
animationRef.current = requestAnimationFrame(() => doAnimate(name));
269271
};
270272

@@ -289,8 +291,10 @@ export default function PixelCard({
289291
}
290292
return () => {
291293
observer.disconnect();
292-
cancelAnimationFrame(animationRef.current);
293-
};
294+
if (animationRef.current !== null) {
295+
cancelAnimationFrame(animationRef.current);
296+
}
297+
};
294298
// eslint-disable-next-line react-hooks/exhaustive-deps
295299
}, [finalGap, finalSpeed, finalColors, finalNoFocus]);
296300

src/ts-tailwind/Components/PixelCard/PixelCard.tsx

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -181,7 +181,7 @@ export default function PixelCard({
181181
const containerRef = useRef<HTMLDivElement>(null);
182182
const canvasRef = useRef<HTMLCanvasElement>(null);
183183
const pixelsRef = useRef<Pixel[]>([]);
184-
const animationRef = useRef<any>(null);
184+
const animationRef = useRef<ReturnType<typeof requestAnimationFrame> | null>(null);
185185
const timePreviousRef = useRef(performance.now());
186186
const reducedMotion = useRef(
187187
window.matchMedia("(prefers-reduced-motion: reduce)").matches
@@ -263,7 +263,9 @@ export default function PixelCard({
263263
};
264264

265265
const handleAnimation = (name: keyof Pixel) => {
266-
cancelAnimationFrame(animationRef.current);
266+
if (animationRef.current !== null) {
267+
cancelAnimationFrame(animationRef.current);
268+
}
267269
animationRef.current = requestAnimationFrame(() => doAnimate(name));
268270
};
269271

@@ -288,7 +290,9 @@ export default function PixelCard({
288290
}
289291
return () => {
290292
observer.disconnect();
291-
cancelAnimationFrame(animationRef.current);
293+
if (animationRef.current !== null) {
294+
cancelAnimationFrame(animationRef.current);
295+
}
292296
};
293297
// eslint-disable-next-line react-hooks/exhaustive-deps
294298
}, [finalGap, finalSpeed, finalColors, finalNoFocus]);

0 commit comments

Comments
 (0)