How to get a series of elements to loop through showing only one at a time

Question

I am attempting to get my span elements agencyText to appear one at a time. Then at the end of the interval for the curr and next classes to be applied to properly position the current and next bit of text to appear.

As of now, I am getting them all shown at once. I created them with data attribute index values. However, I am unsure how to loop through them to get this to work correctly.

If you click this link there is an example of the left side of exactly what I am trying to do. It is the text rotated 90 degrees. Every four seconds the wording is updated.

Does anyone know how I can modify my code to replicate this?

UPDATE - showing DOM code of example.

var arr = $('.textContainer');
var arrLen = arr.length;
var i = 0;
var attr = $('agencyText').data('index');

var loop = function() {		
  var item = arr.eq(i);
  var description = item.find('.agencyText');

  description.addClass('curr');

  i = (i + 1) % arrLen;
};
loop();
setInterval(loop, 3000);

.digitalAgency {
    height: 20px;
    position: fixed;
    top: 50%;
    left: -45%;
    width: 100%;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 1px;
	-webkit-transition: opacity .5s;
    -o-transition: opacity .5s;
    transition: opacity .5s;
	-webkit-transition:opacity .5s;
	-o-transition:opacity .5s;
	transition:opacity .5s;
}
.digitalAgency .textContainer::before {
	content: "";
	position: absolute;
	width: 40px;
	height: 1px;
	background: #000;
	display: inline-block;
	top: 50%;
	margin-right: 20px;
	left: 33%;
}
.digitalAgency .textContainer {
    position: relative;
    width: 650px;
    height: 100%;
    left: 50%;
    -webkit-transform: translateX(-50%) rotate(-90deg);
    -ms-transform: translateX(-50%) rotate(-90deg);
    transform: translateX(-50%) rotate(-90deg);
    display: inline-block;
}
.digitalAgency, .agencyText {
    -webkit-animation-duration: .45s;
    animation-duration: .45s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
}
.digitalAgency .textContainer .agencyText {
    padding-left: 60px;
    position: absolute;
    visibility: hidden;
    width: 100%;
    height: 100%;
    left: 33%;
}
.digitalAgency .textContainer .agencyText.curr {
	visibility: visible;
}
.digitalAgency .agencyText.curr{visibility:visible;-webkit-animation-name:dgAgnCurr;animation-name:dgAgnCurr}
.digitalAgency .agencyText.next{visibility:visible;-webkit-animation-name:dgAgnNext;animation-name:dgAgnNext}
@-webkit-keyframes dgAgnCurr{from{-webkit-transform:translateY(0);transform:translateY(0)}to{-webkit-transform:translateY(-100%);transform:translateY(-100%)}}
@keyframes dgAgnCurr{from{-webkit-transform:translateY(0);transform:translateY(0)}to{-webkit-transform:translateY(-100%);transform:translateY(-100%)}}
@-webkit-keyframes dgAgnNext{from{-webkit-transform:translateY(100%);transform:translateY(100%)}to{-webkit-transform:translateY(0);transform:translateY(0)}}
@keyframes dgAgnNext{from{-webkit-transform:translateY(100%);transform:translateY(100%)}to{-webkit-transform:translateY(0);transform:translateY(0)}}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="digitalAgency">
  <span class="textContainer">
    <span data-index="0" class="agencyText">The first one</span>
    <span data-index="1" class="agencyText">The second one</span>
    <span data-index="2" class="agencyText">The third one</span>
    <span data-index="3" class="agencyText">The fourth one</span>
  </span>
</div>

Answer 1

I have updated your javascript code. try like this

var arr = $('.textContainer > span');
var arrLen = arr.length;
var i = 0;

var loop = function() {		
  $('.textContainer > span').removeClass('curr');
  $('span[data-index = '+i+']').addClass('curr');
  
  i = (i + 1) % arrLen;
  
};
loop();
setInterval(loop, 3000);

.digitalAgency {
    height: 20px;
    position: fixed;
    top: 50%;
    left: -45%;
    width: 100%;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 1px;
	-webkit-transition: opacity .5s;
    -o-transition: opacity .5s;
    transition: opacity .5s;
	-webkit-transition:opacity .5s;
	-o-transition:opacity .5s;
	transition:opacity .5s;
}
.digitalAgency .textContainer::before {
	content: "";
	position: absolute;
	width: 40px;
	height: 1px;
	background: #000;
	display: inline-block;
	top: 50%;
	margin-right: 20px;
	left: 33%;
}
.digitalAgency .textContainer {
    position: relative;
    width: 650px;
    height: 100%;
    left: 50%;
    -webkit-transform: translateX(-50%) rotate(-90deg);
    -ms-transform: translateX(-50%) rotate(-90deg);
    transform: translateX(-50%) rotate(-90deg);
    display: inline-block;
}
.digitalAgency, .agencyText {
    -webkit-animation-duration: .45s;
    animation-duration: .45s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
}
.digitalAgency .textContainer .agencyText {
    padding-left: 60px;
    position: absolute;
    visibility: hidden;
    width: 100%;
    height: 100%;
    left: 33%;
}
.digitalAgency .textContainer .agencyText.curr {
	visibility: visible;
}
.digitalAgency .agencyText.curr{visibility:visible;-webkit-animation-name:dgAgnCurr;animation-name:dgAgnCurr}
.digitalAgency .agencyText.next{visibility:visible;-webkit-animation-name:dgAgnNext;animation-name:dgAgnNext}
@-webkit-keyframes dgAgnCurr{from{-webkit-transform:translateY(0);transform:translateY(0)}to{-webkit-transform:translateY(-100%);transform:translateY(-100%)}}
@keyframes dgAgnCurr{from{-webkit-transform:translateY(0);transform:translateY(0)}to{-webkit-transform:translateY(-100%);transform:translateY(-100%)}}
@-webkit-keyframes dgAgnNext{from{-webkit-transform:translateY(100%);transform:translateY(100%)}to{-webkit-transform:translateY(0);transform:translateY(0)}}
@keyframes dgAgnNext{from{-webkit-transform:translateY(100%);transform:translateY(100%)}to{-webkit-transform:translateY(0);transform:translateY(0)}}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="digitalAgency">
  <span class="textContainer">
    <span data-index="0" class="agencyText">The first one</span>
    <span data-index="1" class="agencyText">The second one</span>
    <span data-index="2" class="agencyText">The third one</span>
    <span data-index="3" class="agencyText">The fourth one</span>
  </span>
</div>