Is there a way to ensure that my animation runs smoothly without any lag or jankiness, either while the page is loading or immediately after loading?
I have attempted to preload the images using a preload tag in the header of my HTML, but unfortunately, that did not solve the issue.
The animation consists of three images that initially have no width, height, or opacity. They gradually expand and become visible when the corresponding text-option is clicked, creating the effect of the image growing from either the left or right side of the container.
Upon loading the page, the first image (the one with the active class) is displayed and fully loaded. However, when a different text option is clicked, the image expands very slowly. Once the image is fully loaded, it does not experience this slow expansion issue again until the next refresh. I attempted to preload the image using the
<link rel="preload" href="img.png" as="image">For a visual demonstration of the problem, you can view this video: Video
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);
});
});
});.section-2 {
display: flex;
background-color: var(--second-background);
padding: min(100px, 3svw);
box-sizing: border-box;
height: 60vh;
}
.section-2 .image-container {
width: 50svw;
height: 100%;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
box-sizing: border-box;
}
.section-2 .image-container img {
width: 0%;
opacity: 0;
transition: all 0.5s ease;
}
.section-2 .image-container .selectable-image.active {
opacity: 1;
width: 100%;
}
.section-2 .text-selection-container {
width: 50%;
display: flex;
flex-direction: column;
justify-content: space-evenly;
padding: min(50px, 2svw);
padding-left: 0;
}
.section-2 .text-selection-container .text-option {
margin: 1svw;
padding-left: min(50px, 2svw);
}
.section-2 .text-selection-container .text-option .title {
font-size: 2svw;
margin-bottom: 0.5svw;
font-weight: 700;
}
.section-2 .text-selection-container .text-option .description {
font-size: 1svw;
font-weight: 400;
}
.section-2 .text-selection-container .text-option.active {
border-left: 4px solid var(--primary);
padding-left: calc(min(50px, 2svw) - 4px)
}<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>P.S. img.png is just a placeholder
What is the most effective way to prevent this initial lag when loading the animation?
Thank you in advance!