Solution 1 :

I managed to get rid of the flickering by commenting out the hidden class in the addTile method

addTile(tile) {
    // create the tile
    const tileElm = document.createElement("div")
        // "hidden",

    const valueElm = document.createElement("div")
    valueElm.classList.add("tile-container", `value-${tile.value}`)
    valueElm.textContent = tile.value


    this.cells[tile.x][tile.y] = new Tile(
    // request frame to allow transition to play
    window.requestAnimationFrame(() => {

Solution 2 :

As I saw your code All I see is that it’s getting larger while colliding and it’s happening because you have added css the one which scales your box while colliding.
Transform: Scale
Try using this css style and you might get your problem solved.

Problem :

I was creating a 2048 clone from scratch as a project. I have got the game pretty much working only problem is that my animations look janky. I have used css grid to construct my game board and after every move (user input) all the tiles are meant to slide across the board in a direction. That part works fine, it’s when they start the slide animation that for whatever reason some of the elements flicker.

I’m not the best with css animations but I have tried to look at every resource I could and I couldn’t find any solutions suited to my code. I tried switching the animation timing, delaying the animation etc to no avail. I did use a package animate-css-grid (because animating css grid is hard) which only handles the tiles sliding across the grid and I do not suspect that it is causing the issue.

I have put the code on js fiddle if anyone is interested to try and see the problem hello

Also if anyone has a better way of animating css grid let me know the package while helpful is a bit odd to work with. Thanks for the help


Comment posted by CodedJourney

The box is meant to scale while colliding, the issue is the boxes flickering right before they start to move. It might be easier to see with less boxes on the grid. Also not every box flickers. Sorry i might not have explained it well enough