(This page includes affiliate links. If you click and purchase, I receive a small commission at no extra cost from you and that way you can support me. I only recommend tools that I have personally used and loved.)
Requirements for Text Slice Reveal Animation (only for custom CSS method) in Elementor –
1 – Elementor Pro (Custom CSS) OR
2 – Any Alternative CSS Option
We will be making below Animated Text Slice Reveal Effect.
Versatile Solutions for Your
Business Success
Welcome to our collection of dynamic website templates tailored to meet the diverse needs of your business. At [Your Company Name], we understand the importance of a strong online presence, and our templates are designed to provide versatile solutions for businesses of all kinds.
For this effect check above video at 10:21.
Versatile Solutions for Your
Business Success
Versatile
Solutions
for Your
Business
Success
h1, h2,h3-h7, p…. Make sure to change the tag to the one you’re using.
sliceReveal is the animation name used in below code.
You can create your own gradient here – https://cssgradient.io
selector .elementor-widget-container {
overflow: hidden;
}
selector h1{
opacity: 0; /* Initially hide the text */
animation: sliceReveal 1.5s cubic-bezier(0.77, 0, 0.175, 1) 0.5s forwards; /* Apply the animation */
}
@keyframes sliceReveal {
0% {
transform: translate(0, 100%);
opacity: 0;
}
100% {
transform: translate(0, 0);
opacity: 1; /* Make the text fully visible at the end of the animation */
}
}
