/

GSAP

https://greensock.com/docs/v3/GSAP
animationreactjavascript
On this page
  • GSAP
  • Eases
  • ScrollTrigger
  • ScrollTo
  • Useful links:

GSAP

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

Eases

greensock.com/docs/v...3/Eases

ScrollTrigger

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

With React

tsx
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

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

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

ScrollTo

js
import gsap from 'gsap'
import { ScrollToPlugin } from 'gsap/ScrollToPlugin'
gsap.registerPlugin(ScrollToPlugin)
Edit this page
Want to make your own site like this?
Try gatsby-theme-code-notes by Zander Martineau.
Notes on code. My second brain, by Zander Martineau.