JSFiddle - React, Tailwind, and code Playground

by jt3k

HTML

<span>Choose</span>
<span id="changer">
  <span id="inner">
    <span>life.</span>
    <span>a job.</span>
    <span>a career.</span>
    <span>a family,</span>
  </span>
</span>

CSS

#changer {
	vertical-align: top;
	display: inline-block;
	overflow: hidden;
	height: 1em;
	background-color: yellow;
	
	span {
		display: block;
	}
}

#inner {
	transition: 1s;
}

JavaScript

c = 1;
setInterval(() => {
   inner.style.transform = `translateY(calc((-100% / 4) * ${c++ % 4}))`
}, 1000)