使用 GSAP 将动画文本与父 div 分开

Question

我正在尝试为父级设置动画 div（按预期工作），但同时为 H1 设置动画以相反的方式设置动画，以便在动画完成后 "meet" 运行.

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

这里的问题与其说是你的动画，不如说是你的逻辑。

child header 可能相对于 container/background 定位。所以你必须将它移动到背景的两倍以弥补差异。但是，您还必须匹配背景动画的缓动。

很可能更简单的解决方案是不将文本放置在容器内。为此，请根据需要调整背景大小，绝对定位文本，然后制作您想要的动画。

旁注：

没有理由在这里使用 jQuery 选择器。你可以只传递一个字符串（就像你最后一个 Tween），GSAP 会自动在上面使用 .querySelectorAll()。
如果您只有其中之一，则没有理由 staggerTo，to 就足够了。如果你确实有多个，你应该添加一个交错值（比如 stagger: 0.15 之类的）。
很可能最好使用时间轴，因为您的动画是配对的。这将允许你反转它，改变速度，或者如果你以后想做其他类似的操作。

使用 GSAP 将动画文本与父 div 分开

Animate text seperate from parent div with GSAP

html

jquery

scrollmagic

gsap