Gsap scrollTrigger pin not working

原因是写一个vue中的横向滚动用到了gsap的scrollTrigger

          gsap.to(".scrollbox_container", {
            x: () =>
              -(
                this.$refs.scrollbox_container.scrollWidth -
                window.innerWidth
              ) + "px",
            ease: "none",
            scrollTrigger: {
              trigger: ".scrollbox",
              pin: true,
              scrub: 1,
              end: () =>
                "+=" +
                this.$refs.scrollbox_container.scrollWidth,
            },
          }

因为设置了pin,这导致gsap会给你创建一个div。某些情况下，比如在移动端横向改竖直时，他创建的div的样式（padding,postion）会影响布局。.kill还无法去掉这个div。我还是个小白，顿时就没辙了。随后发现有一个老哥提的scrollTrigger pin 不工作 （BUG） - GSAP - GreenSock学到了gsap.context()
 

gsap.context() 是 GSAP 3.11.0 及更高版本引入的一个新特性，旨在简化和优化动画的创建和管理，尤其是在组件化框架（如 React、Vue 等）中。

主要功能

1. 作用域管理： gsap.context() 可以用于创建一个作用域，这样在这个作用域内创建的动画会被自动清理，避免内存泄漏和动画遗留问题。

2. 自动清理： 当作用域被销毁时，与之相关的动画会被自动停止和清理。

3. 简化代码： 通过使用 gsap.context()，你可以在创建和管理动画时减少代码的复杂性，尤其是在处理组件生命周期时

那么如何使用？

let ctx = gsap.context(() => {
 gsap.to(...);
 gsap.from(...);
 gsap.timeline().to(...).to(...);
 ...
});

// then later...
ctx.revert(); // BOOM! Every GSAP animation created in that function gets reverted!

 嗯，就这么简单。最后成功解决。