Better solution for animating width

Question

I have a block over a text and i want to reveal the text and make the width of the block zero
I'm using gsap but as far as i know it is bad for performance to animate width,
and since i'm gonna use this animation quite a lot i'm worried to animate width

so is there is a better solution for my little problem ?

gsap.to('.block', {
  duration: 1, width: 0, ease: Power4.easeIn}, 0.2);

h1 {
  position: relative;
  display: inline-block
}
.block {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  background: black;
  width: 100%;
  height: 100%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.6/gsap.min.js"></script>
<h1>
  hello world
  <span class="block"></span>
</h1>

Answer 1

You can consider an animation using transform and have better performance

gsap.to('.block', {
  duration: 1, transform: 'translateX(-100%)', ease: Power4.easeIn}, 0.2);

h1 {
  position: relative;
  display: inline-block;
  overflow:hidden;
}
.block {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  background: black;
  width: 100%;
  height: 100%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.6/gsap.min.js"></script>
<h1>
  hello world
  <span class="block"></span>
</h1>