2

I have a flexbox horizontally aligned with 62 items in it. I would like the items to scroll to the left and when complete loop back to the start.

I started trying a lot of things, but since I am new to flexbox I dont think I have a firm enough understanding of its interactions with other content to yet even attempt a solution that may work.

function GetAcceptances(value) {
  var acceptances = value;
  $("#tempAcceptanceLoader").remove();
  for (var x = 0; x < acceptances.length; x++) {
    //console.log(acceptances[x].Name);
    $("#recentAcceptances").append(`<div class="slidingText">${acceptances[x].Name}</div>`);
  }
};
#recentAcceptances {
  width: 60%;
  background-color: white;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  overflow: hidden;
}

.slidingText {
  flex: 1;
  padding: 0px 5px 0px 5px;
  white-space: nowrap;
  color: black;
  font-size: 18px;
  font-family: 'Oxygen', sans-serif;
  animation: example1 20s infinite linear;
}

@keyframes example1 {
  0% {
    padding-left: 0px;
  }
  100% {
    padding-left: -1000px;
  }
}
<div id="recentAcceptances" class="center">
  <h4 id="tempAcceptanceLoader">Currently loading the list of acceptances...</h4>
</div>
mullac
  • 693
  • 6
  • 17
Sean Mitchell
  • 447
  • 2
  • 21
  • if you want the `overflow` behavior to be `scroll` then why you are setting it to `hidden ` – Abdelillah Aissani Aug 13 '19 at 01:06
  • @Dadboz I don't want a scroll bar. I want scrolling text, if you would have read this you would have understood better as both the code and what I wrote explains it thoroughly. – Sean Mitchell Aug 13 '19 at 02:14

1 Answers1

0

Calculation of actual padding can be different from the specified padding value, especially with flex layouts. Try using transform with translateX instead; that applies the transform after the elements' layout is done:

@keyframes example1 {
  0% {
    transform: translateX(0px);
  }
  100% {
    transform: translateX(-1000px)
  }
}
backtick
  • 2,685
  • 10
  • 18
  • I tried this one, but it appeared they moved at different speeds due to their width... – Sean Mitchell Aug 13 '19 at 02:12
  • Interesting - I can't reproduce that behavior, can you take a look at this and let me know what looks different style-wise? https://codesandbox.io/s/fervent-frog-jbzk4 – backtick Aug 13 '19 at 02:33
  • I will give this a go in like an hour or so, currently working on a different part of the site. – Sean Mitchell Aug 13 '19 at 15:52