Javascript – I am doing animation frame by frame and it doesn't work for some reason, JS

The issue is simple, animation doesn’t work for some reason,
got a video here is an onload function

let frames;

let dino = {
    animation : [
        startRunImg,
        secondRunImg,
        thirdRunImg,
        startRunImg
    ],
    x : dinoX,
    y : dinoY,
    w : dinoWidth,
    h : dinoHeight,
    onGround : true,
    frame : 0
}

window.onload = function() {
    board = document.querySelector('#canvas');
    scoreElemnt = document.querySelector('#score');
    bestScoreElement = document.querySelector('#bestScore');
    boardWidth = board.width;
    boardHeight = board.height;
    context = board.getContext('2d');

    setInterval(placePipes, 1500);
    requestAnimationFrame(update); // requestAnimationFrame
};

Here is my update

function update(){
    requestAnimationFrame(update); //requestAnimationFrame
    frames++;
    context.clearRect(0, 0, board.width, board.height);


    drawBase();
    drawDino();
    drawPipes();

    if(state.current == state.game){
        velocityY += gravity;
        dino.y = Math.max(dino.y + velocityY, 0);
        colisionDetection();
        updateScore();
    }
};

drawDino function

function drawDino(){
    let dinoA = dino.animation[dino.frame];
    context.drawImage(dinoA, dino.x, dino.y, dino.w, dino.h);

    if(state.current == state.game){
        dino.period = 5;
        if(frames == 0){
            dino.frame = (dino.frame + 1) % dino.animation.length;
        }
    };
};

i checked my files and they are all correct.
Also no errors messages in console
(if i provided not enough information, note in comments)