So the code is basically this
JS
const loadSliderImg = (src) =>
new Promise((resolve, reject) => {
const sliderImg = new Image()
sliderImg.onload = () =>
resolve(sliderImg)
sliderImg.src = src
})
loadSliderImg("slider-img.png").then(
(sliderImg) => (
(sliderImg.className = "slider-img"),
(sliderImg.style.top = "100px",
document.getElementById("div-container").appendChild(sliderImg),
setTimeout(() => {
sliderImg.style.left = "400px"
}, 1)
)
)
CSS
.div-container {
display: block;
width: 100%;
}
.slider-img {
position: relative;
width: 3px;
height: 150px;
transition: left 3s;
}
Tried a bunch of stuff but the result is still the same, image moves instantly. I have very similar code where everything goes right, no idea what’s the problem here