Untitled

import * as React from "react"
import gsap from "gsap"
import { ScrollTrigger } from "gsap/ScrollTrigger"
import { Override } from "framer"
import SplitType from "split-type"

gsap.registerPlugin(ScrollTrigger)

export function workexperience(): Override {
    const containerRef = React.useRef(null)

    React.useEffect(() => {
        const containerElement = containerRef.current
        if (!containerElement) return

        const childrenElement = containerElement.children[0] // Assuming only one child for simplicity
        if (!childrenElement) return

        const containerHeight = containerElement.offsetHeight
        const childrenHeight = childrenElement.offsetHeight

        gsap.fromTo(
            childrenElement,
            {
                y: 0, // Starting position on Y-axis
            },
            {
                y: containerHeight - childrenHeight, // Destination position on Y-axis
                ease: "linear", // Easing function
                scrollTrigger: {
                    trigger: containerElement,
                    start: "top center-=40%", // Adjust start position as needed
                    end: `+=${containerHeight}`, // Use `+=` to dynamically add the container height
                    scrub: 1, // Adjust scrubbing intensity
                },
            }
        )
    }, [])

    return {
        ref: containerRef,
    }
}
export function dots(): Override {
    const containerRef = React.useRef(null)

    React.useEffect(() => {
        const containerElement = containerRef.current
        if (!containerElement) return

        const childrenElement = containerElement.children[0] // Assuming only one child for simplicity
        if (!childrenElement) return

        const containerHeight = containerElement.offsetHeight
        const childrenHeight = childrenElement.offsetHeight

        gsap.fromTo(
            childrenElement,
            {
                y: 0, // Starting position on Y-axis
            },
            {
                y: containerHeight - childrenHeight, // Destination position on Y-axis
                ease: "linear", // Easing function
                scrollTrigger: {
                    trigger: containerElement,
                    start: "top top+=25%", // Adjust start position as needed
                    end: `+=${containerHeight}`, // Use `+=` to dynamically add the container height
                    scrub: 1, // Adjust scrubbing intensity
                },
            }
        )
    }, [])

    return {
        ref: containerRef,
    }
}
export function WorkDivider(): Override {
    const ref = React.useRef(null)

    React.useEffect(() => {
        const dividerElements = document.querySelectorAll(
            ".workdivider1, .workdivider2, .workdivider3, .workdivider4, .workdivider5"
        )

        if (!dividerElements.length) return

        const containerElement =
            dividerElements[0]?.parentNode?.parentNode?.parentNode
        const containerHeight = containerElement.offsetHeight

        if (!containerElement) return

        gsap.set(dividerElements, {
            scaleX: 0,
            transformOrigin: "left",
        })

        const dividers = gsap.timeline({
            scrollTrigger: {
                trigger: containerElement,
                start: "top center",
                end: "bottom top+=35%",
                scrub: 2,
            },
        })

        dividers.to(dividerElements, {
            scaleX: 1,
            ease: "linear",
            stagger: 0.07,
        })

        const companyElements = document.querySelectorAll(
            ".company1, .company2, .company3, .company4, .company5"
        )

        companyElements.forEach((companyElement, index) => {
            const childrenElements = companyElement.children

            gsap.set(childrenElements, {
                y: 40,
                transformOrigin: "left",
            })

            const companyTimeline = gsap.timeline({
                scrollTrigger: {
                    trigger: companyElement,
                    start: "top center",
                    end: "bottom top+=35%",
                    scrub: 2,
                },
            })

            companyTimeline.to(childrenElements, {
                y: 0,
                ease: "expo.out",
                stagger: 0.3,
            })
        })
    }, []) // Ensure the dependency array is correct

    return {
        ref: ref,
    }
}
export function TextAbout(): Override {
    const textRef = React.useRef(null)

    React.useEffect(() => {
        const textElement = textRef.current
        if (!textElement) return

        const paragraphs = textElement.querySelectorAll("h1")

        const splitText = new SplitType(paragraphs, {
            types: "lines",
        })

        const nonEmptyLines = Array.from(splitText.lines).filter(
            (line) => line.textContent.trim() !== ""
        )

        // Individual Line Animation
        gsap.to(nonEmptyLines, {
            backgroundPosition: "-100% 0%",
            duration: 1,
            stagger: 0.8,
            ease: "linear",
            scrollTrigger: {
                trigger: textElement,
                scrub: 2,
                start: "top bottom-=20%",
                end: "bottom top+=30%",
                markers: false, // Set markers to true for visualization
            },
        })

        nonEmptyLines.forEach((line) => {
            line.style.background =
                "linear-gradient(to left, rgb(255, 255, 255) 50%, rgb(37, 37, 37) 50%)"
            line.style.backgroundSize = "200% 100%"
            line.style.color = "transparent"
            line.style.backgroundClip = "text"
            line.style.webkitBackgroundClip = "text"
            line.style.display = "inline-block"
            line.style.whiteSpace = "pre-wrap"
        })
    }, [])

    return {
        ref: textRef,
    }
}