html - TweenMax animation is not working for multiple pages with common java script file

Question

For Instance,

Home page

<div id="box1">Box 1</div>
<div id="box2">Box 2</div>
<div id="box3">Box 3</div>

inner page

<!--<div id="box1">Box 1</div> -->
<div id="box2">Box 2</div>
<div id="box3">Box 3</div>

JS: (Common Javascript for home page and inner page.)

new TimelineMax({repeat:0}).to($('#box1'), 0.3, {css:{top:0, alpha:1,rotation:360}})
new TimelineMax({repeat:0}).to($('#box2'), 0.3, {css:{top:0, alpha:1,rotation:360}})
new TimelineMax({repeat:0}).to($('#box3'), 0.3, {css:{top:0, alpha:1,rotation:360}})

In Home page above code works fine..But for inner pages.. If i delete/comment #box1 the other #box2 and #box3 animation is not working. How can I ignore #box1 animation and continue with another animations.

Answer 1

我似乎无法重现该问题。您使用的是最新版本的 GreenSock 文件吗？你能发布一个演示问题的codepen或jsfiddle吗？

此外，您可以大大简化您的代码：

TweenLite.to("#box1, #box2, #box3", 0.3, {top:0, alpha:1, rotation:360});

您的代码没有“错误”-只是冗长。而且，如果您不进行排序，则实际上不需要使用 TimelineMax（尽管如果您更喜欢该工作流程，那完全可以）。但是，如果您打算对这些动画进行排序，您可以使用 TimelineMax 的 staggerTo() 方法轻松完成，如下所示：

new TimelineMax().staggerTo(["#box1", "#box2", "#box3"], 0.3, {top:0, alpha:1, rotation:360}, 0.3); 

使用最后一个参数来控制交错/间距。

同样，确保您已获得最新版本，并且您正在该内页上加载 CSSPlugin 和 TweenLite。