使用 GSAP 将文本与父 div 分开进行动画处理

Question

我正在尝试为父div设置动画(按预期工作(，但同时对H1进行动画处理以相反的方式进行动画处理，以便它们在动画运行时"相遇"。

.HTML：

<div class="slide--in-left">
<h1 class="slide--in-right">TEXT IN FROM RIGHT</h1>
</div>

JS/GSAP：

function slideLeft() {
TweenMax.set($('.slide--in-left'), {opacity: 0, x: 100});
TweenMax.staggerTo('.slide--in-left', 1.5, {
opacity: 1,
x: 0,
ease: Back.easeOut.config(1.7)
});
}
slideLeft();
function slideRight() {
TweenMax.set($('.slide--in-right'), {opacity: 0, x: -100});
TweenMax.staggerTo('.slide--in-right', 1.5, {
opacity: 1,
x: 0,
ease: Power0.easeNone
});
}
slideRight();

Answer 1

这里的问题不在于你的动画，而在于你的逻辑。

子标头可能相对于容器/背景定位。因此，您必须将其移动到背景的两倍以弥补差异。但是，您还必须匹配背景动画的缓动。

最容易的解决方案可能是不要将文本放置在容器内。为此，请根据需要调整背景大小，绝对定位文本，然后执行要执行的动画。

旁注：

• 这里没有理由使用jQuery选择器。您只需传递一个字符串(例如最后一个补间(，GSAP 将自动在其上使用.querySelectorAll()。
• 如果你只有其中之一，就没有理由staggerTo，一个to就足够了。如果你有多个，你应该添加一个交错值(如stagger: 0.15或其他东西(。
• 最有可能的是使用时间轴，因为您的动画是配对的。这将允许您反转它，更改速度，或者如果您以后想进行其他类似的操作。