NO BUG: Loop refuses to be a perfect loop

Bugs
1

Hi ,
No matter what I do or what methods I tested (other codes and methods on codepen ) bricks refuses to make a perfect loop and puts a blank at some point in the loop and everything is broken

<div class="banner-slider">
<section>
<article>
<div>
<ul>
<li><img src="https://assets.awwwards.com/awards/asset/2023/07/64a593e4261d3167151073.png" /></li>
<li><img src="https://assets.awwwards.com/awards/submissions/2023/07/64a6cfdbc2b5a971444140.png" /></li>
<li><img src="https://assets.awwwards.com/awards/submissions/2023/07/64a597c5cfb8c553386972.jpg" /></li>
<li><img src="https://assets.awwwards.com/awards/submissions/2023/07/64a6e9a21089f834155071.jpg" /></li>
<li><img src="https://assets.awwwards.com/awards/asset/2023/07/64aadc70dffcb289002894.jpg" /></li>
<li><img src="https://assets.awwwards.com/awards/asset/2023/07/64a31455991a6011963743.jpg" /></li>
<li><img src="https://assets.awwwards.com/awards/asset/2023/06/64902cc1c79b9806494586.jpg" /></li>
<li><img src="https://assets.awwwards.com/awards/asset/2023/06/648bca32d7c9e528776584.jpeg" /></li>
</ul>
</div>
</article>
</section>
</div>

<style>
*,::after,::before {
  box-sizing: border-box;
}

ul {
  padding-left: 2rem;
  margin-top: 0;
  margin-bottom: 1rem;
}

img {
  vertical-align: middle;
}

.banner-slider section {
  width: 100%;
  overflow: hidden;
  transform: matrix(1, 0.27, -0.8, 0.7, 0, 0);
  margin-left: -200px;
  padding: 100px 0;
}

.banner-slider article {
  display: flex;
  width: 200%;
  animation: bannermove 40s linear infinite;
  -webkit-animation: bannermove 40s linear infinite;
  -moz-animation: bannermove 40s linear infinite;
  -ms-animation: bannermove 40s linear infinite;
  /* Fix looping bug */
  will-change: transform;
}

.banner-slider article:hover {
  animation-play-state: paused;
}

.banner-slider div {
  width: 50%;
}

.banner-slider ul {
  display: flex;
}

.banner-slider ul li {
  margin: 0 10px;
}

.banner-slider ul li img {
  transition: all 0.2s ease;
}

.banner-slider ul li:hover img {
  transform: translateY(-20px);
  box-shadow: 40px 60px 80px rgba(0, 0, 0, 0.3);
}

.banner-slider {
  margin-top: 400px;
  width: 200%;
}

@media (min-width: 1921px) {
  .banner-slider {
    margin-top: 600px;
  }
}

@media (max-width: 1440px) {
  .banner-slider {
    margin-top: 330px;
  }
}

@media (max-width: 1024px) {
  .banner-slider {
    margin-top: 100px;
    .banner-slider article {
      width: 300%;
    }
  }
}

@media (max-width: 767px) {
  .banner-slider {
    margin-top: -40px;
    .banner-slider article {
      width: 400%;
    }
  }
}

img {
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
  user-select: none;
  user-drag: none;
  -moz-user-select: none;
  -webkit-user-drag: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  max-width: 100%;
}

::selection {
  background: #503be1;
  color: #fff;
}

li {
  list-style: none;
}

ul {
  padding-left: 0;
}

@keyframes bannermove {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* Disable lazy loading */

.lazyload {
  display: none;
}
</style>

put the code in widget code and test
I am convinced that it is bricks the responsible nothing works

additional resources:
codepend 1: https://codepen.io/danedmonds/pen/gMEYwr
codepend 2: https://codepen.io/studiojvla/pen/qVbQqW
image

2

I don’t think you’re supposed to self declare that it’s a confirmed bug :slightly_smiling_face:

In this case, in the codepen examples, each item is added twice to give the effect of there being infinite, in your Bricks example you’re only adding them in once.

This type of CSS animation to create infinite is a ‘trick’ and the second batch of elements is to hide the inevitable gap that follows the animation on the first one and is needed to complete the illusion.

1 Like
3

Hi Neo,
Thanks for your report. I agree with David and have no choice but to confirm this is not a bug :smiley:

4

there is no way or trick to do it?
No specific recommendations to add?

5

The only trick is to copy the exact method being shown, you’re changing the method and that’s why it isn’t working. if you copy exactly it works. (there needs to be two of each list for it to work)