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
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:
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
2,794 total views, 5 views today
