[Use one timeline with multiple components in react]

I just started learning react.js with gsap and stuck at this point

 

useEffect(() => {

	const cx = gsap.context(() => {
		const tl = gsap.timeline({
                scrollTrigger: {
                    trigger: '.home',
                    start: 'top top',
                    end: "+=" + window.innerHeight * 3,
                    pin: true,
                    scrub: 1
                }
            })
            }, main_ref)
        
        return ()=>{
          cx.revert()
        }
})

 

my question is that, How can I declare this timeline globally because I want to use this timeline in multiple components or there is any other way to perform the same thing.

And yeah, this timeline is declared in the App.jsx file which is the main file of my project. 

 

Thanks in advance.

 

 

[Animated hover Effect]

Thanks sir,

[Animated hover Effect]

I saw this site on awwwards: https://yuga.com/

It has hover effect that animate. Is this being done with Greensock? What program makes these hover effect objects? Any help is appreciated.