GSAP 使用技巧

GreenSock 动画平台（GSAP） 是一款高性能的动画库，可以对 JavaScript 可以操作的所有内容进行动画处理，包括 DOM、SVG、Canvas、CSS、JS 对象等

添加平滑滚动

在使用 GSAP 进行动画开发时，有时候需要添加平滑滚动保证动画的流畅性，而官方提供的 ScrollSmoother 插件需要付费，这里提供一种免费平替方案 —— lenis | GitHub

安装 lenis

npm install lenis
# OR
pnpm add lenis

使用 lenis 实现平滑滚动

import Lenis from '@studio-freight/lenis'
import { gsap } from 'gsap'
import { ScrollTrigger } from 'gsap/ScrollTrigger'

const lenis = new Lenis()

lenis.on('scroll', ScrollTrigger.update)

gsap.ticker.add((time) => {
  lenis.raf(time * 1000)
})

gsap.ticker.lagSmoothing(0)