Trigger on load - feature request

[oom-]

I think you could have a banger here and replace all uses for SAL or AOS library by allowing the animation to start on first load as well.

Edit: You can actually do it by adding the no-intersect attribute to your div.

 class="-translate-x-20 opacity-0 intersect:translate-x-0 intersect:opacity-100 transition" no-intersect>something </div>

Maybe it would have been more clear the other way around, intersect doing nothing until the attribute 'intersect' is detected ?

And if you could handle @apply as well and/or proposing presets like "fade-left" "fade-up" etc...

.scroll-fade-left {
    @apply -translate-x-20 opacity-0 intersect:translate-x-0 intersect:opacity-100 transition-all;
}

This could be a next standard really useful plugin. 👍🏻

[heidkaemper]

It was actually a very conscious decision not to trigger elements that are immediately visible. In some scenarios, unwanted flickering could otherwise occur because CSS is often loaded and rendered before JavaScript.

But I find the idea of making this possible quite interesting! Maybe with something like a "force" modifier?!

[oom-]

CSS is often loaded and rendered before JavaScript

Exactly, this is why I'm setting up the no-intersect attribute per default in all my divs (that's a bit ugly, you can see it in my original post) to apply the CSS first (hiding it).
Then I edited few lines of your observer for my own use case to trigger the animation only once, this way:

plugins > tailwindIntersectManual.ts

const Observer = {
    observers: [] as IntersectionObserver[],

    start() {
        if (document.readyState === "loading") {
            document.addEventListener("DOMContentLoaded", () => this.observe());
            return;
        }
        this.observe();
    },

    observe() {
        const selectors = [
            '[class*=" intersect:"]',
            '[class*=":intersect:"]',
            '[class^="intersect:"]',
            '[class="intersect"]',
            '[class*=" intersect "]',
            '[class^="intersect "]',
            '[class$=" intersect"]'
        ];

        document.querySelectorAll(selectors.join(",")).forEach((element) => {
            const observer = new IntersectionObserver(
                (entries) => {
                    entries.forEach((entry) => {
                        if (!entry.isIntersecting) {
                            element.setAttribute("no-intersect", "");
                            return;
                        }
                        element.removeAttribute("no-intersect");
                        // element.classList.contains("intersect-once") && observer.disconnect();
                        observer.disconnect(); //Only once anime
                    });
                },
                { threshold: this.getThreshold(element) }
            );
            this.observers.push(observer);
            observer.observe(element);
        });
    },

    log() {
        const selectors = [
            '[class*=" intersect:"]',
            '[class*=":intersect:"]',
            '[class^="intersect:"]',
            '[class="intersect"]',
            '[class*=" intersect "]',
            '[class^="intersect "]',
            '[class$=" intersect"]'
        ];
        console.log("👀 Start observation of : " + document.querySelectorAll(selectors.join(",")).length + " divs !");
    },

    getThreshold(element: Element) {
        if (element.classList.contains("intersect-full")) return 0.99;
        if (element.classList.contains("intersect-half")) return 0.5;
        return 0;
    },

    stop() {
        for (const observer of this.observers) {
            observer.disconnect();
        }
    }
};

export default defineNuxtPlugin((nuxtApp) => {
    if (import.meta.client) {
        nuxtApp.hook("app:created", () => {
            const router = useRouter();

            Observer.start();

            router.afterEach((to, from) => {
                nextTick(() => {
                    Observer.start();
                });
            });

            router.beforeEach((to, from) => {
                Observer.stop();
            });
        });
    }
});