<link href='https://fonts.googleapis.com/css?family=Asap:400,700' rel='stylesheet' type='text/css'>

  

<div id="quote">#SplitText*Now*Supports*Custom*Word*Delimiters</div>
<button id="splitBtn">split the text into words</button>
<div id="instructions">Click the button above to see the * removed and the text split.</div>


  
  
  
  
  
  
  
  
  
body{
  font-family: Asap, Arial, Helvetica, sans-serif;
  color:white;
  background:black url(https://s.cdpn.io/16327/texture_bg.jpg) no-repeat 50% 0px;
  margin:5% 10% 0 10%;
  overflow:hidden;
}
#demo{
  position:relative;
}
#quote{
  font-size:28px;
  line-height:44px;
  color:#dedede;
}

button{
  padding:10px;
  margin:20px 0;
}

#nav {
  padding-bottom:20px;
}

.word{
  color:lime;
  margin-left:-10px;
}

#instructions {
 
}
/*
See https://www.greensock.com/splittext/ for details. 
This demo uses SplitText which is a membership benefit of Club GreenSock, https://www.greensock.com/club/
*/
var split;

document.getElementById("splitBtn").addEventListener("click", function() {
  split = new SplitText("#quote", {
    type: "words",
    wordDelimiter: "*"
  });
  gsap.to(split.words, {
    opacity: 0,
    y: 50,
    delay: 1,
    ease: "back.in(8)",
    stagger: 0.2
  })
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.4/gsap.min.js
  2. https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/SplitText3.min.js