Thursday Code Review: Text Animation


March 19, 2015

This week I wanted to show off a text animation I did for one our clients at Sputnik. Now I showed this a few weeks ago on CodePen and got a pretty good response. Here's the JavaScript:

// text rotator
textRotator = function(element) {
  var words = $(element),
    total = words.length - 1,
    position = 0,
    current = null,
    timer = null;
  $(element).first().addClass('active');
  var autoSlide = function() {
    words.removeClass('active');
    if (position === total) {
      position = 0;
    } else {
      position = position + 1;
    }
    //console.log(position);
    words.eq(position).addClass('active');
  };
  timer = setInterval(autoSlide, 3000);
};
$(document).ready(function() {
  textRotator('.change-text span');
});

The textRotator function takes care of the the interval and changing of class names.

Then using css transitions, we can change the clip and opacity property to reveal/hide the text like a mask.

span.active {
  @include transition(all, .85s);
  opacity: 1;
  clip: rect(0, 198px, 198px, 0px);
}

Here's the full demo:

See the Pen Rotating Text animation by Jason Weaver (@indyplanets) on CodePen.

Check it out in the wild on the Eduphoria site.

Latest Thoughts

Thanks for stopping by!