transform: Scale , automatically reduces the size when using with javascript-CodePudding

<div id="trackBox">
                <div id="track"><i  id="plane"></i></div>
            </div>

CSS

#trackBox{
    width: 800px;
    height: 2px;
    
    transform: rotate(-20deg);
}

#track{
    width: 0%;
    height: 100%;
    background-color: white;
    
}

#plane{
    color: white;
    position: relative;
    transform: scale(2);
}

Javascript

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");

    }

});

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.

CodePudding user response：

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  id="plane">Plane Icon</i></div>
  </div>
</div>