<p class="absCenter js-move">Click ici :)</p>
<h1 class='js-split-anim' role='image' aria-label='un super titre'>un super titre</h1>

body, html {
  padding: 0;
  margin: 0;
  text-align: center;
  width: 100%;
  height: 100%;
  font-size: 0;
  overflow: hidden;
}

body::before {
  content: "";
  vertical-align: middle;
  display: inline-block;
  width: 0;
  height: 100%;
}

.absCenter {
  display: inline-block;
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  text-shadow: 1px 1px 0px rgba(255,255,255,.5), 0px -1px 0px rgba(255,255,255,.5), -1px 0px 0px rgba(255,255,255,.5), -1px -1px 0px rgba(255,255,255,.5);
  font-size: 14px;
  user-select: none;
}

h1 {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  text-transform: uppercase;
  font-family: helvetica, arial, sans-serif;
  font-size: 80px;
  letter-spacing: -.05em;
  padding: 0 40px;
  user-select: none;
  
  .line {
    position: absolute;
    width: 100%;
    height: 10px;
    background: red;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    transform-origin: center left;
    z-index: 1;
    border-radius: 10px;
  }
  
  span {
    position: relative;
    display: inline-block;
    white-space: pre;
    z-index: 2;
    user-select: none;
    
    &.back {
      z-index: 0;
    }
  }
}

let allTitles = document.querySelectorAll('.js-split-anim');

const item = document.querySelector('.js-split-anim');
const txtArray = item.innerHTML.split('');
item.innerHTML = "";
for (let j = 0; j < txtArray.length; j++) {
  const content = txtArray[j];
  const Sp = document.createElement('span');
  Sp.innerHTML = content;
  if(Math.round(Math.random()) == 1) {
    Sp.classList.add('back');
  }
  item.append(Sp);
}

const newLine = document.createElement('div');
newLine.classList.add('js-line', 'line');
item.append(newLine);

window.boundings = document.querySelector('.js-move').getBoundingClientRect();

window.tl = gsap.timeline({paused: true});

window.tl.add(function() {
  for (let d = 0; d < item.querySelectorAll('span').length; d++) {
    const curr = item.querySelectorAll('span')[d];
    curr.classList.remove('back');
    if(Math.round(Math.random()) === 1) {
      curr.classList.add('back');
    }
  }
  let rand = Math.random();
  let newX = rand * ((document.documentElement.clientWidth) - window.boundings.width) - ((document.documentElement.clientWidth/2) - (window.boundings.width/2));
  console.log('TEST', rand, newX);
  
  gsap.to(document.querySelector('.js-move'), {x: newX, y: Math.random() * (document.documentElement.clientHeight - window.boundings.height) - (window.boundings.height)})
})
window.tl.fromTo(item.querySelectorAll('span'), {y: 10, opacity: 0}, {duration: .25, y: 0, opacity: 1, stagger: .05, ease: 'quad.out'}, 0);
window.tl.fromTo(item.querySelector('.js-line'), {scaleX: 0}, {duration: 0.75, scaleX: 1, ease: 'expo.inOut'}, 0.1);

window.addEventListener('click', function() {window.tl.restart()});