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

问题描述

• 使用gsap插件的ScrollTrigger插件时 ，有以下2种情况之一要进行垃圾回收处理，若不做处理会导致页面超级卡顿。
  1. 在动画运行完毕，不再使用动画时
  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 )//清除完成