Packery layout flickers too much on hover

Question

My requirement is when hovering on one circle it grows with 50px and the other moves a bit from their positions as it grows.

I have achieved on mouse enter grow and on mouse leave shrink for circle - but the layout flickers way too much while going from one circle to another circle. anything can be done here with js to stop flicker?

// Dynamic font size based on outer div
flexFont = function () {
  var divs = document.getElementsByClassName("flexFont");
  for (var i = 0; i < divs.length; i++) {
    var relFontsize = divs[i].offsetWidth * 0.18;
    divs[i].style.fontSize = relFontsize + "px";
  }
};

var container = document.querySelector("#js__itemList");
var pckry = new Packery(container, {
  // Options
  itemSelector: ".item",
  gutter: 5,
});

var selectedItem = "";

// Circle Grow
function circleGrow(e) {
  if (!e.classList.contains("item")) {
    return;
  }

  if (selectedItem != e.id) {
    selectedItem = e.id;

    let widthCircle;
    let heightCircle;

    e.classList.toggle("grid-item--large");

    if (e.classList.contains("one-time-increase")) {
    } else {
      widthCircle = parseFloat(e.style.width) + 50;
      heightCircle = parseFloat(e.style.height) + 50;
      e.classList.add("one-time-increase");
    }

    e.style.width = widthCircle + "px";
    e.style.height = heightCircle + "px";

    setTimeout(() => {
      pckry.layout();
      flexFont();
    }, 250);
  }
}

// Circle Shrink
function circleShrink(e) {
  let widthCircle;
  let heightCircle;

  e.classList.toggle("grid-item--large");

  if (e.classList.contains("one-time-increase")) {
    widthCircle = parseFloat(e.style.width) - 50;
    heightCircle = parseFloat(e.style.height) - 50;
    e.classList.remove("one-time-increase");
  }

  e.style.width = widthCircle + "px";
  e.style.height = heightCircle + "px";

  setTimeout(() => {
    pckry.layout();
    flexFont();
  }, 250);

  selectedItem = "";
}

window.onload = function (event) {
  flexFont();
};
window.onresize = function (event) {
  flexFont();
};

body{margin:0;padding:100px 20px}ul,li{list-style:none;padding:0;margin:0}.item-list{max-width:950px;width:100%;margin:0 auto;overflow:hidden}.item-list .item{display:flex;background-color:#000;align-items:center;justify-content:center;flex-direction:column;transition-duration:.5s;z-index:0}.item-list .item.circle{border-radius:50%;text-align:center}.item-list .item.grid-item--large{z-index:99999999}.item-list .item *{color:#fff;margin:0}.item-list .item span{font-weight:bold;font-size:1.5em}





    
    
    
    JS Bubble
    



    
        
            English
            361
        
        
            Greek
            8
        

        
            Cantonese
            12
        
        
            Catalan
            2
        
        
            Bengali
            7
        
        
            Croatian
            1
        

        
            Danish
            1
        
        
            Chinese
            38
        
        
            Arabic
            8
        
        
            Dutch
            2
        
        
            French
            15
        
        
            German
            4
        
        
            Gujarati
            10
        
        
            Hebrew
            1
        
        
            Hindi
            71
        
        
            Japanese
            1
        
        
            Italian
            13
        
        
            Kannada
            2
        
        
            Kazakh
            2
        
        
            Korean
            2
        
        
            Latin
            1
        
        
            Marathi
            33
        
        
            Latvian
            1
        
        
            Lithuanian
            1
        
        
            Malay
            2
        
        
            Maltese
            1
        
        
            Russian
            9
        
        
            Romanian
            4
        
        
            Nepali
            2
        
        
            Spanish
            81
        
        
            Persian
            7
        
        
            Polish
            9
        
        
            Punjabi
            1
        
        
            Irish
            1
        
        
            Portuguese
            6
        
        
            Sindhi
            1
        
        
            Malayalam
            6
        
        
            Turkmen
            1
        
        
            Swedish
            1
        
        
            Tagalog
            3
        
        
            Taiwanese
            2
        
        
            Bulgarian
            1
        
        
            Tamil
            7
        
        
            Telugu
            6
        
        
            Azerbaijani
            1
        
        
            Thai
            2
        
        
            Mandarin
            15
        
        
            Turkish
            6
        

        
            Ukrainian
            5
        
        
            Urdu
            4
        
        
            Somali
            1
        
        
            Vietnamese
            10
        
        
            Yoruba
            1

Packery layout flickers too much on hover

0 Answers