We have moved some of our static JS code from previous lessons here and placed them into methods we can call from our main example to clean up the lesson.
Example JS
In this example we have moved our color box transitions into a nested block loop that will loop every 2 seconds.
We then added a sift variable to change the direction of the blocks on each loop.
Output
Run
Click "Run" to see the result.
The output should count to 3 and then start water falling the blocks back and forth in an infinite loop.
You will notice that we needed to set our interval to every 2 seconds instead of 1.
This is because we want all of the blocks to reach the other side before it loops.
The reason why we chose 2 seconds is because ColorBox4 will take approximately 900ms (300x3) before it even starts and then will take 1 second to complete its transition.
So we needed at least 1900ms but chose 2000ms to just round up and make it look cleaner.
It's kind of inconvenient to have to do the math our selves so click "Next Lesson" to see how we can make the loop wait for ColorBox4 to finish before looping and not even need to set an interval at all.
