How do I slide in text from a fixed position instead of left of screen?

Question

I want to make text slide in and appear from a fixed position not the very left of the screen. Kind of like in the website https://ctc.westpoint.edu/ So for example the text would appear 50px from the left of the page. It slides in when the website loads.

This code is encased in a div called slogan. It contains text.

document.addEventListener('DOMContentLoaded', () => {
  const content = document.getElementById('content');
  setTimeout(() => {
    content.classList.add('visible');
  }, 1500); // Adjust the delay as needed
});

.slogan {
  display: block;
  width: 630px;
  height: 180px;
  margin: 50px;
  padding-top: 20px;
  padding-bottom: 20px;
  padding-left: 25px;
  line-height: 1.5;
  font-weight: 900;
  font-size: 45px;
  text-transform: capitalize;
  color: var(--color-4) !important;
  border-left: 3px solid #ffffff;
}

.slogan {
  position: relative;
  left: -100%;
  transition: left 0.5s ease-in;
  gap: 50px;
}

.slogan.visible {
  left: 0;
}

.slogan h1 {
  font-size: 30px;
  text-transform: capitalize;
}

.slogan p.tablet-size {
  font-weight: 900;
  color: var(--color-4);
  display: block;
  font-size: 16px;
  line-height: 1.35;
}

<div class="slogan" id="content">
  <h1>Contributing To Peace</h1>
  <p class="tablet-size">I don't provide all the answers - I want people to think for
    themselves. Want to save the world - the strategy is to affirm people as they are
    without trying to change them. Then they will treat others the same way.</p>
</div>

Answer 1

If you don't want the border to move - don't move the element it belongs to.

Create a container for the border, set overflow: hidden for it, envelop the content you want to move with a container and move that internal container.

document.addEventListener('DOMContentLoaded', () => {
  const content = document.getElementById('content');
  setTimeout(() => {
    content.classList.add('visible');
  }, 1500); // Adjust the delay as needed
});

.slogan {
  overflow: hidden;
  display: block;
  width: 630px;
  height: 180px;
  margin: 50px;
  padding-top: 20px;
  padding-bottom: 20px;
  padding-left: 25px;
  line-height: 1.5;
  font-weight: 900;
  font-size: 45px;
  text-transform: capitalize;
  color: var(--color-4) !important;
  border-left: 3px solid #ffffff;
}

.container {
  position: relative;
  left: -100%;
  transition: left 0.5s ease-in;
  gap: 50px;
}

.container.visible {
  left: 0;
}

.slogan h1 {
  font-size: 30px;
  text-transform: capitalize;
}

.slogan p.tablet-size {
  font-weight: 900;
  color: var(--color-4);
  display: block;
  font-size: 16px;
  line-height: 1.35;
}

<div class="slogan">
  <div class="container" id="content">
  <h1>Contributing To Peace</h1>
  <p class="tablet-size">I don't provide all the answers - I want people to think for
    themselves. Want to save the world - the strategy is to affirm people as they are
    without trying to change them. Then they will treat others the same way.</p>
  </div>
</div>