Here’s is the easiest way to create an auto-scrolling text marquee effect in Elementor for free.
Get the CSS code below:
.marquee {
display: flex;
overflow: hidden;
height: 10vh;
user-select: none;
gap: 2rem;
padding-top: 1rem;
padding-bottom: 1rem;
/*transform: skewY(-3deg); */
/*transform: rotate(-5deg) translateY(-30px) translateX(50px);*/
}
.marquee__group {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: space-between;
gap: 2rem;
min-width: 100%;
animation: scroll 15s linear infinite reverse;
}
@keyframes scroll {
from {
transform: translateX(0);
}
to {
transform: translateX(calc(-100% - 2rem));
}
}
@media only screen and (min-width: 360px) {
.marquee__group span {
font-size: 6.5vw;
}
}


