Next.js Discord

Discord Forum

Animation creates ugly line when someone tabs out and tabs back

Unanswered
Asiatic Lion posted this in #help-forum
Open in Discord
Asiatic LionOP
I created a snowfall animation that uses keyframes to fall down the viewport then repeat an infinite amount of times. When the user tabs out before the animation has fully cycled once, this ugly line is what shows up as the "snow" when the user tabs back in. I suspect its because the keyframes only work when someone is tabbed in the page but the timeout function I use to create the "snow" keeps going.

How can I pause the creation of "snow" until the page is back in view?

1 Reply

Asiatic LionOP
    const [flakes, setFlakes] = useState<{ left: number }[]>([]);
    const maxFlakes = 80;

    useEffect(() => {
        const delayRandomizer = Math.random() * 200;

        if (!started) return;
        if (maxFlakes > flakes.length) {

            setTimeout(() => {
                setFlakes(prevFlakes => [
                    ...prevFlakes,
                    {
                        left: Math.random() * 100,
                    }
                ]);

            }, 500 + delayRandomizer);
        }
    });