LAB Neural Wander

				
					<script>
    document.addEventListener("DOMContentLoaded", () => {

    if (typeof gsap === "undefined" || typeof ScrollTrigger === "undefined") {
        console.warn("GSAP / ScrollTrigger not loaded");
        return;
    }

    gsap.registerPlugin(ScrollTrigger);

    const demo = document.querySelector(".lab-scroll-demo");

    if (!demo) return;

    const tl = gsap.timeline({
        scrollTrigger: {
            trigger: demo,
            start: "top 88%",
            end: "bottom 12%",
            scrub: 1.8
        }
    });

    /* DOTS */

    tl.to(demo.querySelector(".dot-1"), {
        x: 220,
        y: 130,
        scale: 2.1,
        opacity: .45,
        ease: "none"
    }, 0)

    .to(demo.querySelector(".dot-2"), {
        x: -170,
        y: -120,
        scale: .55,
        opacity: .9,
        ease: "none"
    }, 0)

    .to(demo.querySelector(".dot-3"), {
        x: -230,
        y: 155,
        scale: 1.7,
        opacity: .5,
        ease: "none"
    }, 0);

    /* CURVES */

    tl.to(demo.querySelector(".line-1"), {
        x: 135,
        y: 80,
        rotation: 28,
        scale: 1.18,
        opacity: .55,
        ease: "none"
    }, 0)

    .to(demo.querySelector(".line-2"), {
        x: -150,
        y: -90,
        rotation: -34,
        scale: 1.25,
        opacity: .48,
        ease: "none"
    }, 0);

    /* TEXT */

    const words = demo.querySelectorAll(
        ".lab-scroll-demo__text span"
    );

    tl.to(words[0], {
        x: -120,
        y: -10,
        scale: 1.04,
        ease: "none"
    }, 0)

    .to(words[1], {
        x: 95,
        y: 8,
        scale: .96,
        ease: "none"
    }, 0)

    .to(words[2], {
        x: -55,
        y: 18,
        scale: 1.02,
        ease: "none"
    }, 0);

});
</script>