Auto Scrolling Text in Elementor (Infinite Marquee Effect)

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

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.

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.

Awesome tutorial, thank a lot!

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

Thank you! It works great!! :)

it works! thanks :)

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

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%); } }

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

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!

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.

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!!!

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

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?

Thank you works like a charm! Appreciate :)

How can I get the code?

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

Pro Version in Require to use this code?