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

Question

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 change the transform style it overwrites it. When you transform translate with JS you're overwriting the scale that you did in your CSS — Zach Jensz, Apr 24 '22 at 11:48
The transform property can have multiple values. Check here how to add values to existing values: https://stackoverflow.com/questions/30010523/add-a-transform-value-to-the-current-transforms-that-are-already-on-the-element — Baro, Apr 24 '22 at 11:58

score 0 · Accepted Answer · answered Apr 24 '22 at 11:57

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>

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

1 Answers1