diff --git a/src/app/@modal/(.)assistant/page.tsx b/src/app/@modal/(.)assistant/page.tsx index 8c9d29d..c05d97c 100644 --- a/src/app/@modal/(.)assistant/page.tsx +++ b/src/app/@modal/(.)assistant/page.tsx @@ -2,6 +2,7 @@ import { Skeleton } from '~/components/ui/skeleton'; import ChatModal from './_components/ChatModal' import { trpc } from '~/app/_trpc/Client' +import { useTimeLine } from '~/app/_providers/GsapProvicer'; export default function AssistantModalPage() { const { data: session, error, isLoading } = trpc.chat.getSession.useQuery(); diff --git a/src/app/_providers/GsapProvicer.tsx b/src/app/_providers/GsapProvicer.tsx index 467c198..d2e35b6 100644 --- a/src/app/_providers/GsapProvicer.tsx +++ b/src/app/_providers/GsapProvicer.tsx @@ -2,20 +2,20 @@ import { useGSAP } from '@gsap/react' import gsap from 'gsap' import { SplitText } from 'gsap/SplitText' -import { ScrollTrigger } from 'gsap/all' -import { createContext, useCallback, useContext, useEffect, useLayoutEffect, useRef, type ReactNode } from 'react' +import { ScrollTrigger, GSDevTools } from 'gsap/all' +import { createContext, useCallback, useContext, useEffect, useRef, type ReactNode } from 'react' gsap.registerPlugin(useGSAP) gsap.registerPlugin(ScrollTrigger) gsap.registerPlugin(SplitText) +gsap.registerPlugin(GSDevTools) const GsapContext = createContext<{ addAnimation: ( animation: gsap.core.TimelineChild, - position: gsap.Position, - tlId?:string + position: gsap.Position ) => void, - resetTimeline: (tlId?:string) => void, - resumeTimeline: (tlId?:string) => void, + resetTimeline: () => void, + resumeTimeline: () => void, getScroller: () => Element | Window | null } | null>(null) @@ -23,31 +23,29 @@ export function useGsapContext() { return useContext(GsapContext) } -export const useTimeLine = (dep?:any,all?:boolean,tlId?:string,) => { - console.log(tlId) +export const useTimeLine = (dep:any,all?:boolean) => { const gsapContext = useGsapContext() useEffect(() => { if (dep instanceof Array && all) { let acc = true; let allDepsSatisfied = dep.reduce((p,c) => c !== undefined && p ,acc ) if (allDepsSatisfied) { - gsapContext?.resumeTimeline(tlId) + gsapContext?.resumeTimeline() } } else { if (dep) { - gsapContext?.resumeTimeline(tlId) + gsapContext?.resumeTimeline() } } },[dep]) - useLayoutEffect(() => { + useEffect(() => { return () => { - gsapContext?.resetTimeline(tlId) + gsapContext?.resetTimeline() } },[]) } -export default function GsapProvider({ children,timelines }: { children: ReactNode,timelines?:string[] }) { - const timeLines = useRef|null>(null) +export default function GsapProvider({ children }: { children: ReactNode }) { const tl = useRef(null) const scrollerRef = useRef(null) const getScroller = useCallback(() => { @@ -73,53 +71,28 @@ export default function GsapProvider({ children,timelines }: { children: ReactNo return scrollerRef.current }, []) useGSAP(() => { - if (!timeLines.current && timelines) { - timeLines.current = new Map() - } - timelines?.forEach((tlId) => { - timeLines.current?.set(tlId,gsap.timeline({id:tlId,paused:true})) - }) if (!tl.current) { - tl.current = gsap.timeline({ paused: true }) + tl.current = gsap.timeline({ paused: true, id:'mainTimeline', onComplete: ()=>{ + console.log('timeline revert') + gsap.getById('mainTimeline')?.revert() + } }) } return () => { console.log("gsap cleanup") } }) - const addAnimation = useCallback((animation: gsap.core.TimelineChild, position: gsap.Position,tlId?:string) => { - if(tlId) { - const selectedTimeLine = timeLines.current?.get(tlId) - console.log("add animation to:", position, selectedTimeLine !== undefined) - selectedTimeLine?.add(animation,position) - return; - } + const addAnimation = useCallback((animation: gsap.core.TimelineChild, position: gsap.Position) => { console.log("add animation to:", position, tl.current !== undefined) tl.current?.add(animation, position); },[]) - const resetTimeline = useCallback((tlId?:string) => { - console.log("resetting timeline",tlId) - if (tlId) { - let selectedTimeLine = timeLines.current?.get(tlId) - selectedTimeLine?.kill() - selectedTimeLine?.revert() - timeLines.current?.set(tlId,gsap.timeline({id:tlId,paused:true})) - } else { - tl.current?.kill() - tl.current?.revert() - tl.current = gsap.timeline({paused:true}) - } - ScrollTrigger.getAll().forEach(st => { - st.kill() - }) + const resetTimeline = useCallback(() => { + tl.current?.kill() + tl.current?.revert() + ScrollTrigger.getAll().forEach(st => st.kill()) + tl.current = gsap.timeline({paused:true}) },[]) - const resumeTimeline = useCallback((tlId?:string) => { - if (tlId) { - console.log("trying to resume timeline",tlId) - let selectedTimeLine = timeLines.current?.get(tlId) - selectedTimeLine?.resume() - } else { - console.log("resuming default timeline") - tl.current?.resume() - } + const resumeTimeline = useCallback(() => { + console.log("resuming timeline:",tl.current) + tl.current?.resume() },[]) return ( diff --git a/src/app/layout.tsx b/src/app/layout.tsx index a71e990..c642dc7 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -38,7 +38,7 @@ export default async function RootLayout({ return ( - +