Text Revealing Effect in Elementor

Our Blogs

Today we are going to see, how we can add a text revealing effect in Elementor.

We already did the hard work for you. You just need to copy some css code and paste it in your heading widget > advance > custom css. You can copy the css from down below. you can see that there are two block of code available. First one is for applying the effect on heading and second block of code is for for actual animation. You need to copy both of them and paste one after another. But in case if you are using the effect in more than one time in page, you don’t need to copy the the second block which is for animation. Animation code is only needed one time for a page. Once you paste it in your elementor, you can see the effect.

Block 1: Code for applying the animation


selector{
    --overlay-color: crimson;
    --delay:.5s;
}

selector .elementor-widget-container{
    display: inline-block;
    position: relative;
}
selector .elementor-widget-container .elementor-heading-title{
    opacity: 0;
    animation: text_revealing .5s ease forwards;
    animation-delay: calc(.5s + var(--delay));
}
selector .elementor-widget-container::after{
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 102%;
    width: 0px;
    background-color: var(--overlay-color);
    animation: overlay 1s ease forwards;
    animation-delay: var(--delay);
}

Block 2: Code for the actual animation (need once per page even if using the effect more.)


@keyframes text_revealing {
	100% {
		opacity:1;
	}
}
@keyframes overlay {
	50% {
		width: 100%;
		left: 0;
	}
	100% {
		left: 100%;
		width: 0%;
	}
}

Effect Controls :

There are not many control available. But if you know css you can make the effect as you want. There are two things which we can control easily. [ you can see the variable in the top of the block 1 css code ]

1) Overlay color. This is the color that will reveal the text. By default we have a crimson color as you can see. But you can change it or paste any color code as you want.

2) Delay. The change of the delay is necessary, if you are using the effect more that one time and you want them in a sequence. Then what you need to do is, you just need to do a increment of the delay 1s. Like for the first one .5s > 2nd one 1.5s > 3rd one 2.5s.

Note :

This effect will work on page-load. It will be ideal if you use it in a hero section or in the top of the page.

For Better Understanding, you can watch the video :

Sharing is caring!

Liked This Article?

Subscribe To Our Newsletter. So You will never Miss Another Update.

3 thoughts on “Text Revealing Effect in Elementor”

  1. Hey, that’s really great!
    What do I need to add for this effect to start not on page load, but when element is in viewport?
    Thanks!
    Ido

Leave a Comment

Your email address will not be published. Required fields are marked *

shares