DailyKadenceWP 10: Infinite Vertical Logo Marquee

I found this vertical marquee on wp-rocket.me and I tried to find a solution to build the same feature using Kadence Blocks + Custom CSS.

Here is a preview of the end result

How it’s built:

The section is built similarly with a horizontal marquee (carousel).

Step 1

For the above structure, it’s essential to set the minimum height for the parent section (600px in my case), with all padding of inner containers (row, sections) set to 0.

Step 2

Add the CSS to the Customizer – Custom CSS, or to the Child Theme – style.css. This is the CSS I used, based on this CodePen:

/* Infinite Vertical logo Carousel */
/* Wrap Container */
.vertical-logo-carousel .kt-inside-inner-col {
 overflow-y: hidden;
  position: absolute;
  z-index: 1;
}

/* Left marquee */
.vertical-logo-carousel  .left .logo-img {
  animation: slideup 8s linear infinite;
  position: relative;
  min-height: 100px;
  top: 0;
  margin: 0;
}

 @keyframes slideup {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-100%);
  }
} 

/* Right marquee */
.vertical-logo-carousel  .right .logo-img {
 min-height: 100px; 
  animation: slidedown 8s linear infinite;
  position: relative;
  top: -100px;
  margin: 0;
}

 @keyframes slidedown {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(100%);
  }
} 

Final note:

Also, it’s essential to have margin:0 for the children (.logo-img). Without it, the whole loop will have an annoing glitch / jump when starting again.

You can find everything in action on my KadenceWP Demo Site: Vertical Infinite Carousel (Marquee).