GSAP
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,})// LinetwoRef.current = gsap.to(lineRef.current, {height: wrapperRef.current.scrollHeight,ease: 'sine.inOut',scrollTrigger: {...scrollConfig,scrub: true,},})}return () => {// Cleanup scroll listenersScrollTrigger.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 exampleuseEffect(() => {return () => {ScrollTrigger.getAll().forEach((instance) => {instance.kill()})gsap.killTweensOf(window)}}, [])
ScrollTo
js
import gsap from 'gsap'import { ScrollToPlugin } from 'gsap/ScrollToPlugin'gsap.registerPlugin(ScrollToPlugin)