Make words pulsate - grow larger and sharpen, get smaller and become blurred, and move

Question

http://codepen.io/anon/pen/Mwjjgx

I have a difficult task as you saw in the title of the question.

I'm doing a plugin that makes the words move in the screen (I'm using jqfloat.js for this), increase in size with a sharpen effect, and decrease in size with a blur effect.

I've already searched a lot, but I didn't find anything like this, so I'm building one.

As you can see in the CodePen, I can make them move and become blurred, I am now having difficulty doing the rest.

How should I proceed with this task? Is there a plugin to help me with this that I did not find?

In the CodePen... between the lines 1-145 is the jqFloat plugin, and the rest is my code.

/*
 * jqFloat.js - jQuery plugin
 * A Floating Effect with jQuery!
 *
 * Name:			jqFloat.js
 * Author:		Kenny Ooi - http://www.inwebson.com
 * Date:			December 6, 2012
 * Version:		1.1
 * Example:		http://www.inwebson.com/demo/jqfloat/
 *
 */

(function($) {

  //plugin methods
  var methods = {

    init: function(options) { //object initialize
      //console.log('init');
      return this.each(function() {
        //define element data
        $(this).data('jSetting', $.extend({}, $.fn.jqFloat.defaults, options));
        $(this).data('jDefined', true);

        //create wrapper
        var wrapper = $('<div/>').css({
          'width': $(this).outerWidth(true),
          'height': $(this).outerHeight(true),
          'z-index': $(this).css('zIndex')
        });

        //alert($(this).position().top);
        if ($(this).css('position') == 'absolute')
          wrapper.css({
            'position': 'absolute',
            'top': $(this).position().top,
            'left': $(this).position().left
          });
        else
          wrapper.css({
            'float': $(this).css('float'),
            'position': 'relative'
          });

        //check for margin auto solution
        if (($(this).css('marginLeft') == '0px' || $(this).css('marginLeft') == 'auto') && $(this).position().left > 0 && $(this).css('position') != 'absolute') {
          wrapper.css({
            'marginLeft': $(this).position().left
          });
        }


        $(this).wrap(wrapper).css({
          'position': 'absolute',
          'top': 0,
          'left': 0
        });

        //call play method
        //methods.play.apply($(this));
      });
    },
    update: function(options) {
      $(this).data('jSetting', $.extend({}, $.fn.jqFloat.defaults, options));
    },
    play: function() { //start floating
      if (!$(this).data('jFloating')) {
        //console.log('play');
        $(this).data('jFloating', true);
        //floating(this);
      }
      floating(this);
    },
    stop: function() { //stop floating
      //console.log('stop');
      this.data('jFloating', false);
    }
  }

  //private methods
  var floating = function(obj) {
    //generate random position
    var setting = $(obj).data('jSetting');
    var newX = Math.floor(Math.random() * setting.width) - setting.width / 2;
    var newY = Math.floor(Math.random() * setting.height) - setting.height / 2 - setting.minHeight;
    var spd = Math.floor(Math.random() * setting.speed) + setting.speed / 2;

    //inifnity loop XD	
    $(obj).stop().animate({
      'top': newY,
      'left': newX
    }, spd, function() {

      if ($(this).data('jFloating'))
        floating(this);
      else
        $(this).animate({
          'top': 0,
          'left': 0
        }, spd / 2);
    });
  }

  $.fn.jqFloat = function(method, options) {

    var element = $(this);

    if (methods[method]) {

      if (element.data('jDefined')) {
        //reset settings
        if (options && typeof options === 'object')
          methods.update.apply(this, Array.prototype.slice.call(arguments, 1));
      } else
        methods.init.apply(this, Array.prototype.slice.call(arguments, 1));

      methods[method].apply(this);

    } else if (typeof method === 'object' || !method) {
      if (element.data('jDefined')) {
        if (method)
          methods.update.apply(this, arguments);
      } else
        methods.init.apply(this, arguments);

      methods.play.apply(this);
    } else
      $.error('Method ' + method + ' does not exist!');

    return this;
  }

  $.fn.jqFloat.defaults = {
    width: 100,
    height: 100,
    speed: 1000,
    minHeight: 0
  }

})(jQuery);



+ function($) {
  'use strict';

  var Animate = function(element) {
    this.element = element;
    this.topPosition = element.data('position')[0];
    this.leftPosition = element.data('position')[1];
    this.fontSize = element.data('size') + 'px' || '20px';
    this.shadow = element.data('shadow') || false;

    this.setPosition();
    this.setSize();
    this.startFloat();
    this.startPulsete();
  };

  Animate.prototype.setSize = function() {

    this.element.css('fontSize', this.fontSize);
  };

  Animate.prototype.setPosition = function() {
    this.element.css('top', this.topPosition);
    this.element.css('left', this.leftPosition);
  };

  Animate.prototype.setBeyond = function() {
    this.element.css('z-index', '99999')
  };

  Animate.prototype.startFloat = function() {
    this.element.jqFloat({
      width: 50,
      height: 50,
      speed: 5000
    });
  };

  Animate.prototype.startPulsete = function() {
    this.element.css('color', 'transparent');
    this.element.css('textShadow', '0 0 5px rgba(255, 255, 255, 0.9)');
  };

  $(window).on('load', function() {
    $('[data-ride="animate"]').each(function() {
      var element = $(this);
      var animation = new Animate(element);
    });

  });

}(jQuery);

body {
  background: black;
}
ul {
  list-style: none;
}
li {
  position: absolute;
  color: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

<ul>
  <li data-ride="animate" data-size="40" data-position="[50, 50]">ONE</li>
  <li data-ride="animate" data-size="25" data-position="[250, 580]">TWO</li>
  <li data-ride="animate" data-size="75" data-position="[150, 800]">Three</li>
  <li data-ride="animate" data-size="20" data-position="[50, 235]">Four</li>
</ul>

Answer 1

You already have the floating part working. So it all comes down to changing the blur or textShadow property. First, prepare an array to hold the different blur-radius values like

var blurRadiusA = ['0px','5px','10px','15px','20px' ];

Then, in the end of your private floating function, have

var randomIndex = Math.floor(Math.random()*blurRadiusA.length);
$(obj).css('textShadow', '0 0 '+blurRadiusA[randomIndex]+' rgba(255, 255, 255, 0.9)');

Please note, this will randomly change the 'bluriness' every animate interval. If you wish to have smooth transitions between bluriness, thats a different story.

http://codepen.io/anon/pen/LVRRVZ

Update

For smooth transitions, a slightly differet approach should be taken. Add a new private method

    var pulsating = function(obj, radius, direction, currentInterval) {
        //direction is simply to either increment/decrement
        radius += direction;
        if(radius == 20){
            direction = -1;
        }
        else if(radius == 0){
            direction = 1;
        }

        $(obj).css({
            'textShadow': '0 0 '+radius+'px rgba(255, 255, 255, 0.9)'
        });
        if(typeof currentInterval !== 'undefined'){
            clearInterval(currentInterval);
        }
        currentInterval = setInterval(function() {
            pulsating(obj, radius, direction, currentInterval);
        }, 250);
    }

This basically updates the elements textShadow every interval in a transitional(non-random) way.

http://codepen.io/anon/pen/qdaqxy