Animation GSAP Tweenlite tweens不会缓解

我正在用GSAP制作一个动画横幅，基本的动画效果很好，但当添加更多的轻松语句（如bounce）时，这两个动画不会轻松，会完全停止工作

我用这段代码来制作所有东西的动画

 <script type="text/javascript" src="js/TweenLite.min.js"></script>
 <script type="text/javascript" src="js/CSSPlugin.min.js"></script>
    <script>
        window.onload = function(){
            var logo = document.getElementById("logo");

            TweenLite.to("#logo", 1, {left:"90px"});
            TweenLite.from("#container", 0.50, {left:"-400px",opacity:0,delay:1});
            TweenLite.from("#control", 1, {scale:0,opacity:0,delay:2});
            TweenLite.from("#cta", 0.15, {scale:0,opacity:0,delay:3.5,ease: Bounce.easeOut,});
        }
    </script>

window.onload=函数（）{
var logo=document.getElementById（“logo”）；
TweenLite.to（“#logo”，1，{左：“90px”}）；
TweenLite.from（“#container”，0.50，{左：“-400px”，不透明度：0，延迟：1}）；
TweenLite.from（“#control”，1，{scale:0，opacity:0，delay:2}）；
TweenLite.from（“#cta”，0.15，{比例：0，不透明度：0，延迟：3.5，易用性：Bounce.easeOut，}）；
}

我错过什么了吗？这让我非常沮丧。

我发现两个问题：

1） 在您的ease之后有一个额外的逗号：

//BAD:
TweenLite.from("#cta", 0.15, {scale:0,opacity:0,delay:3.5,ease: Bounce.easeOut,});

//GOOD: 
TweenLite.from("#cta", 0.15, {scale:0,opacity:0,delay:3.5,ease: Bounce.easeOut});

2） Bounce ease不在核心TweenLite文件中-您需要要么加载EasePack，要么只加载TweenMax（包括TweenLite、CSSPlugin、EasePack和其他一些东西）。如果你担心文件大小，这应该不是问题，因为TweenMax在每个主要的广告网络上都被列为白名单（这意味着它的文件大小是免费的），而且它可能是网络广告中缓存最广泛的文件

小提示：如果你还没有尝试过TimeLineSite或TimelineMax工具（也是GSAP的一部分），你会特别喜欢它们，尤其是在广告方面。它们会让你在工作时更轻松地管理时间和实验，并跳到动画的不同部分。您的代码也可以更简洁：

window.onload = function(){
    var tl = new TimelineLite();
    tl.to("#logo", 1, {left:90})
      .from("#container", 0.5, {left:-400, opacity:0})
      .from("#control", 1, {scale:0, opacity:0}, "+=0.5")
      .from("#cta", 0.15, {scale:0, opacity:0, ease: Bounce.easeOut}, "+=1.5");
}

现在，您可以调整任何单个动画的计时，更改将级联到其余动画。例如，如果需要将第一个tween延长0.5秒，则不必编辑后续tween的所有“延迟”值。另外，现在您有了一个TimeLineSite对象，可以暂停（）、搜索（）、反转（）、时间刻度（）或任何您想要的内容。它将为您打开全新的工作流程

您可能会感兴趣：

还请记住，论坛上有一个很棒的社区，专门帮助解决GSAP特定问题

快乐的吐温

我看到两个问题：

1） 在您的ease之后有一个额外的逗号：

//BAD:
TweenLite.from("#cta", 0.15, {scale:0,opacity:0,delay:3.5,ease: Bounce.easeOut,});

//GOOD: 
TweenLite.from("#cta", 0.15, {scale:0,opacity:0,delay:3.5,ease: Bounce.easeOut});

2） Bounce ease不在核心TweenLite文件中-您需要要么加载EasePack，要么只加载TweenMax（包括TweenLite、CSSPlugin、EasePack和其他一些东西）。如果你担心文件大小，这应该不是问题，因为TweenMax在每个主要的广告网络上都被列为白名单（这意味着它的文件大小是免费的），而且它可能是网络广告中缓存最广泛的文件

小提示：如果你还没有尝试过TimeLineSite或TimelineMax工具（也是GSAP的一部分），你会特别喜欢它们，尤其是在广告方面。它们会让你在工作时更轻松地管理时间和实验，并跳到动画的不同部分。您的代码也可以更简洁：

window.onload = function(){
    var tl = new TimelineLite();
    tl.to("#logo", 1, {left:90})
      .from("#container", 0.5, {left:-400, opacity:0})
      .from("#control", 1, {scale:0, opacity:0}, "+=0.5")
      .from("#cta", 0.15, {scale:0, opacity:0, ease: Bounce.easeOut}, "+=1.5");
}

现在，您可以调整任何单个动画的计时，更改将级联到其余动画。例如，如果需要将第一个tween延长0.5秒，则不必编辑后续tween的所有“延迟”值。另外，现在您有了一个TimeLineSite对象，可以暂停（）、搜索（）、反转（）、时间刻度（）或任何您想要的内容。它将为您打开全新的工作流程

您可能会感兴趣：

还请记住，论坛上有一个很棒的社区，专门帮助解决GSAP特定问题

---

快乐的吐温

非常有用！非常感谢。我会在有时间的时候尝试一下，我也会看看格林斯托克的网站。感谢您的积极回应，我立刻又对GSAP充满了热情！工作起来很有魅力！非常感谢！非常有用！非常感谢。我会在有时间的时候尝试一下，我也会看看格林斯托克的网站。感谢您的积极回应，我立刻又对GSAP充满了热情！工作起来很有魅力！非常感谢！