Advanced Page Building

Carousels

Add a little something extra with these carousels

Scrolling Marquee

This pattern is super powerful because you can add literally anything to is and the items will just scroll horizontally forever, it’s beautiful.

It is powered by a bit of CSS which can be modified on each instance of the pattern, just follow the directions on the right.

How to edit

The pattern holds two duplicative containers to make the animation work. So follow these steps to make this pattern your own.

Customize your content in the first container (you can add anything)
Delete the second container.
Duplicated your customized container.
Click on the duplicated container, under “Layout > Direction” select the reverse direction.

Customize the Animation

To control the speed of the animation click the parent container “Marquee” and find “Advanced > Custom CSS” – find the code highlighted below and modify the seconds.

				
					.marquee {
  display: flex;
  overflow: hidden;
  height: 10vh;
  user-select: none;
  gap: 2rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.marquee__group {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  min-width: 100%;
  animation: marquee-scroll 15s linear infinite reverse;
}

@keyframes marquee-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(calc(-100% - 2rem));
  }
}

Watch the video tutorial

Education

Marketing

Branding

Paid Media

Storytelling

Ecommerce