/

How to make water wave text Animation with Elementor Pro?

WRITTEN BY :
Aless Design Studio
POSTED ON :
03/11/2021
TAGS :

Table of Contents

In this post, we are going to see how to make water wave text animation with Elementor Pro!WHY? Because it’s pretty cool! 🙂

What is text animation and why do I have to have it on my website?

Text animations are cool text effects on your website, which are created by code. The really make difference to the overall design and feel of the website.

To some of you having an animation on the website may look too much or annoying, but believe us – a few small animations can really elevate your online presence to the next level.

Water wave text animation effect

Water wave text Animation with Elementor Pro

Step 1: Section settings

Add a new section on the page and select a single structure. In the settings of the section go to height and give it a minimum height of 100vh.

Go to the Style tab and give the section a dark colour background. Here we are using #b2b2b2.

Step 2: Section settings

Next, put a new heading in the section. Write down your desired text and align it to the centre of the section.

Go to the Style tab and change the heading colour to white  – #ffffff.  Change the font to your choice – we are using Poppins. Make the font weight to 800. Make the size of the heading 12vw (we are using VW as our font size because we want to look good on all devices).

Duplicate the heading you have just created.

Step 3: Back Heading CSS

Select the settings of the upper heading, which is going to be our back heading in the design. Go to the Advanced tab and in the customer CSS section paste the code:

				
					selector{ -webkit-text-stroke: 2px #ff6f61; }
				
			

You can change the colour as your needs. In our tutorial, we are using our brand colour: #ff6f61.

Then make the colour of the heading transparent. The results so far must look like that:

water wave text Animation with Elementor Pro Image

Step 4: Front Heading

Change the colour of the second heading to the colour you have used as the line colour of the upper one – in our case is #ff6f61.

Step 5: Position the headings at the same place

Select the first heading and open the settings. Go to the Advanced tab, then Positioning > Position > Absolute. Do the same steps for the second heading.

For an easier selection of the headers, you can use the Navigator!

Step 6: Front Heading CSS

Select the settings of the second heading, which is going to be our front heading in the design. Go to the Advanced tab and in the customer CSS section paste the code:

				
					selector{
    -webkit-animation: water 4s ease-in-out infinite;
            animation: water 4s ease-in-out infinite;
}
@-webkit-keyframes water{
    0%, 100%{
        -webkit-clip-path: polygon(0 80%, 9% 61%, 22% 51%, 41% 53%, 55% 63%, 65% 72%, 76% 78%, 90% 81%, 100% 80%, 100% 100%, 0% 100%);
                clip-path: polygon(0 80%, 9% 61%, 22% 51%, 41% 53%, 55% 63%, 65% 72%, 76% 78%, 90% 81%, 100% 80%, 100% 100%, 0% 100%);
    }
    50%{
        -webkit-clip-path: polygon(0 80%, 15% 81%, 31% 75%, 41% 68%, 51% 59%, 64% 53%, 79% 53%, 92% 64%, 100% 80%, 100% 100%, 0% 100%);
                clip-path: polygon(0 80%, 15% 81%, 31% 75%, 41% 68%, 51% 59%, 64% 53%, 79% 53%, 92% 64%, 100% 80%, 100% 100%, 0% 100%);
    }
}
@keyframes water{
    0%, 100%{
        -webkit-clip-path: polygon(0 80%, 9% 61%, 22% 51%, 41% 53%, 55% 63%, 65% 72%, 76% 78%, 90% 81%, 100% 80%, 100% 100%, 0% 100%);
                clip-path: polygon(0 80%, 9% 61%, 22% 51%, 41% 53%, 55% 63%, 65% 72%, 76% 78%, 90% 81%, 100% 80%, 100% 100%, 0% 100%);
    }
    50%{
        -webkit-clip-path: polygon(0 80%, 15% 81%, 31% 75%, 41% 68%, 51% 59%, 64% 53%, 79% 53%, 92% 64%, 100% 80%, 100% 100%, 0% 100%);
                clip-path: polygon(0 80%, 15% 81%, 31% 75%, 41% 68%, 51% 59%, 64% 53%, 79% 53%, 92% 64%, 100% 80%, 100% 100%, 0% 100%);
    }
}
				
			

By default, the speed of the animation is set to 4 seconds. If you wish you can change the speed to another:

				
					selector{
-webkit-animation: water 4s ease-in-out infinite;
animation: water 4s ease-in-out infinite;
}
				
			

Save the changes.

Final results

Water wave text Animation with Elementor Pro

 4,693 total views,  4 views today

Share on facebook
Share on twitter
Share on linkedin
Share on pinterest
Share on telegram
Share on whatsapp
Share on skype
Share on email

Leave a Reply

Your email address will not be published.

Related Posts.

WordPress 5.9
WordPress

WordPress 5.9 Big Update & Big Changes

WordPress 5.9 is the first major release of 2022, as it was launched on January 25, 2022. This recent version brings new features and enhancements that make full site customization even easier.

 781 total views,  2 views today

Read More »
WRITTEN BY :
Aless Design Studio
POSTED ON :
03/11/2021
TAGS :

Table of Contents

In this post, we are going to see how to make water wave text animation with Elementor Pro!WHY? Because it’s pretty cool! 🙂

What is text animation and why do I have to have it on my website?

Text animations are cool text effects on your website, which are created by code. The really make difference to the overall design and feel of the website.

To some of you having an animation on the website may look too much or annoying, but believe us – a few small animations can really elevate your online presence to the next level.

Water wave text animation effect

Water wave text Animation with Elementor Pro

Step 1: Section settings

Add a new section on the page and select a single structure. In the settings of the section go to height and give it a minimum height of 100vh.

Go to the Style tab and give the section a dark colour background. Here we are using #b2b2b2.

Step 2: Section settings

Next, put a new heading in the section. Write down your desired text and align it to the centre of the section.

Go to the Style tab and change the heading colour to white  – #ffffff.  Change the font to your choice – we are using Poppins. Make the font weight to 800. Make the size of the heading 12vw (we are using VW as our font size because we want to look good on all devices).

Duplicate the heading you have just created.

Step 3: Back Heading CSS

Select the settings of the upper heading, which is going to be our back heading in the design. Go to the Advanced tab and in the customer CSS section paste the code:

				
					selector{ -webkit-text-stroke: 2px #ff6f61; }
				
			

You can change the colour as your needs. In our tutorial, we are using our brand colour: #ff6f61.

Then make the colour of the heading transparent. The results so far must look like that:

water wave text Animation with Elementor Pro Image

Step 4: Front Heading

Change the colour of the second heading to the colour you have used as the line colour of the upper one – in our case is #ff6f61.

Step 5: Position the headings at the same place

Select the first heading and open the settings. Go to the Advanced tab, then Positioning > Position > Absolute. Do the same steps for the second heading.

For an easier selection of the headers, you can use the Navigator!

Step 6: Front Heading CSS

Select the settings of the second heading, which is going to be our front heading in the design. Go to the Advanced tab and in the customer CSS section paste the code:

				
					selector{
    -webkit-animation: water 4s ease-in-out infinite;
            animation: water 4s ease-in-out infinite;
}
@-webkit-keyframes water{
    0%, 100%{
        -webkit-clip-path: polygon(0 80%, 9% 61%, 22% 51%, 41% 53%, 55% 63%, 65% 72%, 76% 78%, 90% 81%, 100% 80%, 100% 100%, 0% 100%);
                clip-path: polygon(0 80%, 9% 61%, 22% 51%, 41% 53%, 55% 63%, 65% 72%, 76% 78%, 90% 81%, 100% 80%, 100% 100%, 0% 100%);
    }
    50%{
        -webkit-clip-path: polygon(0 80%, 15% 81%, 31% 75%, 41% 68%, 51% 59%, 64% 53%, 79% 53%, 92% 64%, 100% 80%, 100% 100%, 0% 100%);
                clip-path: polygon(0 80%, 15% 81%, 31% 75%, 41% 68%, 51% 59%, 64% 53%, 79% 53%, 92% 64%, 100% 80%, 100% 100%, 0% 100%);
    }
}
@keyframes water{
    0%, 100%{
        -webkit-clip-path: polygon(0 80%, 9% 61%, 22% 51%, 41% 53%, 55% 63%, 65% 72%, 76% 78%, 90% 81%, 100% 80%, 100% 100%, 0% 100%);
                clip-path: polygon(0 80%, 9% 61%, 22% 51%, 41% 53%, 55% 63%, 65% 72%, 76% 78%, 90% 81%, 100% 80%, 100% 100%, 0% 100%);
    }
    50%{
        -webkit-clip-path: polygon(0 80%, 15% 81%, 31% 75%, 41% 68%, 51% 59%, 64% 53%, 79% 53%, 92% 64%, 100% 80%, 100% 100%, 0% 100%);
                clip-path: polygon(0 80%, 15% 81%, 31% 75%, 41% 68%, 51% 59%, 64% 53%, 79% 53%, 92% 64%, 100% 80%, 100% 100%, 0% 100%);
    }
}
				
			

By default, the speed of the animation is set to 4 seconds. If you wish you can change the speed to another:

				
					selector{
-webkit-animation: water 4s ease-in-out infinite;
animation: water 4s ease-in-out infinite;
}
				
			

Save the changes.

Final results

Water wave text Animation with Elementor Pro

 4,694 total views,  5 views today

Share on facebook
Share on twitter
Share on linkedin
Share on pinterest
Share on telegram
Share on whatsapp
Share on skype
Share on email

Leave a Reply

Your email address will not be published.

Related Posts.

WordPress 5.9
WordPress

WordPress 5.9 Big Update & Big Changes

WordPress 5.9 is the first major release of 2022, as it was launched on January 25, 2022. This recent version brings new features and enhancements that make full site customization even easier.

 781 total views,  2 views today

Read More »