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>All the parts of the puzzle are given above. When I change the size of an element using transform: scale(), and then using javascript translate that element, its size turns down to normal again.
When you set the CSS transform property, you reset any transformations that were previously on it. So when you were setting your translate in JS, you were overwriting the scale that was set in your CSS. An easy solution is to store your transformations individually as custom properties like so:
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>