Variable/Array in example page

[Albo 0 Likes (Newbie)]

Hi, after downloaded the v.12 and simplifing the function inside the bouncing_ball.html file (inside the example folder) I can see a variable (originally an array) that is needed to play the animation.

 

 (function() {
  var ball = document.getElementById('ball'),
colors = "";

  function play()
  {
ball.style.marginLeft = "0px";
var tl = new TimelineLite({delay:0.5});

tl.to(ball, 0.5, {css:{marginTop:0}})
  .to(ball, 1, {css:{marginLeft:"+=450px"}, ease:Bounce.easeOut})
  .to(ball, 1, {css:{marginLeft:0}, ease:Quint.easeOut}, 1)
  .call(play);
  }

  play();

 })();

 

I can't understand why if I remove this variable the animation it doesn't work. Originally the variable it was an array:

 

colors = ["#480e6e","#fc4239","#ffd400","#00c4df"];

 

that tl timeline it was using to change the color of the ball in this way:

.to(ball, 1, {css:{marginLeft:0, backgroundColor:colors[ Math.floor(Math.random() * colors.length) ]}}, 1)

 

It sounds a bit strange... May you help me?

 

Thanks!

[Carl 11,326 Likes (Superhero)]

i pasted your code exactly as you have it into my bouncing_ball.html and it played fine.

 

are you sure you are saving it in the right place and all the javascript files are loading?

[Albo 0 Likes (Newbie)]

Sure. My question is: why if I delete the colors variable it doesn't run?

[Carl 11,326 Likes (Superhero)]

ah, I see. when you remove colors you also have to get rid of the trailing comma in the previous line:

 

bad:

var ball = document.getElementById('ball'),

 

good:

var ball = document.getElementById('ball')

 

originally the code was written so that multiple vars could be created at once

[Albo 0 Likes (Newbie)]

Oh man! Thanks a lot!!!