If you are a beginner using Elementor, this post is for you! In this tutorial, you will learn how to create a marquee effect in the free version of Elementor. Usually, people use extra plugins for this, which can slow down your website. But don’t worry—I will show you how to create this marquee using only Elementor Free and some custom code. So, without further delay, let’s get started!
use this CSS Class
marquee-text
Your Marquee Effect Custom Code
<style>
.marquee-text .elementor-icon-list-items {
flex-wrap: nowrap !important;
-webkit-animation: marquee 40s linear infinite;
}
.marquee-text .elementor-icon-list-item{
white-space: nowrap !important;
}
.marquee-text .elementor-widget-container{
-webkit-mask-image: radial-gradient(circle,rgba(255, 255, 255,1) 50%, rgba(0, 0, 0, 0) 100%);
mask-image: radial-gradient(circle,rgba(255, 255, 255,1) 50%, rgba(0, 0, 0, 0) 100%);
}
@keyframes marquee{
100%{
transform: translateX(-100%);
}
}
</style>