Added a restart function to the Observer object, useful when using react-router in a react app

[freakinu]

Hi, I was having an issue when using intersect-once, I've been using this plugin in combination with tailwindcss-motion in order to play animation only once on scroll in my react app.

the issue

When switching between routes on the frontend using react-router below elements animations will be played too early as if the user scrolled on them which resulted in animation not playing properly for the user since it was "already intersected" which shouldn't happen, in reality the user didn't scroll on those elements, it's supposed to reset since it's a new route.

the fix

I thought why not implementing a tiny restart function that will be triggered on each route change, it removes existing observers before attaching a new one, simple yet was an effective solution to my issue when routing in my react app, and I felt sharing this might be useful for other people that are facing the same issue.

import { Observer } from "tailwindcss-intersect";
import { useEffect } from "react";
import { useLocation } from "react-router";

export default function ObserverProvider({ children }: { children: React.ReactNode }) {
    const { pathname } = useLocation();

    useEffect(() => {
        Observer.restart();
    }, [pathname]);

    return <>{children}</>;
}