调整大小时补间的 TimelineLite 缓存值
TimelineLite caching values of tweens upon resize
我有一个网站，我在其中使用 TimelineLite 暂停并使用滚动条手动推进时间轴。
我在整个时间线中也有 5 个停顿，这样我就可以单击一个按钮并观看时间线中的一个 'scene'。
每个动画场景基本上都在顶部补间屏幕外，而下一个元素从底部补间到屏幕中。
一切正常。
但是，当我调整浏览器大小时，我注意到时间轴的补间动画仍然是旧值的动画。
我的时间线由 TweenLite.to(...) 个补间组成。例如，如果我的浏览器高度是 700 像素，并且我将场景 1 补间到视图之外，将场景 2 补间到视图中，当我调整大小并使用 timeline.reverse(); 时，我看到场景 2 补间回到 700像素。 （场景 2 绝对定位 translateY 设置为 100%）但是由于我的补间正在使用 y: '100%' 我希望它反转为 100% 而不是这个旧的预调整值700 像素。
奇怪的是，最初在 0,0 并补间到 0,-100% 的场景 1 仍然补间到一个百分比值，因此看起来还不错。
所以当我设置百分比值和场景 1 补间百分比值时，我发现场景 2 以像素为单位补间真的很奇怪。
发生了什么事以及如何防止此像素值缓存在我的补间中？
我已经尝试过 invalidate()、kill()、clear()，然后将时间轴设置为 null，然后在新时间轴上重新插入新补间，但不知何故那些补间值仍然存在。
我很茫然。任何帮助将不胜感激。
我认为您应该使用 yPercent 来为您的补间设置动画，而不是绝对像素值或简单地为 y 属性.
yPercent（和 xPercent）所做的是，无论屏幕大小如何，它们都会始终对齐您的元素，因此会根据您提供的值进行响应。
Here 是 GSAP 人自己做的一个例子从你的问题中能够理解，其实也很接近你自己的情况。
还有 video tutorial 作者 Petr Tichy 解释了使用 x 和 xPercent.
P.S。您可以分享您正在处理的这个网站，或者准备一个 fiddle 或代码笔来隔离问题吗？这将有助于我们提出准确的解决方案。
回答我自己的问题，因为不存在正确答案。 GSAP 将任何补间数据保存在实际的 DOM 元素上。尽管我将时间轴或补间设置为 null，但它没有任何效果，因为当我对同一元素进行补间时，它会检查 DOM 元素是否具有 GSAP 之前保存的变量。
为了解决这个问题，我必须手动重置 DOM 元素变量。
如果这对您来说是个问题，请检查元素上的 ._gsTransform 变量。您会看到一些 x、y 值，您可以手动将其设置为 0 或您需要设置的任何其他值。
我有一个网站，我在其中使用 TimelineLite 暂停并使用滚动条手动推进时间轴。
我在整个时间线中也有 5 个停顿，这样我就可以单击一个按钮并观看时间线中的一个 'scene'。
每个动画场景基本上都在顶部补间屏幕外，而下一个元素从底部补间到屏幕中。
一切正常。
但是，当我调整浏览器大小时，我注意到时间轴的补间动画仍然是旧值的动画。
我的时间线由 TweenLite.to(...) 个补间组成。例如，如果我的浏览器高度是 700 像素，并且我将场景 1 补间到视图之外，将场景 2 补间到视图中，当我调整大小并使用 timeline.reverse(); 时，我看到场景 2 补间回到 700像素。 （场景 2 绝对定位 translateY 设置为 100%）但是由于我的补间正在使用 y: '100%' 我希望它反转为 100% 而不是这个旧的预调整值700 像素。
奇怪的是，最初在 0,0 并补间到 0,-100% 的场景 1 仍然补间到一个百分比值，因此看起来还不错。
所以当我设置百分比值和场景 1 补间百分比值时，我发现场景 2 以像素为单位补间真的很奇怪。
发生了什么事以及如何防止此像素值缓存在我的补间中？
我已经尝试过 invalidate()、kill()、clear()，然后将时间轴设置为 null，然后在新时间轴上重新插入新补间，但不知何故那些补间值仍然存在。
我很茫然。任何帮助将不胜感激。
我认为您应该使用 yPercent 来为您的补间设置动画，而不是绝对像素值或简单地为 y 属性.
yPercent（和 xPercent）所做的是，无论屏幕大小如何，它们都会始终对齐您的元素，因此会根据您提供的值进行响应。
Here 是 GSAP 人自己做的一个例子从你的问题中能够理解，其实也很接近你自己的情况。
还有 video tutorial 作者 Petr Tichy 解释了使用 x 和 xPercent.
P.S。您可以分享您正在处理的这个网站，或者准备一个 fiddle 或代码笔来隔离问题吗？这将有助于我们提出准确的解决方案。
回答我自己的问题，因为不存在正确答案。 GSAP 将任何补间数据保存在实际的 DOM 元素上。尽管我将时间轴或补间设置为 null，但它没有任何效果，因为当我对同一元素进行补间时，它会检查 DOM 元素是否具有 GSAP 之前保存的变量。
为了解决这个问题，我必须手动重置 DOM 元素变量。
如果这对您来说是个问题，请检查元素上的 ._gsTransform 变量。您会看到一些 x、y 值，您可以手动将其设置为 0 或您需要设置的任何其他值。