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

问题描述

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

例子

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

import{ gsap }from"gsap";import{ ScrollTrigger }from"gsap/ScrollTrigger";
gsap.registerPlugin(ScrollTrigger);//创建idconst id =newDate().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
 */constfindDatchsOrdisDatchs=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 )//清除完成