Add Horizontal Sliding/Scrolling Text in Elementor [Without Plugin]

Are you looking to add a touch of dynamism and visual appeal to your website? If so, our latest tutorial is just what you need! We’ve created a comprehensive guide on how to create scrolling text effects in Elementor without the need for external plugins. Now, you can easily captivate your visitors with engaging animated text that adds that “wow” factor to your web pages.

In this tutorial, we dive deep into Elementor’s features and show you how to leverage them to create stunning scrolling text animations. No prior coding experience? No problem! Our step-by-step approach ensures that beginners and experienced designers alike can follow along with ease.

With the use of custom CSS, Elementor’s animated headline feature, and advanced design settings, you’ll learn how to craft attention-grabbing headlines, announcements, testimonials, and more. The possibilities are endless!

Why rely on third-party plugins when you can unlock Elementor’s full potential? By the end of this tutorial, you’ll have the knowledge and confidence to implement scrolling text effects that will make your website truly stand out.

Ready to take your web design skills to the next level? Watch our tutorial now and get ready to wow your visitors with captivating scrolling text effects!

<style>
body{
    --speed: 10s;
}
	/* Code by https:// websensepro.com */
	
.sliding-text .elementor-widget-wrap{
    display: block !important;
}
.sliding-text .elementor-widget{
    overflow: hidden;
    width: 10000vw !important;
    max-width: 10000vw !important;
}
.sliding-text .sliding .elementor-widget-container{
    -webkit-animation: sliding var(--speed) linear infinite;
    -moz-animation: sliding var(--speed) linear infinite;
    -o-animation: sliding var(--speed) linear infinite;
    animation: sliding var(--speed) linear infinite;
}
.sliding-text .elementor-widget-container{
    float: left;
}
.sliding-text.reverse{
    transform: rotate(180deg);
}
.sliding-text.reverse .sliding .elementor-heading-title{
    transform: scale(-1, -1);
}
@keyframe sliding{
0%{ transform: translateX(0); }
100%{ transform: translateX(-100%); }
}
@-webkit-keyframes sliding {
0%{ transform: translateX(0); }
100%{ transform: translateX(-100%); }
}
@-moz-keyframes sliding {
0%{ transform: translateX(0); }
100%{ transform: translateX(-100%); }
}
@-o-keyframes sliding {
0%{ transform: translateX(0); }
100%{ transform: translateX(-100%); }
}
@keyframes sliding {
0%{ transform: translateX(0); }
100%{ transform: translateX(-100%); }
}
</style>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
var $ = jQuery

$(document).ready(function(){

    var h = []

    $('.sliding-text').each(function(){
        h.push($(this).find('.elementor-widget').clone().html())
    })
    
    function init(){
        $('.sliding-text').each(function(i){

            var $this = $(this)

            $this.find('.elementor-widget').removeClass('sliding')

            var amount = Math.ceil($(window).width()/$(this).find('.elementor-widget-container').outerWidth(true)) + 1

            $this.find('.elementor-widget').empty().addClass('sliding')
            $this.find('.elementor-widget').html(h[i].repeat(amount))
        })  
    }
    
    init()
    $(window).on('load resize', init)
})
</script>