【GSAP】ScrollTrigger插件的注意事项 | 用的好，非常流畅。用的不好，卡到爆炸的前端动画库

问题描述

使用gsap插件的ScrollTrigger插件时 ，有以下2种情况之一要进行垃圾回收处理，若不做处理会导致页面超级卡顿。 在动画运行完毕，不再使用动画时元素被删除时

例子

给当前动画一个id，是因为后期不用此动画时，通过此id找到相应实例，清除处理。

import { gsap } from "gsap";import { ScrollTrigger } from "gsap/ScrollTrigger";gsap.registerPlugin(ScrollTrigger);//创建id const id = new Date().getTime().toString() //设置动画初始状态 gsap.set('.box', { opacity: 0, x: "-20%" }) // 给class为box的元素添加动画ScrollTrigger.batch('.box', {     onEnter: batch => gsap.to(batch, {        opacity: 1,        x: 0,    }),    id});  /** * 删除、查找动画实例 * @param t type:String|Array  传入的数据  |  *  - Array-删除实例 *  - String-查询实例 *  * @returns undefined | Array */const findDatchsOrdisDatchs = t => Array.isArray(t) ? batchs.forEach(it => it.kill()) : ScrollTrigger.getAll().filter(it => it.vars.id === id)// 当我不再使用动画时，清除动画相关实例处理// 1、根据id查询动画实例const batchs = findDatchsOrdisDatchs(id) // 2. 找到实例就删除处理if(batchs.length)findDatchsOrdisDatchs(batchs )//清除完成