Search code examples
htmlcssanimationscrollwhitespace

White space coming on last of animation of feed

I am making a auto horizontal scroll feed section for my website its working but little problem is that when animation reach at last from left to right there is some white space coming i dont know why any one can help me ?

This white space towords which i make arrow with blue color please help me to fix this issue.

enter image description here

.bg-black-gradient-feed {
  content: '';
  position: absolute;
  height: 50%;
  top: 50%;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient( transparent, rgba(0 0 0 / 100%) 100%);
  transition: all 2s ease-in-out;
  -webkit-transition: all 2s ease-in-out;
  opacity: 1;
  border-radius: 0px 0px 15px 15px;
}
.feed-wrapper {
  overflow: hidden;
  width: 100%;
  height: 600px;
}

.feed-track {
  display: flex;
  width: calc(210px * 8);
  animation: scroll 30s linear infinite;
}

@keyframes scroll {
  0% {
      transform: translateX(0);
  }
  50% {
      transform: translateX(calc(-210px * 4));
  }
  50.01% {
      transform: translateX(calc(-210px * 4));
  }
  100% {
      transform: translateX(0);
  }
}

.feed-item {
  position: relative;
  width: 210px;
  border-radius: 15px;
  margin: 0 10px;
}

.feed-item img {
  border-radius: 15px;
}

.feed-item .feed-content {
  position: absolute;
  bottom: 0;
  width: 100%;
  font-size: 0.75rem;
  line-height: 1rem;
  padding: 1rem;
}

.feed-item .feed-content .content-wrapper {
  display: flex;
  flex-direction: column;
}

.feed-item .feed-content .content-wrapper div h2 {
  color: white;
  font-size: 0.75rem;
  line-height: 1.2;
  margin-bottom: 0.3rem;
}

.feed-item .feed-content .content-wrapper div span {
  display: block;
  color: white;
  font-size: 9px;
}
.top-60 {
  top:60px;
}
<div class="feed-wrapper">
    <div class="feed-track">
        <div class="feed-item">
            <img src="{{url('frontend/assets/images/feed1.jpeg')}}" width="210" height="380">
            <div class="bg-black-gradient-feed"></div>
            <div class="feed-content">
                <div class="content-wrapper">
                    <div style="display: block;">
                        <h2>Mercedes-Benz AMG: One Of</h2>
                    </div>
                    <div class="d-flex"><span>Posted By : f1rstmotors</span></div>
                    <div class="d-flex"><span>Posted On : 1/May/2024</span></div>
                </div>
            </div>
        </div>
        <!-- Repeat the feed items as needed -->
        <div class="feed-item">
            <img src="{{url('frontend/assets/images/feed2.jpeg')}}" width="210" height="380">
            <div class="bg-black-gradient-feed"></div>
            <div class="feed-content">
                <div class="content-wrapper">
                    <div style="display: block;">
                        <h2>Mercedes-Benz AMG: One Of</h2>
                    </div>
                    <div class="d-flex"><span>Posted By : f1rstmotors</span></div>
                    <div class="d-flex"><span>Posted On : 1/May/2024</span></div>
                </div>
            </div>
        </div>
        <div class="feed-item top-60">
            <img src="{{url('frontend/assets/images/feed1.jpeg')}}" width="210" height="380">
            <div class="bg-black-gradient-feed"></div>
            <div class="feed-content">
                <div class="content-wrapper">
                    <div style="display: block;">
                        <h2>Mercedes-Benz AMG: One Of</h2>
                    </div>
                    <div class="d-flex"><span>Posted By : f1rstmotors</span></div>
                    <div class="d-flex"><span>Posted On : 1/May/2024</span></div>
                </div>
            </div>
        </div>
        <!-- Repeat the feed items as needed -->
        <div class="feed-item">
            <img src="{{url('frontend/assets/images/feed2.jpeg')}}" width="210" height="380">
            <div class="bg-black-gradient-feed"></div>
            <div class="feed-content">
                <div class="content-wrapper">
                    <div style="display: block;">
                        <h2>Mercedes-Benz AMG: One Of</h2>
                    </div>
                    <div class="d-flex"><span>Posted By : f1rstmotors</span></div>
                    <div class="d-flex"><span>Posted On : 1/May/2024</span></div>
                </div>
            </div>
        </div>
        <div class="feed-item top-60">
            <img src="{{url('frontend/assets/images/feed1.jpeg')}}" width="210" height="380">
            <div class="bg-black-gradient-feed"></div>
            <div class="feed-content">
                <div class="content-wrapper">
                    <div style="display: block;">
                        <h2>Mercedes-Benz AMG: One Of</h2>
                    </div>
                    <div class="d-flex"><span>Posted By : f1rstmotors</span></div>
                    <div class="d-flex"><span>Posted On : 1/May/2024</span></div>
                </div>
            </div>
        </div>
        <!-- Repeat the feed items as needed -->
        <div class="feed-item">
            <img src="{{url('frontend/assets/images/feed2.jpeg')}}" width="210" height="380">
            <div class="bg-black-gradient-feed"></div>
            <div class="feed-content">
                <div class="content-wrapper">
                    <div style="display: block;">
                        <h2>Mercedes-Benz AMG: One Of</h2>
                    </div>
                    <div class="d-flex"><span>Posted By : f1rstmotors</span></div>
                    <div class="d-flex"><span>Posted On : 1/May/2024</span></div>
                </div>
            </div>
        </div>
        <div class="feed-item top-60">
            <img src="{{url('frontend/assets/images/feed1.jpeg')}}" width="210" height="380">
            <div class="bg-black-gradient-feed"></div>
            <div class="feed-content">
                <div class="content-wrapper">
                    <div style="display: block;">
                        <h2>Mercedes-Benz AMG: One Of</h2>
                    </div>
                    <div class="d-flex"><span>Posted By : f1rstmotors</span></div>
                    <div class="d-flex"><span>Posted On : 1/May/2024</span></div>
                </div>
            </div>
        </div>
        <!-- Repeat the feed items as needed -->
        <div class="feed-item">
            <img src="{{url('frontend/assets/images/feed2.jpeg')}}" width="210" height="380">
            <div class="bg-black-gradient-feed"></div>
            <div class="feed-content">
                <div class="content-wrapper">
                    <div style="display: block;">
                        <h2>Mercedes-Benz AMG: One Of</h2>
                    </div>
                    <div class="d-flex"><span>Posted By : f1rstmotors</span></div>
                    <div class="d-flex"><span>Posted On : 1/May/2024</span></div>
                </div>
            </div>
        </div>
        <!-- Add more items if necessary -->
    </div>
</div>

Solution

  • First of all, the width of .feed-track is incorrect. It should be (<item_count> * 210px + <gap_width> * <gap_count>)

    Then, your keyframe is also incorrect. It should be (-100% + <wrapper_width>)

    So, implementing them correctly should fix your problem.

    * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.bg-black-gradient-feed {
  content: '';
  position: absolute;
  height: 50%;
  top: 50%;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient( transparent, rgba(0 0 0 / 100%) 100%);
  transition: all 2s ease-in-out;
  -webkit-transition: all 2s ease-in-out;
  opacity: 1;
  border-radius: 0px 0px 15px 15px;
}

.feed-wrapper {
    overflow: hidden;
    width: 100vw;
    height: 600px;
}

.feed-track {
    display: flex;
    --item-count: 8;
    --gap: 20px;
    gap: var(--gap);
    padding: var(--gap);
    width: calc(210px * var(--item-count) + (var(--gap) * (var(--item-count) + 1)));
    animation: scroll 30s linear infinite;
}

@keyframes scroll {
    0% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(calc(-100% + 100vw));
    }
    100% {
        transform: translateX(0);
    }
}

.feed-item {
    position: relative;
    width: 210px;
    border-radius: 15px;
}

.feed-item img {
    border-radius: 15px;
}

.feed-item .feed-content {
    position: absolute;
    bottom: 0;
    width: 100%;
    font-size: 0.75rem;
    line-height: 1rem;
    padding: 1rem;
}

.feed-item .feed-content .content-wrapper {
    display: flex;
    flex-direction: column;
}

.feed-item .feed-content .content-wrapper div h2 {
    color: white;
    font-size: 0.75rem;
    line-height: 1.2;
    margin-bottom: 0.3rem;
}

.feed-item .feed-content .content-wrapper div span {
    display: block;
    color: white;
    font-size: 9px;
}
.top-60
{
    top:60px;
}
    <div class="feed-wrapper">
    <div class="feed-track">
        <div class="feed-item top-60">
            <img src="{{url('frontend/assets/images/feed1.jpeg')}}" width="210" height="380">
            <div class="bg-black-gradient-feed"></div>
            <div class="feed-content">
                <div class="content-wrapper">
                    <div style="display: block;">
                        <h2>Mercedes-Benz AMG: One Of</h2>
                    </div>
                    <div class="d-flex"><span>Posted By : f1rstmotors</span></div>
                    <div class="d-flex"><span>Posted On : 1/May/2024</span></div>
                </div>
            </div>
        </div>
        <!-- Repeat the feed items as needed -->
        <div class="feed-item">
            <img src="{{url('frontend/assets/images/feed2.jpeg')}}" width="210" height="380">
            <div class="bg-black-gradient-feed"></div>
            <div class="feed-content">
                <div class="content-wrapper">
                    <div style="display: block;">
                        <h2>Mercedes-Benz AMG: One Of</h2>
                    </div>
                    <div class="d-flex"><span>Posted By : f1rstmotors</span></div>
                    <div class="d-flex"><span>Posted On : 1/May/2024</span></div>
                </div>
            </div>
        </div>
        <div class="feed-item top-60">
            <img src="{{url('frontend/assets/images/feed1.jpeg')}}" width="210" height="380">
            <div class="bg-black-gradient-feed"></div>
            <div class="feed-content">
                <div class="content-wrapper">
                    <div style="display: block;">
                        <h2>Mercedes-Benz AMG: One Of</h2>
                    </div>
                    <div class="d-flex"><span>Posted By : f1rstmotors</span></div>
                    <div class="d-flex"><span>Posted On : 1/May/2024</span></div>
                </div>
            </div>
        </div>
        <!-- Repeat the feed items as needed -->
        <div class="feed-item">
            <img src="{{url('frontend/assets/images/feed2.jpeg')}}" width="210" height="380">
            <div class="bg-black-gradient-feed"></div>
            <div class="feed-content">
                <div class="content-wrapper">
                    <div style="display: block;">
                        <h2>Mercedes-Benz AMG: One Of</h2>
                    </div>
                    <div class="d-flex"><span>Posted By : f1rstmotors</span></div>
                    <div class="d-flex"><span>Posted On : 1/May/2024</span></div>
                </div>
            </div>
        </div>
        <div class="feed-item top-60">
            <img src="{{url('frontend/assets/images/feed1.jpeg')}}" width="210" height="380">
            <div class="bg-black-gradient-feed"></div>
            <div class="feed-content">
                <div class="content-wrapper">
                    <div style="display: block;">
                        <h2>Mercedes-Benz AMG: One Of</h2>
                    </div>
                    <div class="d-flex"><span>Posted By : f1rstmotors</span></div>
                    <div class="d-flex"><span>Posted On : 1/May/2024</span></div>
                </div>
            </div>
        </div>
        <!-- Repeat the feed items as needed -->
        <div class="feed-item">
            <img src="{{url('frontend/assets/images/feed2.jpeg')}}" width="210" height="380">
            <div class="bg-black-gradient-feed"></div>
            <div class="feed-content">
                <div class="content-wrapper">
                    <div style="display: block;">
                        <h2>Mercedes-Benz AMG: One Of</h2>
                    </div>
                    <div class="d-flex"><span>Posted By : f1rstmotors</span></div>
                    <div class="d-flex"><span>Posted On : 1/May/2024</span></div>
                </div>
            </div>
        </div>
        <div class="feed-item top-60">
            <img src="{{url('frontend/assets/images/feed1.jpeg')}}" width="210" height="380">
            <div class="bg-black-gradient-feed"></div>
            <div class="feed-content">
                <div class="content-wrapper">
                    <div style="display: block;">
                        <h2>Mercedes-Benz AMG: One Of</h2>
                    </div>
                    <div class="d-flex"><span>Posted By : f1rstmotors</span></div>
                    <div class="d-flex"><span>Posted On : 1/May/2024</span></div>
                </div>
            </div>
        </div>
        <!-- Repeat the feed items as needed -->
        <div class="feed-item">
            <img src="{{url('frontend/assets/images/feed2.jpeg')}}" width="210" height="380">
            <div class="bg-black-gradient-feed"></div>
            <div class="feed-content">
                <div class="content-wrapper">
                    <div style="display: block;">
                        <h2>Mercedes-Benz AMG: One Of</h2>
                    </div>
                    <div class="d-flex"><span>Posted By : f1rstmotors</span></div>
                    <div class="d-flex"><span>Posted On : 1/May/2024</span></div>
                </div>
            </div>
        </div>
        <!-- Add more items if necessary -->
    </div>
</div>