CSS3/Jquery text slide up animation missing extra frame

Question

I am trying to recreate the following slide up effect: http://sanfrancisco.themerella.com/

There's currently a missing extra slide up animation (after the slide in) the text has appeared on screen. As a result, it looks a bit jilted. Also there's a pause in the beginning which is a bit awkward. This is my code so far:

JQUERY

var count = -1;

function ticker() {
  var ticker = $('.keyword');
  var tickerLength = ticker.length - 1;
  count < tickerLength ? count++ : count = 0;
  ticker.removeClass('text-slide-in active').eq(count).addClass('text-slide-in active');
}
setInterval(ticker, 2000);

HTML

<header class="section-title section-title-default align-center ra_section_title_5a7d898037b3b vc_custom_1509637288809 text-slide-activated" data-plugin-textslide="true" data-plugin-textslide-options='{"element":"div","autoplay":true,"delay":2000}'>
  <div>
    <span class="typed-keywords">Connecting Brands with
                          <span class="keyword">YouTubers.</span>
    <span class="keyword">Creatives.</span>
    <span class="keyword">Infuencers.</span>
    </span>
  </div>
</header>

CSS3

.typed-keywords {
  display: inline-block;
  position: relative;
  -webkit-transition: width 0.6s cubic-bezier(0.8, 0, 0.2, 1);
  transition: width 0.6s cubic-bezier(0.8, 0, 0.2, 1);
  -webkit-transform-style: flat;
  transform-style: flat;
  -webkit-perspective: 600px;
  perspective: 600px
}

.typed-keywords .keyword {
  display: inline-block;
  white-space: nowrap;
  position: absolute;
  left: 0;
  top: auto;
  opacity: 0
}

.typed-keywords .keyword:first-child {
  position: relative;
  top: auto;
  left: auto;
  opacity: 1
}

.text-slide-activated .typed-keywords .keyword {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0
}

.text-slide-activated .typed-keywords .keyword.text-slide-up {
  -webkit-animation: textSlideUp 0.6s cubic-bezier(0.645, 0.045, 0.355, 1) both alternate;
  animation: textSlideUp 0.6s cubic-bezier(0.645, 0.045, 0.355, 1) both alternate
}

.text-slide-activated .typed-keywords .keyword.active {
  position: relative;
  display: inline-block;
  -webkit-animation: textSlideIn 0.6s 0.3s cubic-bezier(0.215, 0.61, 0.355, 1) both alternate;
  animation: textSlideIn 0.6s 0.3s cubic-bezier(0.215, 0.61, 0.355, 1) both alternate
}

@keyframes textSlideUp {
  0% {
    transform: translate3d(0, 0, 0) rotate3d(0, 0, 0, 0deg);
    opacity: 1
  }
  100% {
    transform: translate3d(0, -85%, 0) rotate3d(1, 0, 0, 35deg);
    opacity: 0
  }
}

@keyframes textSlideIn {
  0% {
    transform: translate3d(0, 85%, 0) rotate3d(1, 0, 0, -35deg);
    opacity: 0
  }
  100% {
    transform: translate3d(0, 0, 0) rotate3d(0, 0, 0, 0);
    opacity: 1
  }
}

Fiddle here: https://jsfiddle.net/pd3easvf/6/.

Answer 1

I have found a jquery plugin called wordsrotator that can do just that.

Sorry I put all in the snippet but I didn't find a CDN for the project.

(function($){$.fn.wordsrotator=function(options){var defaults={autoLoop:true,randomize:false,stopOnHover:false,changeOnClick:false,words:null,animationIn:"flipInY",animationOut:"flipOutY",speed:2000};var settings=$.extend({},defaults,options);var listItem
var array_bak=[];return this.each(function(){var el=$(this)
var cont=$("#"+el.attr("id"));var array=[];if((settings.words)||(settings.words instanceof Array)){array=$.extend(true,[],settings.words);if(settings.randomize)array_bak=$.extend(true,[],array);listItem=0
if(settings.randomize)listItem=Math.floor(Math.random()*array.length)
cont.html(array[listItem]);var rotate=function(){cont.html("<span class='wordsrotator_wordOut'><span>"+array[listItem]+"</span></span>");if(settings.randomize){array.splice(listItem,1);if(array.length==0)array=$.extend(true,[],array_bak);listItem=Math.floor(Math.random()*array.length);}else{if(array.length==listItem+1)listItem=-1;listItem++;}
$("<span class='wordsrotator_wordIn'>"+array[listItem]+"</span>").appendTo(cont);cont.wrapInner("<span class='wordsrotator_words' />");cont.find(".wordsrotator_wordOut").addClass("animated "+settings.animationOut);cont.find(".wordsrotator_wordIn").addClass("animated "+settings.animationIn);};cont.on("click",function(){if(settings.changeOnClick){rotate();return false;};});if(settings.autoLoop){var t=setInterval(rotate,settings.speed);if(settings.stopOnHover){cont.hover(function(){window.clearInterval(t)},function(){t=setInterval(rotate,settings.speed);});};}};});}}(jQuery));

$(function() {
  var words = [
    'YouTubers',
    'Creatives',
    'Influencers'
  ];

  $("#rotate").wordsrotator({
    words: words,
    animationIn: "fadeInDown",
    animationOut: "fadeOutDown",
  });
})

@charset "utf-8";
.wordsrotator_words{display:inline-block; position:relative; white-space:nowrap;  -webkit-transition:width 1s;  -moz-transition:width 1s;  -o-transition:width 1s;  transition:width 1s}
.wordsrotator_words .wordsrotator_wordOut, .wordsrotator_words .wordsrotator_wordIn{position:relative; display:inline-block; -webkit-animation-duration:1s; -webkit-animation-timing-function:ease; -webkit-animation-fill-mode:both; -moz-animation-duration:1s; -moz-animation-timing-function:ease; -moz-animation-fill-mode:both; -ms-animation-duration:1s; -ms-animation-timing-function:ease; -ms-animation-fill-mode:both}
.wordsrotator_words .wordsrotator_wordOut{left:0; top:0; position:absolute; display:inline-block}
.wordsrotator_words .wordsrotator_wordOut span{width:auto; position:relative}
.wordsrotator_words .wordsrotator_wordIn{opacity:0}

<header>
  <div>
    <span class="typed-keywords">Connecting Brands with <span id="rotate"></span> </span>
  </div>
</header>

<link href="https://fastcdn.org/Animate.css/3.4.0/animate.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://raw.githubusercontent.com/andreapace/wordsrotator/master/jquery.wordrotator.min.js"></script>
<link href="https://raw.githubusercontent.com/andreapace/wordsrotator/master/jquery.wordrotator.min.css" rel="stylesheet" />