Horizon Title Animation

by Emily Humphrey

HTML

<h1 class="horizon-title JS-horizon-title">The pre-eminent force in the hospitality industry.</h1>

SCSS

body{
  font-family: sans-serif;
}
.horizon-title{
  &{
    opacity: 0;
  }
  &.ready{
    opacity: 1;
  }
  span{
    display: inline-block;
    overflow: hidden;
  }
  span span{
    display: block;
    transform: translateY(100%);
    transition: .3s ease-out;
  }
  
  &.ready.display span span{
    transform: translateY(0); 
  }
}

JavaScript

const $horizonTitles = document.querySelectorAll(".JS-horizon-title");
const horizonTitles = [];

HorizonTitle.prototype = {
	_defaultOptions: function(){
  	
  },
	_breakText: function(){
    return this.$element.textContent.split(" ");
  },
  _formatText: function(words){
  	let finalWords = [];
		for(let i = 0; i < words.length; i++){
    	let word = words[i];
      finalWords.push("<span><span>"+word+"</span></span>");
    }
    return finalWords;
  },
  _replaceContent: function(words){
  	this.$element.innerHTML = words.join(" ");
  },
  _ready: function(){
  	this.$element.classList.add("ready")
  },
  initialize: function(){
    let words = this._breakText();
    console.log(words)
    words = this._formatText(words);
    console.log(words)
    this._replaceContent(words);
    this._ready();
    
    // comment this out if you want a custom hook like on scroll
    setTimeout(()=>{
    	this.display()
    },100)
  },
  display: function(){
  	this.$element.classList.add("display")
  }
};

function HorizonTitle($element){
	this.$element = $element;
  this.initialize()
}

for(let i = 0; i < $horizonTitles.length; i++){
 const title = new HorizonTitle($horizonTitles[i]);
 horizonTitles.push(title);
}