Reproducing A Clever Animation Product, Part 26

I got the basics of the fountain effect working. I defined forty elements, gave them random characteristics in a loop, set a delay of 1.5 seconds from the end of the previous animation element, then set the forty elements to begin flying on a 1.45 second setback following by a jump back 1.5 seconds. This has the effect of launching a new element every 0.05 seconds (twenty per second) for two seconds, with the elements all clearing after a further 1.5 seconds minus.

It could probably be tweaked a hair, but I hope you’ll agree that this is a respectable emulation of the effect shown on the Greensock home page. Again, I have no idea whether I’ve done this the same way they did, but it works well enough.

Here is the initialization code. The handle006 element was already in place, but I added a clear instruction with a 1.5 second delay, as described above.

      var handle006 = document.getElementById("handle006");
      bcInitElement(handle006,"20px","201px","green","rgba(0,0,0,0)","260px",1,"block","This text reacts to gravity.");
      addTransformToList("handle006",2.0,{topNew:0},{effect: "gravity", velocity: -8.0, acceleration: 0.16});
      addTransformToList("handle006",2.0,{left:80},"linear","-=2.00");
      addTransformToList("handle006",0.00,{display:"none"},"","+=1.50");

      var ftnElementNames = new Array;
      ftnElementNames[ 0] = "ftn000";
      ftnElementNames[ 1] = "ftn001";
      ftnElementNames[ 2] = "ftn002";
      ftnElementNames[ 3] = "ftn003";
      ftnElementNames[ 4] = "ftn004";
      ftnElementNames[ 5] = "ftn005";
      ftnElementNames[ 6] = "ftn006";
      ftnElementNames[ 7] = "ftn007";
      ftnElementNames[ 8] = "ftn008";
      ftnElementNames[ 9] = "ftn009";
      ftnElementNames[10] = "ftn010";
      ftnElementNames[11] = "ftn011";
      ftnElementNames[12] = "ftn012";
      ftnElementNames[13] = "ftn013";
      ftnElementNames[14] = "ftn014";
      ftnElementNames[15] = "ftn015";
      ftnElementNames[16] = "ftn016";
      ftnElementNames[17] = "ftn017";
      ftnElementNames[18] = "ftn018";
      ftnElementNames[19] = "ftn019";
      ftnElementNames[20] = "ftn020";
      ftnElementNames[21] = "ftn021";
      ftnElementNames[22] = "ftn022";
      ftnElementNames[23] = "ftn023";
      ftnElementNames[24] = "ftn024";
      ftnElementNames[25] = "ftn025";
      ftnElementNames[26] = "ftn026";
      ftnElementNames[27] = "ftn027";
      ftnElementNames[28] = "ftn028";
      ftnElementNames[29] = "ftn029";
      ftnElementNames[30] = "ftn030";
      ftnElementNames[31] = "ftn031";
      ftnElementNames[32] = "ftn032";
      ftnElementNames[33] = "ftn033";
      ftnElementNames[34] = "ftn034";
      ftnElementNames[35] = "ftn035";
      ftnElementNames[36] = "ftn036";
      ftnElementNames[37] = "ftn037";
      ftnElementNames[38] = "ftn038";
      ftnElementNames[39] = "ftn039";

      var ftnElements = new Array;
      var tempHalf;
      var tempColor;
      var startX = new Array;
      var endX = new Array;
      var tempVelocity = new Array;
      var tempAcceleration = new Array;
      var tempColors = new Array;
      tempColors[0] = "#770000";
      tempColors[1] = "#990000";
      tempColors[2] = "#BB0000";
      tempColors[3] = "#DD0000";
      tempColors[4] = "#FF0000";

      for (var j=0; j<40; j++) {
        ftnElements[j] = document.getElementById(ftnElementNames[j]);      
        tempHalf = Math.floor((Math.random() * 3) + 1);
        tempWidth = 8 + tempHalf * 2 + "px";
        tempColor = Math.floor((Math.random() * 4) + 1);
        startX[j] = "140px";
        endX[j] = -148 + Math.floor((Math.random() * 282) + 1) + "px";
        tempVelocity[j] = -9.0 - Math.random() * 4;
        tempAcceleration[j] = 0.37; //0.25 + Math.random() * 0.25;
        bcInitElement(ftnElements[j],startX[j],"201px","#FFFFFF",tempColors[tempColor],tempWidth,1,"block","");
        ftnElements[j].style.height = tempWidth;
        ftnElements[j].style.borderRadius = 4 + tempHalf + "px";
        addTransformToList(ftnElementNames[j],1.5,{topNew:0},{effect: "gravity", velocity: tempVelocity[j], acceleration: tempAcceleration[j]},"-=1.45");
        addTransformToList(ftnElementNames[j],1.5,{left: endX[j]},"linear","-=1.50");
      }

var handle006 = document.getElementById("handle006");

bcInitElement(handle006,"20px","201px","green","rgba(0,0,0,0)","260px",1,"block","This text reacts to gravity.");

addTransformToList("handle006",2.0,{topNew:0},{effect: "gravity", velocity: -8.0, acceleration: 0.16});

addTransformToList("handle006",2.0,{left:80},"linear","-=2.00");

addTransformToList("handle006",0.00,{display:"none"},"","+=1.50");

var ftnElementNames = new Array;

ftnElementNames[ 0] = "ftn000";

ftnElementNames[ 1] = "ftn001";

ftnElementNames[ 2] = "ftn002";

ftnElementNames[ 3] = "ftn003";

ftnElementNames[ 4] = "ftn004";

ftnElementNames[ 5] = "ftn005";

ftnElementNames[ 6] = "ftn006";

ftnElementNames[ 7] = "ftn007";

ftnElementNames[ 8] = "ftn008";

ftnElementNames[ 9] = "ftn009";

ftnElementNames[10] = "ftn010";

ftnElementNames[11] = "ftn011";

ftnElementNames[12] = "ftn012";

ftnElementNames[13] = "ftn013";

ftnElementNames[14] = "ftn014";

ftnElementNames[15] = "ftn015";

ftnElementNames[16] = "ftn016";

ftnElementNames[17] = "ftn017";

ftnElementNames[18] = "ftn018";

ftnElementNames[19] = "ftn019";

ftnElementNames[20] = "ftn020";

ftnElementNames[21] = "ftn021";

ftnElementNames[22] = "ftn022";

ftnElementNames[23] = "ftn023";

ftnElementNames[24] = "ftn024";

ftnElementNames[25] = "ftn025";

ftnElementNames[26] = "ftn026";

ftnElementNames[27] = "ftn027";

ftnElementNames[28] = "ftn028";

ftnElementNames[29] = "ftn029";

ftnElementNames[30] = "ftn030";

ftnElementNames[31] = "ftn031";

ftnElementNames[32] = "ftn032";

ftnElementNames[33] = "ftn033";

ftnElementNames[34] = "ftn034";

ftnElementNames[35] = "ftn035";

ftnElementNames[36] = "ftn036";

ftnElementNames[37] = "ftn037";

ftnElementNames[38] = "ftn038";

ftnElementNames[39] = "ftn039";

var ftnElements = new Array;

var tempHalf;

var tempColor;

var startX = new Array;

var endX = new Array;

var tempVelocity = new Array;

var tempAcceleration = new Array;

var tempColors = new Array;

tempColors[0] = "#770000";

tempColors[1] = "#990000";

tempColors[2] = "#BB0000";

tempColors[3] = "#DD0000";

tempColors[4] = "#FF0000";

for (var j=0; j<40; j++) {

ftnElements[j] = document.getElementById(ftnElementNames[j]);

tempHalf = Math.floor((Math.random() * 3) + 1);

tempWidth = 8 + tempHalf * 2 + "px";

tempColor = Math.floor((Math.random() * 4) + 1);

startX[j] = "140px";

endX[j] = -148 + Math.floor((Math.random() * 282) + 1) + "px";

tempVelocity[j] = -9.0 - Math.random() * 4;

tempAcceleration[j] = 0.37; //0.25 + Math.random() * 0.25;

bcInitElement(ftnElements[j],startX[j],"201px","#FFFFFF",tempColors[tempColor],tempWidth,1,"block","");

ftnElements[j].style.height = tempWidth;

ftnElements[j].style.borderRadius = 4 + tempHalf + "px";

addTransformToList(ftnElementNames[j],1.5,{topNew:0},{effect: "gravity", velocity: tempVelocity[j], acceleration: tempAcceleration[j]},"-=1.45");

addTransformToList(ftnElementNames[j],1.5,{left: endX[j]},"linear","-=1.50");

}

I’ll work on looping back at a later date, since I’m currently doing a very long road trip to clear my mind before coming back home to get back at it. Please feel free to contact me as I’m traveling.

Reproducing A Clever Animation Product, Part 26

Leave a Reply Cancel reply

Recent Posts

Recent Comments

Categories

Meta