Sometimes we need to add special Effects to our page like Animation, Dynamic content. Breathing Text Animation is what we are gonna do this time.

Maybe you have seen the animated text on many websites be it to make the website look more elegant or highlight that special block of text. The simple animation does not add any load to your page loading speed since it’s based on just a simple stylesheet, but it definitely can make your website look pretty cool AF. You can add this into bigger headings or just simple text in between lines. You can read more about animation here- Mozilla Developer Network. Breathing Text Animation is what we are gonna call it.

Here’s one way through which you can add simple Breathing Effect to your Text. You can even edit the timing and speed of the animation by changing variables in the Stylesheet.

You may also like.

To make it happen, let’s see how we’ll code our Breathing Text Animation.

First and foremost, we’ll do our original and simple files creation, named Index.HTML and Style.css.

Then add a Div containing heading H1, give it a class of Breathing. After that, we import a font file to our stylesheet like this-

@font-face {
     font-family: "IBM Plex Sans Roman";
     src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/85648/IBMPlexSansVar-Roman.ttf");
 }

give the div property of box-sizing: border-box; and make the text centre. After that with the help of @keyframes we will add gradual timing of the text, even though it looks pretty complex but once you understand how @keyframes work, you can easily customise it on your own. If you want to read more about keyframes check the article on Mozilla Web Developer Network. @keyframes

Source Code for Breathing Text Animation.

Now here’s the code for our Index.HTML file.

<!DOCTYPE html>
<!-- code by EvilWebDev -->
<html>
<head>
  <meta charset="UTF-8">
  <title>Breathing Text Animation | Evil WebDev</title>
      <link rel="stylesheet" href="style.css">
</head>

<body>

  <h1 data-splitting>Breathing</h1>
  <script>Splitting()</script>
  
</body>
</html>

and here’s the code that you need to add in your CSS file style.css.

/* 
	Weight axis: 100 – 700
	Width axis: 85 – 100
*/
@font-face {
	font-family: "IBM Plex Sans Roman";
	src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/85648/IBMPlexSansVar-Roman.ttf");
}

* {
	box-sizing: border-box;
}

body {
	font-family: "IBM Plex Sans Roman", Times;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	min-height: 100vh;
	background-color: #DCE345;
}

h1 {
	font-weight: 100;
	font-size: 10vw;
	line-height: 10vw;
	font-variation-settings: 'wght' 100, 'wdth' 85;
}

h1 span {
	--delay: calc((var(--char-index) + 1) * 400ms);
	animation: breathe 4000ms infinite both;
	animation-delay: var(--delay);
}

h1:hover span {
	animation-play-state: paused;
}

@keyframes breathe {
	0% {
		font-variation-settings: 'wght' 100, 'wdth' 85;
		font-size: 10vw;
	}
	60% {
		font-variation-settings: 'wght' 700, 'wdth' 100;
		font-size: 11vw;
	}
	
	100% {
		font-variation-settings: 'wght' 100, 'wdth' 85;
		font-size: 10vw;
	}
}

CodePen

See the Pen Variable font animation by Kamran Tahir (@Mah3svara) on CodePen.

Here’s one of our interesting previous post. Custom Radio Button.

unsplash-logoPeter Secan
0 CommentsClose Comments

Leave a comment