GSAP 中断的时间表

Question

我在我的代码中犯了一些基本错误，请查看我的codepen。您将在结果 title/subtitle 中看到空洞和最后两个关闭链接。但是我想要一些可见的 form/marketing 东西，我称之为 .js-main-boxies 和隐藏的 div 类 .js-cta-form1 和 .js-cta-form2。我的时间线默认暂停，所以问题是为什么我看到损坏的版本而不是正确的版本？ pen 没有 CSS 所以问题不可能出在这里。当您删除时间线 tlMeetingFormClose 和 tlOnlineFormClose 时，它可以工作，但当然关闭功能不会。

有趣的是，当您点击 "form 1 close" 时，点击 "click 1" 时您会看到点击 "form 1 close" 的可能性，但它不起作用。感谢您提供任何帮助或建议

mycodepen 有问题的时间表

tlMeetingFormClose and tlOnlineFormClose

Answer 1

这是您的代码的一个小问题。当您在时间轴中使用 fromTo 时， from 值将赋予您的元素。所以当你说：

tlMeetingFormClose
        .fromTo(ctaForm1, 0.8, { autoAlpha: 1, xPercent: '0' }, { autoAlpha: 0, xPercent: '-50', display: 'none', ease: Power2.easeOut })
        .set(mainBoxies, {display: 'block'})
        .fromTo(mainBoxies, 0.8, { autoAlpha: 0, xPercent: '-50' }, { autoAlpha: 1, xPercent: '0', ease: Power2.easeOut });

    tlOnlineFormClose
        .fromTo(ctaForm2, 0.8, { autoAlpha: 1, xPercent: '0' }, { autoAlpha: 0, xPercent: '-50', display: 'none', ease: Power2.easeOut })
        .set(mainBoxies, {display: 'block'})
        .fromTo(mainBoxies, 0.8, { autoAlpha: 0, xPercent: '-50' }, { autoAlpha: 1, xPercent: '0', ease: Power2.easeOut });

然后 greensock 将 autoAlpha 0 和 xpercent -50 应用于 mainBoxies。你只需要使用 To 然后给出你想要的最终位置，因为只有当 mainBoxes 已经关闭时，这个时间线才会运行。

当您编写以下内容时，一切都会正常。

    tlMeetingFormClose
        .fromTo(ctaForm1, 0.8, { autoAlpha: 1, xPercent: '0' }, { autoAlpha: 0, xPercent: '-50', display: 'none', ease: Power2.easeOut })
        .set(mainBoxies, {display: 'block'})
        .to(mainBoxies, 0.8, { autoAlpha: 1, xPercent: '0', ease: Power2.easeOut });

    tlOnlineFormClose
        .fromTo(ctaForm2, 0.8, { autoAlpha: 1, xPercent: '0' }, { autoAlpha: 0, xPercent: '-50', display: 'none', ease: Power2.easeOut })
        .set(mainBoxies, {display: 'block'})
        .to(mainBoxies, 0.8, { autoAlpha: 1, xPercent: '0', ease: Power2.easeOut });

希望最后的结果如您所愿。如果没有，请告诉我。

GSAP 中断的时间表

GSAP broken timelines

javascript

gsap