hello and welcome to red stapler channel in this tutorial I'm going to show you
how to create a cracking text effect with breathing animation using just CSS
in couple minutes ready let's check it out in this tutorial we'll need to
duplicate the text three times for each broken part so let's create a container
and three spans containing our text
and that's it for the HTML part let's work on the CSS as you can see I already
have the main wrapper with Flex layout to Center everything on the screen next
I will set the font family size color and uppercase transform also set the
position to relative next I'm going to put all of them together at the same
position basically we'll just set the position of
the 1st and 3rd one to absolute and top left to zero we'll do this by using nth-child
selector now all of them are on the same place the next step is to break
them apart using clip-path property clip-path allows you to specify the area of
the element that you want to display here's the example of the clip-path
generator tools to let you easily create your own shape you can find a link to
this too at the video description box let's try adding path to each of our
text span you can try change these numbers to create different cracking
effect now we'll start to see the separate lines between each part let's
move them apart using translate
I also add a small rotation as well
the difficult part is over now I'm going to try animate the cracking effect
basically we'll just move to transform above into the keyframes property
looks good lastly our added breathing effect using text shadow brightness and
blur filter
I will set the animation direction to alternate to make the animation play
forward and backward alternatively and that's it if you love this tutorial and
would like to see more don't forget to subscribe to stay tuned in our channel
thanks watching and see you next time bye