TimelineLite缓存调整后的补间值

Question

我有一个网站，我使用TimelineLite已暂停，并用滚动条手动推进时间轴。

我还在整个时间线上散布了5次停顿，以便我可以单击按钮并观看时间线的一个“场景”。

每个动画场景基本上都在屏幕顶部补间，而下一个元素从底部补间到屏幕。

一切工作正常。

但是，当我调整浏览器的大小时，我注意到时间轴的补间仍旧从旧值开始动画。我的时间轴由TweenLite.to(...)补间组成。例如，如果我的浏览器高度为700像素，并且我将场景1的视图和场景2调入视图，当调整大小并使用timeline.reverse();时，我会看到场景2补间回到700像素。 （场景2是绝对定位与translateY设置为100%）但是，因为我的补间使用y: '100%'我期望它会反转到100%而不是这个旧的预调整值700像素。

奇怪的是，场景1原本是0,0，补间为0,-100%，仍然补间到一个百分比值，以便看起来很好。

所以我觉得很奇怪，场景2补间像素，当我设置百分比值和场景1补间百分比。

怎么回事，我该如何防止缓存中的像素值在我的补间？

我已经尝试过invalidate()，kill()，clear()然后时间轴设定为null，然后在一个新的时间线重新插入新的补间，但不知何故这些吐温值仍然存在。

我不知所措。任何帮助将不胜感激。

Answer 1

回答我自己的问题，因为没有正确的答案。 GSAP将任何补间数据保存在实际的DOM元素上。尽管我将时间轴或补间设置为null，但它没有效果，因为当我补间相同的元素时，它会检查DOM元素是否具有GSAP之前保存的变量。

要解决这个问题，我不得不手动重置DOM元素变量。

如果这对您是个问题，请检查元素上的._gsTransform变量。你会看到一些你可以手动设置为0的x，y值，或者你需要设置的任何其他值。

Answer 2

我想你应该使用什么是yPercent为动画补间动画的，而不是绝对的像素值或而不是简单的动画属性y。

yPercent（和xPercent）所做的一点是，无论屏幕大小如何，它们都会始终对齐您的元素，因此可以根据您提供的值进行响应。

Here是由GSAP球员本身，其通过它的外观和我能够从你的问题理解，其实是非常接近自己的情况，以及做出了表率。

还有一个video tutorial通过切赫蒂奇谁介绍如何使用x和xPercent之间的差异。

P.S.你可以分享你正在研究的这个网站，或者准备一个小提琴或一个代码来隔离这个问题吗？这将有助于我们提出准确的解决方案。