trjhtr

I am curious to know whether this is the most basic and best way I could be coding this animation on my website object thats a lone tree on an island when you click on it a nice animation plays HERE.



There are condisions that have to be met with this animation.

• 
  Has to be responsive for all devices
  


• 
  Smooth animations that dont take up too much memory
  


• 
  No CSS, I have made this object twice in CSS and making it responsive for other devices is a nightmare.
  

I also wanted to add dates and weather to the islands grass if anyone knows how I can manage that without using a canvas I am severely intrigued. Just as a foot note I'm not asking for code I'm asking for advice on another way or a better form of practice that could provide me with more functionality or even less code.

 ////// MAIN \\\

ripple.onload = function()
 canvas.width = window.innerWidth;
 canvas.height = img.height * 0.5;

 for (i = 0; i < imageArray.length; i++) 
 con.drawImage(imageArray[i], halfScreen - imageArray[i].width * 0.5 * 0.5, 0, imageArray[i].width * 0.5, imageArray[i].height * 0.5);
 


// IDLE ANIMATION
function rippleAnimation()
 setTimeout(function()
 rippleMill++;
 opacity = opacity - 0.005;
 con.clearRect(0, 0, con.canvas.width, con.canvas.height);
 for (i = 0; i < imageArray.length; i++) 
 if (imageArray[i] == ripple) 
 if (opacity < 0) 
 opacity = 1;
 rippleMill = 0;
 
 con.save();
 con.globalAlpha = opacity;
 con.drawImage(ripple, 
 halfScreen - ripple.width * 0.5 * 0.5 - rippleMill / 2, - rippleMill / 2, img.naturalWidth * 0.5 + rippleMill, img.naturalHeight * 0.5 + rippleMill);
 con.restore();
 
 else
 con.drawImage(imageArray[i], halfScreen - imageArray[i].width * 0.5 * 0.5, 0, imageArray[i].width * 0.5, imageArray[i].height * 0.5);
 
 
 if (!stopFirstAnimation)rippleAnimation();
 , 1000/fps)


// CLICKED ANIMATION
function animation()
 stopFirstAnimation = true;
 setTimeout(function()
 mill = mill + 1.5;
 rippleMill++;
 opacity = opacity - 0.005;

 con.clearRect(0, 0, con.canvas.width, con.canvas.height);

 for (i = 0; i < imageArray.length; i++) 
 //RIPPLE ANIMATION
 if (imageArray[i] == ripple) 
 if (opacity < 0) 
 opacity = 1;
 rippleMill = 0;
 
 con.save();
 con.globalAlpha = opacity;
 con.drawImage(ripple, 
 halfScreen - ripple.width * 0.5 * 0.5 - rippleMill / 2, - rippleMill / 2, img.naturalWidth * 0.5 + rippleMill, img.naturalHeight * 0.5 + rippleMill);
 con.restore();
 
 //FIRST STEP
 else if(mill < 22)
 //SECOND STEP
 else if (mill >= 22 && mill <= 66) imageArray[i] == img2)
 con.drawImage(imageArray[i], halfScreen - imageArray[i].width * 0.5 * 0.5, mill, imageArray[i].width * 0.5, imageArray[i].height * 0.5);
 else
 con.drawImage(imageArray[i], halfScreen - imageArray[i].width * 0.5 * 0.5, 0, imageArray[i].width * 0.5, imageArray[i].height * 0.5);
 
 //RENDER FINISH
 //CLEAR TREE
 else imageArray[i] == img4) 
 con.drawImage(imageArray[i], halfScreen - imageArray[i].width * 0.5 * 0.5, 66-22, imageArray[i].width * 0.5, imageArray[i].height * 0.5);
 else if(imageArray[i] == tree)
 treeOpacity = treeOpacity - 0.04;
 if (treeOpacity < 0) 
 treeOpacity = 0;
 
 con.save();
 con.globalAlpha = treeOpacity;
 con.drawImage(imageArray[i], halfScreen - imageArray[i].width * 0.5 * 0.5, 66, imageArray[i].width * 0.5, imageArray[i].height * 0.5);
 con.restore();
 else if(imageArray[i] == img 
 
 animation();
 , 1000/fps)