text animation with splitting

index.html

<div class="text" data-splitting>
The Tech Basket
</div>

script.js

Splitting();

scripts

<script src="https://unpkg.com/splitting@1.0.0/dist/splitting.js"></script>

style.css

@import url('https://fonts.googleapis.com/css?family=Oswald:700');
@import url("https://fonts.googleapis.com/css?family=Roboto:400,400i,700");
html { 
  height: 100%; 
  display: flex; 
  text-align: center; 
  background: #fafafa;  
  color: #FFF; 
}
body { 
  margin: auto; 
  font-family: Roboto, sans-serif;
}
* {
  transition: all .4s ease;
}
.text {
  border-radius: 50% 50%;
  padding: 10px 40px 10px 30px;
  background: #222837; 
  font-family: Oswald, sans-serif;
  font-weight: 700;
  font-size: 10vw;
  text-transform: uppercase;
  text-shadow: 0px 0px 20px rgba(0,0,0,0.6);
  white-space: pre;
}
.char { 
  margin-right: -0.42em;
}
.char:not(:first-child) {
  opacity: 0;
}
.word .char:first-child {
  color:#4BFAA6;
  font-size:1.4em;
}
.text:hover {
  padding: 0px 30px 15px 20px;
  border-radius: 1% 1%;
}
.text:hover .char {
  margin-right: -0.12em;
}
.text:hover .char:not(:first-child) {
  opacity: 1;
}

styles

<link href="https://unpkg.com/splitting/dist/splitting.css" rel="stylesheet" />

text-animation-with-splitting.markdown

text animation with splitting

Little Text animation with the splitting.js lib

A Pen by Amit Yadav on CodePen.

License.