Auto Scrolling Text in Elementor (Infinite Marquee Effect)

In this Elementor tutorial I will show you an easy way to add a looping marquee effect to your website.

Code used in video:

Timestamps:
0:00 Introduction
0:17 Right to Left Animation
4:40 Left to Right Animation

#elementortutorial #marquee #elementor

Our Recommended Tools
Some of the links on this page are affiliate links, meaning we may receive a commission if you follow them. This allows us to continue providing free content and educational resources for you. Thank you for supporting our small business!

WE NOW HAVE MERCH:

WORDPRESS PLUGINS:

BUSINESS TOOLS:

GRAPHICS:

WEBSITE HOSTING:

------

[ashish]

The only marquee code that really works in Elementor container based design. Thanks a lot for this great video. I have watched few videos for marquee in elementor, the code just breaks somehow making your design messy, despite trying multiple times.

[YusufErenIslim]

hey, it is not working. I have 2 rows of text and one of them has a gap problem

[muhammadhafidz]

thanks for the awesome tutorial and easy to listen explanation, the customizable heading is also a plus point although we can also modified any other widget that have more than 1 line, not just for heading

[spellgrowth]

nice tutorial but still your marquee is feels like laggy so you can use this for better smoother animation:


.marquee {
overflow: hidden;
display: flex;
white-space: nowrap;
}

.marquee h1 {
display: inline-block;
padding-right: 100%; /* Ensures space between repeated texts */
animation: marquee 45s linear infinite;
}

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

[Nasa_channel_]

i used the code but it was duplicated the heading underneath and the top heading was moving and the bottom was still. Even though i didnt create another heading underneath but still it was showig the content which was moving buit was still. Why is it duplicating?

[heymatthias]

Thank you, this works. But I changed the H1 in the CSS to p and took a paragraph Element instead of H1 Headings, to avoid having 3 different H1 Elements on a page. It works too.

[miansohaibraheem]

Thanks man, it works for me perfectly. I used it to scroll logos.

[mobilaizer]

Works very well in 11.2024. Thank you :)

[PedroMPerpetuo]

Same here - there is a double Header beneath the animated one... not sure why..
Okay, I think I found what I did wrong in the first attempt: needed to make sure hat I chose the same title tag (in my case H2) in the Title Element and in the HTML code aswell... make sure that I really use the same class (in my case marquee2) both in Title widget and HTML widget, and also check that I pasted the css in the correct field (into the Title widget CSS), while I am using Elementor Pro... thanks... it works like a charm!

[learnelementorwithtalha]

It worked perfectly but the html widget is taking the space which is awful. How to fix that?

[galogalofre]

Great video, greetings from Colombia. Starting today I'm subscribing to your channel. Everything is super clear and simple. I also have a question. Is there a way to make the text stay still when you hover over it?

[mohammadriaz]

Hi, Thanks for upload the video which is very useful. I did not find the css code link ( for stroke & others) in your description. I can see the only text scrol code link ( left & rigt ). Where i can get css code?. kindly guide me. thanks

[babagenow]

Can I do 3 Elements?
For me the third doesnt move no matter what I do... Im trying to do 3 on top of each other: right to left, left to right, right to left and no matter what I do (new class, h1, h2 and h3 etc) the third one wont move

Edit: I fixed it by renaming all the classes in the html code, for some reason it didnt register because I used a Capital M instead of small m.
Amazing tutorial thank you!!!

[Jebesniper]

Thank you works like a charm! Appreciate :)

[iloveyoutrell]

Thank you for this! Is this mobile friendly? Mines is not scrolling outside of desktop

[franktielemans]

I want to use this in a post title in a loop-item, the idea is to only show it on hover.

The problem is that the marquee only plays in the first post item.

[manemovafagh]

tanx but its not work in newest Elementor version

[mitsoni]

Pro Version in Require to use this code?

[easymoneysniper]

&Nbsp; does not work, there is still a gap in between the last word and the first word