eduReveal = 400; var eduAni = false; var education = document.getElementById('education'); var track = document.getElementById('track'); var plane = document.getElementById('plane'); window.addEventListener('scroll', function() { var topMost = window.innerHeight; var trackPos = education.getBoundingClientRect().top; if (eduAni == false && (topMost - eduReveal) > trackPos) { track.style.width = '100%'; plane.style.transform = 'translate(800px)'; plane.style.transitionDuration = '5s'; track.style.transitionDuration = '5s'; eduAni = true; console.log("Track"); } }); #trackBox { width: 800px; height: 2px; transform: rotate(-20deg); } #track { width: 0%; height: 100%; background-color: white; } #plane { color: white; position: relative; transform: scale(2); } <div id="trackBox"> <div id="track"><i class="fa-solid fa-plane" id="plane"></i></div> </div>Todas las partes del rompecabezas se dan arriba. Cuando cambio el tamaño de un elemento usando transform: scale(), y luego uso javascript para traducir ese elemento, su tamaño vuelve a la normalidad.
Cuando establece la propiedad de transformación CSS, restablece cualquier transformación que haya estado previamente en ella. Entonces, cuando estaba configurando su traducción en JS, estaba sobrescribiendo la escala que se configuró en su CSS. Una solución fácil es almacenar sus transformaciones individualmente como propiedades personalizadas de la siguiente manera:
eduReveal = 400; var eduAni = false; var education = document.getElementById('education'); var track = document.getElementById('track'); var plane = document.getElementById('plane'); window.addEventListener('scroll', function() { var topMost = window.innerHeight; var trackPos = education.getBoundingClientRect().top; if (eduAni == false && (topMost - eduReveal) > trackPos) { track.style.width = '100%'; plane.style.transform = 'scale(var(--scale, 2)) translate(800px)'; plane.style.transitionDuration = '5s'; track.style.transitionDuration = '5s'; eduAni = true; console.log("Track"); } }); body { min-height: 101vh; background-color: skyblue; } #trackBox { width: 800px; height: 2px; transform: rotate(-20deg); } #track { width: 0%; height: 100%; background-color: white; } #plane { --scale: 2; color: white; position: relative; } <div id="education"> <div id="trackBox"> <div id="track"><i class="fa-solid fa-plane" id="plane">Plane Icon</i></div> </div> </div>