<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;
  pointer-events: none;
  color:#dedede;
}

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

#nav {
  padding-bottom:20px;
}

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

#instructions {
 
}

/*
See https://greensock.com/splittext/ for details. 
This demo uses SplitText which is a membership benefit of Club GreenSock, https://greensock.com/club
*/
let clickContext;

document.getElementById("splitBtn").addEventListener("click", function() {
  clickContext && clickContext.revert(); // if the button was already clicked, revert everything
  clickContext = gsap.context(() => { // create a context so we can easily revert any GSAP-related stuff
    let split = new SplitText("#quote", {
      type: "words",
      wordDelimiter: "*"
    });
    gsap.to(split.words, {
      opacity: 0,
      y: 50,
      delay: 1,
      ease: "back.in(8)",
      stagger: 0.2
    });
  });
});