Rotating Words with jQuery Animations

Question

I want to create a typography effect and want to rotate a part of sentence. I have tried using jQuery animations.

I want to animate word up. Here is my code

window.setInterval(function() {
  $("#tchange").animate({
    "top": "-=15px"
  }, 100).fadeOut("fast");
  $('#tchange').text("Xyz").css('top', '-10px').slideDown("slow");
}, 2000);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1 class="remove-bottom" style="margin-top: 40px">
        Get on the Current Release.<br>
        Boost your 
        <span id="tchange">
            Competitiveness
        </span>
    </h1>

Answer 1

One good way is by using css: by changing opacity and rotate properties.

.rw-words {
  display: inline;
  text-indent: 10px;
}
.rw-words-1 span {
  position: absolute;
  opacity: 0;
  overflow: hidden;
  color: #6b969d;
  -webkit-animation: rotateWord 18s linear infinite 0s;
  -moz-animation: rotateWord 18s linear infinite 0s;
  -o-animation: rotateWord 18s linear infinite 0s;
  -ms-animation: rotateWord 18s linear infinite 0s;
  animation: rotateWord 18s linear infinite 0s;
}
.rw-words-1 span:nth-child(2) {
  -webkit-animation-delay: 3s;
  -moz-animation-delay: 3s;
  -o-animation-delay: 3s;
  -ms-animation-delay: 3s;
  animation-delay: 3s;
  color: #6b889d;
}
.rw-words-1 span:nth-child(3) {
  -webkit-animation-delay: 6s;
  -moz-animation-delay: 6s;
  -o-animation-delay: 6s;
  -ms-animation-delay: 6s;
  animation-delay: 6s;
  color: #6b739d;
}
.rw-words-1 span:nth-child(4) {
  -webkit-animation-delay: 9s;
  -moz-animation-delay: 9s;
  -o-animation-delay: 9s;
  -ms-animation-delay: 9s;
  animation-delay: 9s;
  color: #7a6b9d;
}
.rw-words-1 span:nth-child(5) {
  -webkit-animation-delay: 12s;
  -moz-animation-delay: 12s;
  -o-animation-delay: 12s;
  -ms-animation-delay: 12s;
  animation-delay: 12s;
  color: #8d6b9d;
}
@keyframes rotateWord {
  0% {
    opacity: 0;
    transform: rotate(0deg);
  }
  2% {
    opacity: 1;
    transform: transform: rotate(10deg);
  }
  5% {
    opacity: 1;
    transform: transform: rotate(20deg);
  }
  17% {
    opacity: 0.5;
    transform: transform: rotate(30deg);
  }
  25% {
    opacity: 0;
    transform: rotate(90deg);
  }
  70% {
    opacity: 0;
    transform: rotate(180deg);
  }
  100% {
    opacity: 0;
    transform: rotate(275deg);
  }
}

<h1 class="remove-bottom" style="margin-top: 40px">Get on the Current Eagle Release.<br>Boost your<div class="rw-words rw-words-1">
						<span>Competitiveness</span>
						<span>abc</span>
						<span>def</span>
						<span>ghi</span>
						<span>jkl</span>
					</div>
    
    </h1>

but, ofcourse you can use jQuery too (but it wil use more memory):

var degrees = 0,
  timer = 1; //Change timer to change FPS

setInterval(function() {
  if (degrees < 359) {
    degrees++;
  } else {
    degrees = 0;
  }

  $('.rw-words-1 span').css('transform', 'rotate(' + degrees + 'deg)'); //.css('opacity',degrees/359+'');

}, timer);

.rw-words {
  display: inline;
  text-indent: 10px;
}
.rw-words-1 span {
  position: absolute;
  opacity: 0;
  overflow: hidden;
  color: #6b969d;
  -webkit-animation: rotateWord 18s linear infinite 0s;
  -moz-animation: rotateWord 18s linear infinite 0s;
  -o-animation: rotateWord 18s linear infinite 0s;
  -ms-animation: rotateWord 18s linear infinite 0s;
  animation: rotateWord 18s linear infinite 0s;
}
.rw-words-1 span:nth-child(2) {
  -webkit-animation-delay: 3s;
  -moz-animation-delay: 3s;
  -o-animation-delay: 3s;
  -ms-animation-delay: 3s;
  animation-delay: 3s;
  color: #6b889d;
}
.rw-words-1 span:nth-child(3) {
  -webkit-animation-delay: 6s;
  -moz-animation-delay: 6s;
  -o-animation-delay: 6s;
  -ms-animation-delay: 6s;
  animation-delay: 6s;
  color: #6b739d;
}
.rw-words-1 span:nth-child(4) {
  -webkit-animation-delay: 9s;
  -moz-animation-delay: 9s;
  -o-animation-delay: 9s;
  -ms-animation-delay: 9s;
  animation-delay: 9s;
  color: #7a6b9d;
}
.rw-words-1 span:nth-child(5) {
  -webkit-animation-delay: 12s;
  -moz-animation-delay: 12s;
  -o-animation-delay: 12s;
  -ms-animation-delay: 12s;
  animation-delay: 12s;
  color: #8d6b9d;
}
@-webkit-keyframes rotateWord {
  0% {
    opacity: 0;
  }
  2% {
    opacity: 0;
  }
  5% {
    opacity: 1;
  }
  17% {
    opacity: 0.5;
  }
  20% {
    opacity: 0;
  }
  80% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@-moz-keyframes rotateWord {
  0% {
    opacity: 0;
  }
  2% {
    opacity: 0;
  }
  5% {
    opacity: 1;
  }
  17% {
    opacity: 0.5;
  }
  20% {
    opacity: 0;
  }
  80% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@-o-keyframes rotateWord {
  0% {
    opacity: 0;
  }
  2% {
    opacity: 0;
  }
  5% {
    opacity: 1;
  }
  17% {
    opacity: 0.5;
  }
  20% {
    opacity: 0;
  }
  80% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@-ms-keyframes rotateWord {
  0% {
    opacity: 0;
  }
  2% {
    opacity: 0;
  }
  5% {
    opacity: 1;
  }
  17% {
    opacity: 0.5;
  }
  20% {
    opacity: 0;
  }
  80% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes rotateWord {
  0% {
    opacity: 0;
  }
  2% {
    opacity: 1;
  }
  5% {
    opacity: 1;
  }
  17% {
    opacity: 0.5;
  }
  25% {
    opacity: 0;
  }
  70% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1 class="remove-bottom" style="margin-top: 40px">Get on the Current Eagle Release.<br>Boost your<div class="rw-words rw-words-1">
						<span>Competitiveness</span>
						<span>abc</span>
						<span>def</span>
						<span>ghi</span>
						<span>jkl</span>
					</div>
    
    </h1>

Answer 2

jQuery does not support CSS3 animating. You'll need to either animate purely with CSS, use jQuery to swap CSS classes causing the CSS animation effect or quickly increment the inline CSS3 animation property on the element (like how animating in jQuery actually works).

Eg.

var x=0, timer=1; //Change timer to change FPS

setInterval(function() { 
    x++;
    $('#myelement').css('-webkit-transform', 'scale(' + x + ')'); 
}, timer);