Is this the best practice of animation in web design?

I am curious to know if this is the best practice to animate my lonely tree on my website
I also want to do something later on like add time and dates and other objects inside the grass area once you click on it but I want to make sure I'm doing it the best way that I can before proceeding.
I was going to add date and weather via the font method for canvas.

// 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){
                if (imageArray[i] == tree || imageArray[i] == img || 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);
                }
            }
            //SECOND STEP
            else if (mill >= 22 && mill <= 66){
                if (imageArray[i] == img3 || imageArray[i] == img3s || imageArray[i] == img4) {
                    con.drawImage(imageArray[i], halfScreen - imageArray[i].width * 0.5 * 0.5, mill-22, imageArray[i].width * 0.5, imageArray[i].height * 0.5);
                }else if(imageArray[i] == tree || imageArray[i] == img || 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{
                if (imageArray[i] == img3 || imageArray[i] == img3s || 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 || imageArray[i] == img2){
                    con.drawImage(imageArray[i], halfScreen - imageArray[i].width * 0.5 * 0.5, 66, 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);
                    con.font = '48px serif';
                    con.fillText('Hello world', 10, 50);
                }
            }
        }
        animation();
    }, 1000/fps)
}