Pre-run animation on page load

The first time I run my animation it runs at about 5fps and looks really janky. Is there a way to run it whilst the page loads or instantly after loading?

Also I have tried preloading the images with a preload in the header of my html. No luck with that.

My animation has three images that start with no width or height or opacity, but grow and become visible once the corresponding text-option is clicked. This creates the effect of the image growing from either the left or right of the container.

When loading the page, the first image (the one with active class) appears and is clearly loaded. When you then click a different text option, then the image expands but at a very slow rate. Once this image is loaded, then it never has this problem until the next refresh. So I would have assumed it would be a matter of preloading the image, but when I tried to preload the image with this <link rel="preload" href="img.png" as="image"> nothing had changed.

HTML:

<section class="section-2">
        <div class="image-container">
          <img src="img.png" alt="" class="selectable-image active">
          <img src="img.png" alt="" class="selectable-image">
          <img src="img.png" alt="" class="selectable-image">
        </div>
        <div class="text-selection-container">
          <div class="text-option active">
            <p class="title">Title</p>
            <p class="description">Description</p>
          </div>
          <div class="text-option">
            <p class="title">Title</p>
            <p class="description">Description</p>
          </div>
          <div class="text-option">
            <p class="title">Title</p>
            <p class="description">Description</p>
          </div>
        </div>
      </section>

SCSS:

.section-2 {
  display: flex;
  background-color: var(--second-background);
  padding: min(100px, 3svw);
  box-sizing: border-box;
  height: 60vh;

  .image-container {
    width: 50svw;
    height: 100%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    img {
      width: 0%;
      opacity: 0;
      transition: all 0.5s ease;
    }
    .selectable-image.active {
      opacity: 1;
      width: 100%;
    }
  }
  .text-selection-container {
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    padding: min(50px, 2svw);
    padding-left: 0;
    .text-option {
      margin: 1svw;
      padding-left: min(50px, 2svw);
      .title {
        font-size: 2svw;
        margin-bottom: 0.5svw;
        font-weight: 700;
      }
      .description {
        font-size: 1svw;
        font-weight: 400;
      }
    }

    .text-option.active {
      border-left: 4px solid var(--primary);
      padding-left: calc(min(50px, 2svw) - 4px)
    }
  }
}

JS:

document.addEventListener("DOMContentLoaded", function () {
  const textOption = document.querySelectorAll(".text-option");
  const selectableImage = document.querySelectorAll(".selectable-image");
  function clickedTextOption(clickedOption) {
    textOption.forEach((option,index) => {
        const active = option.classList.toggle("active", option === clickedOption);
      selectableImage[index].classList.toggle('active', active);
    });    
  }

  textOption.forEach(option => {
    option.addEventListener("click", () => {
      clickedTextOption(option);
    });
  });

});

P.S. img.png is just a placeholder

How would be the best way to prevent this lag on load?

Thanks in advance!