SVG Pointless Robots

index.html

<svg width="840" height="600" viewBox="0 0 840 600">
<defs>
</defs>
  <g class="conveyorGroup">
<path class="conveyor" fill="none" stroke="#343434" stroke-width="18" stroke-miterlimit="10" d="M724.8,568H496.9c-28.5,0-51.9-23.3-51.9-51.9v0
	c0-28.5,23.3-51.9,51.9-51.9h227.8c28.5,0,51.9,23.3,51.9,51.9v0C776.6,544.7,753.3,568,724.8,568z"/>
<path class="wheelL" fill="#343434" d="M527,521v-8h-7c-0.5-3.6-1.8-7-3.7-9.9l5.4-5.4l-5.7-5.7l-5.2,5.2c-2.6-2-5.6-3.4-8.9-4.2V486h-8v6.6
	c-4.2,0.5-8.2,2.1-11.4,4.5l-5-5l-5.7,5.7l5.1,5.1c-2,3-3.4,6.4-3.9,10.2H467v8h6.4c0.7,3.5,2.2,6.7,4.3,9.4l-4.6,4.6l5.7,5.7
	l4.8-4.8c3.1,2,6.6,3.4,10.4,3.8v6.3h8v-6.8c2.9-0.7,5.5-1.9,7.9-3.5l5,5l5.7-5.7l-4.9-4.9c2-2.7,3.4-5.8,4.1-9.2H527z M510.3,516.1
	c0,7.5-6.1,13.7-13.7,13.7s-13.7-6.1-13.7-13.7s6.1-13.7,13.7-13.7S510.3,508.6,510.3,516.1z"/>
<path class="wheelR" fill="#343434" d="M754,521v-8h-6.6c-0.5-3.6-1.8-7-3.7-9.9l5.4-5.4l-5.7-5.7l-5.4,5.2c-2.6-2-5-3.4-9-4.2V486h-8v6.6
	c-4,0.5-8,2.1-11.3,4.5l-4.9-5l-5.6,5.7l5.1,5.1c-2,3-3.4,6.4-3.9,10.2H694v8h6.8c0.7,3.5,2.2,6.7,4.3,9.4l-4.6,4.6l5.7,5.7l4.7-4.8
	c3.1,2,7.3,3.4,10.3,3.8v6.3h8v-6.8c3-0.7,5.7-1.9,8.1-3.5l5.1,5l5.7-5.7l-4.9-4.9c2-2.7,3.4-5.8,4.1-9.2H754z M737.6,516.1
	c0,7.5-6.1,13.7-13.7,13.7s-13.7-6.1-13.7-13.7s6.1-13.7,13.7-13.7S737.6,508.6,737.6,516.1z"/>
  </g>


  <g class="shoulderGroup">
<line class="shoulder" fill="none" stroke="#E9B400" stroke-width="140" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="229" y1="350" x2="157.5" y2="502.1"/>
  </g>
<g class="armGroup">
<line class="arm" fill="none" stroke="#343434" stroke-width="80" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="548" y1="86" x2="229" y2="350"/>
  </g>
<circle class="shoulderJoint" fill="#E9B400" stroke="#ededed" stroke-width="10" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" cx="229" cy="350" r="20.7"/>
  <g class="forearmGroup">
<line class="forearm" fill="none" stroke="#E9B400" stroke-width="40" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="520" y1="90" x2="520" y2="282"/>
  </g>  
<circle class="elbowJoint" fill="#E9B400" stroke="#ededed" stroke-width="10" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" cx="548" cy="86" r="20.7"/>
<g class="pincerGroup">
	<polygon class="pincerL" fill="#343434" points="29.7,69 64.3,118.7 64,137.9 0,65.6 65.6,0 83.9,18.3 	"/>
	<polygon class="pincerR" fill="#343434" points="144.2,69 109.6,118.7 109.9,137.9 173.9,65.6 108.3,0 90,18.3 	"/>
</g>
<circle class="pincerJoint" fill="#343434" stroke="#ededed" stroke-width="10" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" cx="548" cy="278" r="20.7"/>
<path class="base" fill="#343434" stroke="#ededed" stroke-width="4" d="M290.9,577.5H24.1c-5.6,0-10.1-4.5-10.1-10.1V436.9c0-5.6,4.5-10.1,10.1-10.1h266.8c5.6,0,10.1,4.5,10.1,10.1
	v130.5C301,572.9,296.5,577.5,290.9,577.5z"/>
  <!--circle class="ball" fill="darkorange" cx="520" cy="444" r="10"/>
  <rect class="xball" x="510" y="432" fill="#2967A7"  width="20" height="20"/-->
  <path class="ball" fill="#2967A7" d="M525.4,413.3h-10.9v10.2h10.9V413.3L525.4,413.3z M517.3,420.3c-1,0-1.8-0.8-1.8-1.8c0-1,0.8-1.8,1.8-1.8
	c1,0,1.8,0.8,1.8,1.8C519.1,419.5,518.3,420.3,517.3,420.3z M522.6,420.3c-1,0-1.8-0.8-1.8-1.8c0-1,0.8-1.8,1.8-1.8s1.8,0.8,1.8,1.8
	C524.4,419.5,523.6,420.3,522.6,420.3z M537.7,435.9c-0.2-3.5-1.6-5.9-3.5-7.3c-1.5-1.2-3.2-1.8-4.6-2v-1.2h-19.4v1.2
	c-1.4,0.2-3,0.8-4.6,2c-1.8,1.4-3.3,3.9-3.5,7.3c-1.3,0.5-2.3,1.7-2.3,3.2c0,1.9,1.5,3.4,3.4,3.4v-1.5c-1,0-1.9-0.8-1.9-1.9
	c0-1,0.8-1.9,1.9-1.9c1,0,1.9,0.8,1.9,1.9h1.5c0-1.5-1-2.8-2.3-3.2c0.2-2.8,1.3-4.5,2.7-5.6c1-0.8,2.2-1.3,3.2-1.5v11.7h1.7v7.7
	c-2,0.7-3.4,2.6-3.4,4.7h10.1c0-2.2-1.4-4-3.4-4.7v-7.7h9.2v7.7c-2,0.7-3.4,2.6-3.4,4.7h10.1c0-2.2-1.4-4-3.4-4.7v-7.7h1.7v-11.7
	c1,0.2,2.2,0.6,3.2,1.5c1.4,1.1,2.5,2.8,2.7,5.6c-1.4,0.4-2.3,1.7-2.3,3.2h1.5c0-1,0.8-1.9,1.9-1.9c1,0,1.9,0.8,1.9,1.9
	c0,1-0.8,1.9-1.9,1.9v1.5c1.9,0,3.4-1.5,3.4-3.4C539.9,437.6,539,436.3,537.7,435.9z M518.5,435.4h-1.9v-1.9h1.9V435.4z
	 M518.5,433.1h-1.9v-1.9h1.9V433.1z M520.9,435.4H519v-1.9h1.9V435.4z M520.9,433.1H519v-1.9h1.9V433.1z M523.3,435.4h-1.9v-1.9h1.9
	V435.4z M523.3,433.1h-1.9v-1.9h1.9V433.1z M529.5,417c0-1.5-1.2-2.7-2.7-2.7v5.5C528.3,419.8,529.5,418.5,529.5,417z M513.1,419.8
	v-5.5c-1.5,0-2.7,1.2-2.7,2.7C510.4,418.5,511.6,419.8,513.1,419.8z"/>
</svg>

script.js

var xmlns="http://www.w3.org/2000/svg", select = function(s) {
      return document.querySelector(s);
    },  base = select('.base'), shoulder = select('.shoulder'), shoulderGroup = select('.shoulderGroup'), shoulderJoint = select('.shoulderJoint'), arm = select('.arm'), armGroup = select('.armGroup'), elbowJoint = select('.elbowJoint'), forearm = select('.forearm'), forearmGroup = select('.forearmGroup'), pincer = select('.pincer'), pincerGroup = select('.pincerGroup'), pincerJoint = select('.pincerJoint'), pincerL = select('.pincerL'), pincerR = select('.pincerR'), wheelL = select('.wheelL'), wheelR = select('.wheelR'), ball = select('.ball')

var pincerGroupWidth = 174;
var shoulderFollower = getFollower(shoulderGroup, '#6A3000')

var forearmFollower = getFollower(forearmGroup, 'red')

var pincerFollower = getFollower(forearmGroup, 'purple');


TweenMax.set(shoulder, {
  svgOrigin:'157.5 502.1'
})
TweenMax.set([forearm, pincerGroup,], {
  transformOrigin:'50% 0%'
})

function update(){


   CSSTransform.get(shoulderFollower).align({point:'50% 50%', elementPoint:"70 0", element:shoulder, duration:0});
CSSTransform.get(forearmFollower).align({point:'50% 50%', elementPoint:"0 0", element:forearm, duration:0});  
CSSTransform.get(pincerFollower).align({point:'50% 50%', elementPoint:"0 192", element:forearm, duration:0});  

  TweenMax.set(shoulderJoint, {
    attr:{
      cx:shoulderFollower._gsTransform.x,
      cy:shoulderFollower._gsTransform.y
    }    
  })
  TweenMax.set(arm, {
    attr:{
      x1:forearmFollower._gsTransform.x,
      y1:forearmFollower._gsTransform.y,               x2:shoulderFollower._gsTransform.x,
      y2:shoulderFollower._gsTransform.y
    }    
  })  
  
TweenMax.set(elbowJoint, {
  attr:{
      cx:forearmFollower._gsTransform.x,
      cy:forearmFollower._gsTransform.y,      
  }
})  
 TweenMax.set(pincerJoint, {
  attr:{
      cx:pincerFollower._gsTransform.x,
      cy:pincerFollower._gsTransform.y     
  }
})  
 
 TweenMax.set(pincerGroup, {
   x:pincerFollower._gsTransform.x - (pincerGroupWidth/2),
   y:pincerFollower._gsTransform.y
 })
 


}

function getFollower(cont, color){
	
	var c = document.createElementNS(xmlns, 'circle');
  cont.appendChild(c);
	TweenMax.set(c, {
		attr:{
			r:10,
			cx:0,
			cy:0
		},
		transformOrigin:'50% 50%',
		fill:(!color) ? 'rgba(75,75,75,1)' : color
		
	})
	
	return c
}

var wheelTimeline = new TimelineMax({repeat:-1});
wheelTimeline.timeScale(1.2)
wheelTimeline.to([wheelL, wheelR], 4, {
  rotation:-360,
  transformOrigin:'50% 50%',
  ease:Linear.easeNone
})
var mechTimeline = new TimelineMax({repeat:-1, onUpdate:update});
mechTimeline.timeScale(1.2)
mechTimeline.set(shoulder, {
  rotation:-23
})
.set(pincerL, {
  rotation:-5,
  transformOrigin:'100% 0%'
})
.set(pincerR, {
  rotation:5,
  transformOrigin:'0% 0%'
})
.to(forearm, 1, {
  attr:{
    y1:'-=50',
    y2:'-=50'
  },
  ease:Elastic.easeOut

}) 
.to(ball, 1, {
  attr:{
    //cy:'-=50'
  },
  y:'-=50',
  ease:Elastic.easeOut
}, '-=1')
.to(forearm, 1, {
  attr:{
    //x1:300,
    x1:'+=200',
    x2:'+=200'
  },
  //ease:Elastic.easeOut
  ease:Power2.easeInOut

})
.to(ball, 1, {
  attr:{
    //cx:'+=200'
  },
  x:'+=200',
  ease:Power2.easeInOut
}, '-=1')
.to(forearm, 1, {
  attr:{
    //x1:300,
    y1:'+=50',
    y2:'+=50'
  },
  //ease:Elastic.easeOut
  ease:Power2.easeInOut

})
.to(ball, 1, {
  attr:{
    //cy:'+=50'
  },
  y:'+=50',
  ease:Power2.easeInOut
}, '-=1')
.to(ball, 6, {
  attr:{
    //cx:'-=200'
  },
  x:'-=200',
  ease:Linear.easeNone
})
.to(pincerL, 0.5, {
  rotation:0,
  transformOrigin:'100% 0%'
}, '-=6.1')
.to(pincerR, 0.5, {
  rotation:0,
  transformOrigin:'0% 0%'
}, '-=6.1')
.to(forearm, 1, {
  attr:{
    //x1:300,
    y1:'-=50',
    y2:'-=50'
  },
  //ease:Elastic.easeOut
  ease:Power2.easeInOut

},'-=5.9')
.to(forearm, 3, {
  attr:{
    //x1:300,
    x1:'-=200',
    x2:'-=200'
  },
  //ease:Elastic.easeOut
  ease:Power2.easeInOut

}, '-=5.5')
.to(pincerGroup, 2, {
  rotation:-30,
 
  ease:Power1.easeIn
},'-=5.7')
 .to(pincerGroup, 1, {
  rotation:0,
 
  ease:Power2.easeInOut
},'-=3.5')
 .to(forearm, 1, {
  attr:{
    //x1:300,
    y1:'+=50',
    y2:'+=50'
  },
  //ease:Elastic.easeOut.config(1, 0.7)
  ease:Power2.easeInOut

},'-=1')

.to(forearm, 1, {
  rotation:-23,
  //ease:Elastic.easeOut.config(1, 0.7)
  ease:Power1.easeInOut
},'-=5')
.to(forearm, 1, {
  rotation:0,
  //ease:Elastic.easeOut.config(1, 0.7)
  ease:Power1.easeInOut
},'-=4')
.to(shoulder, 2, {
  rotation:0,
  ease:Power4.easeInOut
},'-=8.5')
.to(shoulder, 2, {
  rotation:-23,
  ease:Power1.easeInOut
},'-=5')

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/1.17.0/TweenMax.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/CSSTransform.min.js?r=5"></script>

style.css

body{
  background-color:#e2eded;
  overflow:hidden;
    display: flex;
  align-items: center;
  justify-content: center; 
}
body, html {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
}

svg{
  width:100%;
  height:100%%;
  overflow: visible;
}

svg-pointless-robots.markdown

SVG Pointless Robots

A pointless animation for a pointless task.

The little robot is designed by Ricardo Moreira https://thenounproject.com/term/robot/11018/

A Pen by Chris Gannon on CodePen.

License.