“`transform: skewX()“` property used with “`transition: all 0.5s“` is causing the page to jump during animation. How can I prevent the jump?

I have written this styling for an <h2> heading. I’ve set a transition effect for when the heading is hovered over. But as the text skews, the page does a slight jump during the animation. How can I prevent that awkward jump without sacrificing the transition/animation effect?
Try this styling while having another element just before the h2 to see the jump on that element when the h2 is hovered:

.heading-secondary {
  font-size: 3.5rem;
  font-weight: 700;
  text-transform: uppercase;

  display: inline-block;
  background-image: linear-gradient(
    to right,
    $color-primary-light,
    $color-primary-dark
  );
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  transition: all 0.5s ease-in-out;
  letter-spacing: 0.15rem;

  &:hover {
    letter-spacing: 0.2rem;
    transform: skewX(2deg) skewX(180deg);
  }
}

>Solution :

Maybe need to make the body overflow or something hidden. Let’s see a working example

.heading-secondary {
  font-size: 3.5rem;
  font-weight: 700;
  text-transform: uppercase;
  display: inline-block;
  background-image: linear-gradient( to right, $color-primary-light, $color-primary-dark);
  background-clip: text;
  -webkit-background-clip: text;
  transition: all 0.5s ease-in-out;
  letter-spacing: 0.15rem;
}

.heading-secondary:hover {
  letter-spacing: 0.2rem;
  transform: skewX(2deg) skewX(180deg);
}

.container-overflow-hidden {
  overflow: hidden
}

<h1 class="heading-primary">heading-primary</h1>
<div class="container-overflow-hidden">
  <h2 class="heading-secondary">heading-secondary</h2>
</div>