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

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 home page , 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 inner pages.. if delete/comment #box1 other #box2 , #box3 animation not working. how can ignore #box1 animation , continue animations.

i can't seem reproduce issue. using latest version of greensock files? post codepen or jsfiddle demonstrates problem?

also, simplify code:

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

your code wasn't "wrong" - verbose. , if you're not doing sequencing, don't need use timelinemax (although it's fine if prefer workflow). if meant sequence animations, though, using timelinemax's staggerto() method this:

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

use last parameter control stagger/spacing.

again, make sure you've got latest version , you're loading cssplugin , tweenlite on inner page.