Elementor Pro Animated Text Horizontal Scrolling

kaycinho

Elementor Pro Animated Text Horizontal Scrolling

August 24, 2021
, 1:58 pm
, Skills, Tutorials, Web design, Web development

Elementor Pro animated text with horizontal scrolling

DISCLAIMER: I often review / link to products & services that I love and think you may find of interest. When you purchase a product/service through one of my link, I receive a commission, which helps me producing free content (you don’t pay anything extra!).

hello, I’m Kaycinho, The Digital Alchemist, and today I’m going to teach you how to create a trendy automatic horizontal scrolling effect with Elementor Pro.

Let’s give credit where it’s due: this tutorial is based on a codepen from by Syed Murtaza.

Elementor Pro Animated Text With Horizontal Scrolling

This tutorial is video based of course, but in case you need some time stamps :

0:00 – Elementor Pro animated text
0:11 – Pre-requisites
0:51 – Credits
1:00 – Main CSS
1:27 – Creating the content
3:58 – Spicing things up
4:49 – Desktop
4:57 – Tablet
4:59 – Mobile
5:02 – Navigation
5:24 – Background color change effect

Main CSS code (page level)

While editing your page with Elementor Pro, click on the gear icon (bottom left corner of the editor page), then Advanced > Custom Css and paste the following code:

				
					.scroll-left {
  height: 250px;
  overflow: hidden;
  position: relative;
}

.scroll-left p {
  position: absolute;
  width: 100%;
  height: 100%;
  margin: 0;
  line-height:260px;
  text-align: center;
  /* Starting position */
  -moz-transform:translateX(100%);
  -webkit-transform:translateX(100%); 
  transform:translateX(100%);
  /* Apply animation to this element */ 
  -moz-animation: scroll-left 10s linear infinite;
  -webkit-animation: scroll-left 10s linear infinite;
  animation: scroll-left 10s linear infinite;
}

/* Move it (define the animation) */
@-moz-keyframes scroll-left {
  0% { -moz-transform: translateX(100%); }
  100% { -moz-transform: translateX(-100%); }
}

@-webkit-keyframes scroll-left {
  0% { -webkit-transform: translateX(100%); }
  100% { -webkit-transform: translateX(-100%); }
}

@keyframes scroll-left {
  0% { 
    -moz-transform: translateX(100%); /* Browser bug fix */
    -webkit-transform: translateX(100%); /* Browser bug fix */
    transform: translateX(100%); 
  }
  100% { 
  -moz-transform: translateX(-100%); /* Browser bug fix */
-webkit-transform: translateX(-100%); /* Browser bug fix */
transform: translateX(-100%); 
  }
}

  
.scroll-right {
  height: 250px;
  overflow: hidden;
  position: relative;
}

.scroll-right p {
  position: absolute;
  width: 100%;
  height: 100%;
  margin: 0;
  text-align: center;
  /* Starting position */
  -moz-transform:translateX(100%);
  -webkit-transform:translateX(100%); 
  transform:translateX(100%);
  /* Apply animation to this element */ 
  -moz-animation: scroll-right 10s linear infinite;
  -webkit-animation: scroll-right 10s linear infinite;
  animation: scroll-right 10s linear infinite;
}

/* Move it (define the animation) */
@-moz-keyframes scroll-right {
  0% { -moz-transform: translateX(-100%); }
  100% { -moz-transform: translateX(100%); }
}

@-webkit-keyframes scroll-right {
  0% { -webkit-transform: translateX(-100%); }
  100% { -webkit-transform: translateX(100%); }
}

@keyframes scroll-right {
  0% { 
    -moz-transform: translateX(-100%); /* Browser bug fix */
    -webkit-transform: translateX(-100%); /* Browser bug fix */
    transform: translateX(-100%); 
  }
  100% { 
    -moz-transform: translateX(100%); /* Browser bug fix */
    -webkit-transform: translateX(100%); /* Browser bug fix */
    transform: translateX(100%); 
  }
}

Heading 1 – Class Name

click on heading #1
Then go to Advanced > CSS Classes and paste the class name below in the field

				
					scroll-left

Heading 1 – CSS code

click on heading #1
Then go to Advanced > Custom CSS and paste the code below
replace color white by the color / color code of your choice

				
					selector p {
  white-space: nowrap;
}

selector p:hover {
  -webkit-text-stroke: 2px white!important;
  color: transparent!important;
}

Heading 2 – Class Name

click on heading #2
Then go to Advanced > CSS Classes and paste the class name below in the field

				
					scroll-right

Heading 2 – CSS code

click on heading #2
Then go to Advanced > Custom CSS and paste the code below
replace color code #BF3664 by the color code of your choice

				
					selector p {
  white-space: nowrap;
  -webkit-text-stroke: 2px #BF3664!important;
  color: transparent!important;
}

selector p:hover {
  color: #BF3664!important;
}

Your turn!

I hope this tutorial will help you create amazing effects on your next website project with Elementor Pro!

If you watched the companion video and if you like it, please give it a thumbs up, as it really helps growing the Youtube channel – It does really help, and it doesn’t cost you anything!

Oh, if you want to know how to create a beautiful branding for yourself, your business or for your clients, you can download (totally free) my branding guidelines template by clicking here.

So, that’s it for this tutorial, I hope to see you around here or on the Youtube channel, and in the meantime, don’t forget to invest in YOUR success!