GSAP

import gsap from 'gsap'
import { ScrollTrigger } from 'gsap/ScrollTrigger'
gsap.registerPlugin(ScrollTrigger)

const wrapperRef = useRef<HTMLDivElement>(null)
const oneRef = useRef<HTMLDivElement>(null)
const twoRef = useRef<HTMLDivElement>(null)

useEffect(() => {
  if (!oneRef.current && !twoRef.current) {
    const scrollConfig = {
      trigger: wrapperRef.current,
      start: 'top center',
      end: 'bottom center',
    }

    oneRef.current = ScrollTrigger.create({
      ...scrollConfig,
      onEnter: (self) => {
        // self.isActive
      },
      onLeaveBack: (self) => {
        // self.isActive
      },
      invalidateOnRefresh: false,
    })

    // Line
    twoRef.current = gsap.to(lineRef.current, {
      height: wrapperRef.current.scrollHeight,
      ease: 'sine.inOut',
      scrollTrigger: {
        ...scrollConfig,
        scrub: true,
      },
    })
  }
  return () => {
    // Cleanup scroll listeners
    ScrollTrigger.getAll().forEach((instance) => {
      instance.kill()
    })
    gsap.killTweensOf(window)
  }
}, [])

// Very simple example
useEffect(() => {
  return () => {
    ScrollTrigger.getAll().forEach((instance) => {
      instance.kill()
    })
    gsap.killTweensOf(window)
  }
}, [])

import gsap from 'gsap'
import { ScrollToPlugin } from 'gsap/ScrollToPlugin'
gsap.registerPlugin(ScrollToPlugin)