<input id="blur-on" type="checkbox" checked /><label for="blur-on"> Motion Blur</label> <br />
<input id="image-on" name="mode" type="radio" /><label for="image-on"> Use Image</label> 
<input id="text-on" name="mode" type="radio" checked /><label for="text-on"> Use Text</label>

<div class="object">
  <div class="blur-outer">
    <div class="blur-inner">
      <span class="test-text"><span class="small">Motion</span> <br/> Blur</span>
      <img class="test-image" src="http://lorempixel.com/200/200" alt="" />
    </div>
  </div>
</div>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <defs>
      <filter id="blur">
          <feGaussianBlur id="blur-filter" in="SourceGraphic" stdDeviation="12,0" />
      </filter>
  </defs>
</svg>

debug=false

svg
  display none

body
  background black
  font-size 14px
  font-weight bold
  color white
  overflow hidden

.object
  position absolute
  left 40%
  top 40%
  text-transform uppercase
  padding 20px
  font-size 80px
  if debug
      background rgba(255,0,0,0.2)

#blur-on:checked~.object>.blur-outer
  filter url('#blur')

.test-image
  display none

#image-on:checked~.object 
  .test-image
    display block
  .test-text
    display none

.blur-outer
  transform-origin 50% 50%
  if debug
    background rgba(0,255,0,0.2)
  
.blur-inner
  transform-origin 50% 50%
  animation text-gfx-anim 3s 
  animation-fill-mode forwards
  if debug
    background rgba(0,0,255,0.2)

.small
  font-size 0.69em

input
  margin 10px
View Compiled

$(document).ready(function(){
  var $obj=$(".object")
    ,$outer=$obj.children(".blur-outer")
    ,$inner=$outer.children(".blur-inner")
    ,blur=$("#blur-filter").get(0)
  ;
  
  function setBlur(v){
    blur.setAttribute("stdDeviation", v);
  }
  function setMotionBlur(angle,dist){
    TweenMax.set($outer,{
      rotation:angle+"rad",
      force3D:true
    })
    TweenMax.set($inner,{
      rotation:-angle+"rad",
      force3D:true
    })
    setBlur(dist+",0");
  }
  
  function anim(){
    TweenMax.to($obj,0.2+(Math.random()*0.4),{
      x:((Math.random()*200)-100)+"%",
      y:((Math.random()*200)-100)+"%",
      ease:Back.easeOut,
      onComplete:anim
    })
  }
  anim();
  
  function getPos(){
    return $obj.position();
  }
  var lastPos=getPos();
  
  function update(){
    var pos=getPos();
    var dx=pos.left-lastPos.left;
    var dy=pos.top-lastPos.top;
    var speed=Math.sqrt((dx*dx)+(dy*dy));
    var angle=Math.atan2(dy,dx);
    setMotionBlur(angle,speed);
    
    //setBlur(speed+","+0);
    
    lastPos=pos;requestAnimationFrame(update);
  }
  update();
})
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/gsap/1.15.1/TweenMax.min.js