How do I create a vertical jQuery or CSS slider for an inline element

Question

So basically I saw this really cool CSS animation on code pen ( https://codepen.io/yoannhel/pen/sJpDj ) and I've been trying to replicate it so that it would work for me. I was able to replicate the animation on the brackets with CSS fairly easily, but I have absolutely no idea how to do the transition between changing text like they did. I want to replicate the way that new text slides down into the visible inline view frame and then slides out.

I would prefer if this had a CSS only solution but at this point I'll take anything.

This is the code I have so far

 var users = ["bob", "john", "world", "everyone"]; counter = 0; setInterval(function() { //slide down off screen //Change Value if (counter >= (users.length - 1)) { elUser.textContent = users[counter]; counter = 0; } else { elUser.textContent = users[counter]; counter += 1 } //reset to top $("#user").animate({ bottom: '-=120' }); //slide down on screen }, 2000); 

 @keyframes WelcomeBrackets { 0% { color: rgba(242, 12, 54, 0); } 50% { color: rgba(242, 12, 54, 1); } 100% { color: rgba(242, 12, 54, 0); } } #user { display: inline; overflow: hidden; } .bracket { animation: WelcomeBrackets 2s; animation-iteration-count: infinite; color: #2603c1; } 

 <h1><span class="bracket">[ </span> Welcome <span id="user">User</span> <span class="bracket"> ]</span> </h1> 

Answer 1

You did not call the correct id. change your Div ID as elUser and it will work.

 var users = ["bob", "john", "world", "everyone"]; counter = 0; setInterval(function() { //slide down off screen //Change Value if (counter >= (users.length - 1)) { elUser.textContent = users[counter]; counter = 0; } else { elUser.textContent = users[counter]; counter += 1 } //reset to top $("#user").animate({ bottom: '-=120' }); //slide down on screen }, 2000); 

 @keyframes WelcomeBrackets { 0% { color: rgba(242, 12, 54, 0); } 50% { color: rgba(242, 12, 54, 1); } 100% { color: rgba(242, 12, 54, 0); } } #user { display: inline; overflow: hidden; } .bracket { animation: WelcomeBrackets 2s; animation-iteration-count: infinite; color: #2603c1; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <h1><span class="bracket">[ </span> Welcome <span id="elUser">User</span> <span class="bracket"> ]</span> </h1> 

You can get the output using Slide Up and Slide Down animation. To get the knowledge on that please refer the snippet below

 @keyframes WelcomeBrackets { 0% { color: rgba(242, 12, 54, 0); } 50% { color: rgba(242, 12, 54, 1); } 100% { color: rgba(242, 12, 54, 0); } } #user { display: inline; overflow: hidden; } .bracket { animation: WelcomeBrackets 2s; animation-iteration-count: infinite; color: #2603c1; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <h1><span class="bracket">[ </span> Welcome <span id="elUser">User</span> <span class="bracket"> ]</span> </h1> <script> var users = ["bob", "john", "world", "everyone"]; counter = 0; setInterval(function () { $('#elUser').slideDown(1000); if (counter >= (users.length - 1)) { elUser.textContent = users[counter]; $('#elUserelUser').slideDown(1000); counter = 0; } else { elUser.textContent = users[counter]; $('#elUser').slideUp(1000); counter += 1; } }, 2000); </script>