GSAP | Zander's Code Notes

👋 FYI, this note is over 6 months old. Some of the content may be out of date.

On this page

GSAP Jump to heading

Docs: https://greensock.com/docs/v3/GSAP
Cheatsheet: https://greensock.com/cheatsheet/

Eases Jump to heading

ScrollTrigger Jump to heading

Docs: https://greensock.com/docs/v3/Plugins/ScrollTrigger
Demos: https://greensock.com/st-demos/

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

With React Jump to heading

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)
  }
}, [])

Cleanup scroll listeners Jump to heading

Make sure you cleanup your scroll trigger listeners when your component unmounts.

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

ScrollTo Jump to heading

Docs: https://greensock.com/docs/v3/Plugins/ScrollToPlugin
Demos: https://greensock.com/st-demos/

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

Useful links: Jump to heading

← Back home