Jump to content


Variable/Array in example page

Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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)




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?



Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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



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



var ball = document.getElementById('ball')


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

Link to comment
Share on other sites

Oh man! Thanks a lot!!!

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.