<!--

Follow me on
Instagram: https://www.instagram.com/supahfunk/
Dribbble: https://dribbble.com/supahfunk
Twitter: https://twitter.com/supahfunk
Codepen: https://codepen.io/supah/

-->
<div class="menu">
  <div class="menu--item">
    <div class="menu--word">Super -&nbsp;</div>
  </div>
</div>
body {
  font-family: 'Titillium Web', sans-serif;
  font-size: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  user-select: none;
}

.menu--item {
  white-space: nowrap;
  display: flex;
  flex-wrap: nowrap;
  cursor: pointer;
  text-shadow: 5px 5px rgb(255, 255, 255), 5px 5px rgba(0, 0, 0, .1), 10px 10px rgba(0, 0, 0, .1);
}
View Compiled
/*--------------------
Vars
--------------------*/
let speed = 0
let acc = 0
let hover = false
let width
let times
let cloned = []

const item = document.querySelector('.menu--item')
const word = item.querySelector('.menu--word')


/*--------------------
Calculate
--------------------*/
const calculate = () => {
  console.log('cloned', cloned)
  cloned.forEach(i => {
    i.parentNode.removeChild(i)
  })
  cloned = []
  
  width = Math.ceil(word.clientWidth)
  times = Math.ceil(window.innerWidth / width)
  
  item.style.width = `${(times + 1) * width}px`

  for (let i = 0; i < times + 1; i++) {
    const clone = word.cloneNode(true)
    word.parentNode.appendChild(clone)
    cloned.push(clone)
  }
}
 

/*--------------------
Listeners
--------------------*/
const handleMouse = bool => hover = bool
item.addEventListener('mouseenter', () => {handleMouse(true)})
item.addEventListener('touchstart', () => {handleMouse(true)})
item.addEventListener('mouseleave', () => {handleMouse(false)})
item.addEventListener('touchend', () => {handleMouse(false)})
window.addEventListener('resize', calculate)
window.addEventListener('load', calculate)


/*--------------------
Animate
--------------------*/
const animate = () => {
  // Acceleration
  acc += 0.1
  if (hover) {
    acc -= 0.35
  }
  
  // Min/Max accelearion
  acc = Math.min(13, Math.max(0, acc))
  
  // Add acceleration to speed
  speed += acc
  
  // Text Loop
  if (speed >= width) {
    speed = 0
  }
  
  // CSS Text
  item.style.transform = `translateX(${-speed}px) skewX(${-2 * acc}deg)`
  
  // RaF
  requestAnimationFrame(animate)
}
animate()
View Compiled

External CSS

  1. https://fonts.googleapis.com/css2?family=Titillium+Web:wght@700&amp;display=swap

External JavaScript

This Pen doesn't use any external JavaScript resources.