All Devices in SVG

All Devices in SVG.markdown

All Devices in SVG

A little morphing animation to represent different devices.

Inspired by this

A Pen by Chris Gannon on CodePen.

License.

index.html

<div class="container">
<svg version="1.1"
	 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/"
	 x="0px" y="0px" width="600px" height="600px" viewBox="0 0 600 600" enable-background="new 0 0 600 600" xml:space="preserve">
<defs>
  <clipPath id="monitorEdgeMask">
	<path class="monitorEdgeMask" fill="#494D5D" d="M559.7,79h-520C32.5,79,27,84.6,27,91.8V403h546V91.8C573,84.6,566.9,79,559.7,79z"/>    
  </clipPath>
	<clipPath id="laptopBaseMask">
<path class="laptopBaseMask" fill="#FFFAEB" d="M487,409v15.5c0,3.8-3.2,7.5-7,7.5H120c-3.8,0-7-3.7-7-7.5V409H487z"/>		
	</clipPath>		  	
	<clipPath id="monitorStandMask">
	<rect class="monitorStandMask" x="23" y="455" fill="#EA2877" width="550" height="102"/>
</clipPath>
<clipPath id="tabletContentGroupMask">
	<path class="tabletContentGroupMask" fill="#BDCCD4" d="M218.5,386.5v-203c0-2.8,2.3-5,5-5h153c2.8,0,5,2.3,5,5v203c0,2.8-2.3,5-5,5h-153
		C220.8,391.5,218.5,389.3,218.5,386.5z"/>  
  </clipPath>
</defs>


<g class="monitorGroup" opacity="1">
	<g class="monitorStandGroup" clip-path="url(#monitorStandMask)">
	<path class="monitorStand" fill="#FFFAEB" d="M386.3,512H374l-20.7-57h-106L226,512h-12.3c-2.6,0-4.7,1.9-4.7,4.5s2.1,4.5,4.7,4.5
		h172.7c2.6,0,4.7-1.9,4.7-4.5S388.9,512,386.3,512z"/>
		</g>
	<polygon class="monitorStandShadow" fill="#D9D7D3" points="357.4,467 242.6,467 247.1,455 353.1,455 	"/>
  <g class="monitorEdgeGroup" clip-path="url(#monitorEdgeMask)">
	<path class="monitorEdge" fill="#494D5D" d="M559.7,79h-520C32.5,79,27,84.6,27,91.8V403h546V91.8C573,84.6,566.9,79,559.7,79z"/>
	<path class="monitorScreen" fill="#BDCCD4" d="M544.5,383.3h-489c-3.8,0-7-3.1-7-7v-271c0-3.8,3.2-7,7-7h489c3.8,0,7,3.2,7,7v271
		C551.5,380.1,548.3,383.3,544.5,383.3z"/> 
<g class="monitorContentGroup" opacity="0.6">
	<path fill="#E5EBEE" d="M526.8,145H73.2c-3.2,0-5.7-2.6-5.7-5.7v-15.5c0-3.2,2.6-5.7,5.7-5.7h453.5c3.2,0,5.7,2.6,5.7,5.7v15.5
		C532.5,142.4,529.9,145,526.8,145z"/>
	<path fill="#8CA5B2" d="M157.9,364.5H73.1c-3.1,0-5.6-2.5-5.6-5.6v-58.7c0-3.1,2.5-5.6,5.6-5.6h84.7c3.1,0,5.6,2.5,5.6,5.6v58.7
		C163.5,362,161,364.5,157.9,364.5z"/>
	<path fill="#8CA5B2" d="M526.9,272.5H73.1c-3.1,0-5.6-2.5-5.6-5.6v-93.7c0-3.1,2.5-5.6,5.6-5.6h453.7c3.1,0,5.6,2.5,5.6,5.6v93.7
		C532.5,270,530,272.5,526.9,272.5z"/>
	<path fill="#E5EBEE" d="M530.5,306H190.2c-1.1,0-2-0.9-2-2v-7.5c0-1.1,0.9-2,2-2h340.3c1.1,0,2,0.9,2,2v7.5
		C532.5,305.1,531.6,306,530.5,306z"/>
	<path fill="#E5EBEE" d="M530.5,334.3H190.2c-1.1,0-2-0.9-2-2v-7.5c0-1.1,0.9-2,2-2h340.3c1.1,0,2,0.9,2,2v7.5
		C532.5,333.4,531.6,334.3,530.5,334.3z"/>
	<path fill="#E5EBEE" d="M530.5,364.5H190.2c-1.1,0-2-0.9-2-2V355c0-1.1,0.9-2,2-2h340.3c1.1,0,2,0.9,2,2v7.5
		C532.5,363.6,531.6,364.5,530.5,364.5z"/>	
</g>			
  </g>
	<path class="monitorBottom" fill="#FFFAEB" d="M573,403v39c0,7.1-6.1,13-13.3,13h-520c-7.2,0-12.7-5.9-12.7-13v-39H573z"/>

	<circle class="monitorLogo" fill="#A4ACBB" cx="300" cy="426" r="10"/>

</g>
<g class="laptopGroup" opacity="1">
	<!--path class="laptopEdge" fill="#FFFAEB" d="M468.5,175.5v226h-337v-226c0-3.9,3.2-7,7-7h323C465.3,168.5,468.5,171.6,468.5,175.5z"
		/-->
<path class="laptopEdgeLeft" fill="#FFFAEB" d="M310,401.5H131.5v-226c0-3.9,3.2-7,7-7H310"/>
<path class="laptopEdgeRight" fill="#FFFAEB" d="M290,168.5h171.5c3.8,0,7,3.1,7,7v226H290"/>
	<g class="laptopBaseGroup" clip-path="url(#laptopBaseMask)">
	<path class="laptopBase" fill="#FFFAEB" d="M487,409v15.5c0,3.8-3.2,7.5-7,7.5H120c-3.8,0-7-3.7-7-7.5V409H487z"/>
	</g>
	<polygon class="laptopTrackpad" fill="#A4ACBB" points="326.7,421.8 273.3,421.8 268.3,414.2 331.7,414.2 	"/>
<path class="laptopScreen" fill="#BDCCD4" d="M452.7,391.9H147.3c-3.8,0-7-3.1-7-7V185.6c0-3.8,3.2-7,7-7h305.3c3.9,0,7,3.2,7,7
	v199.3C459.7,388.8,456.5,391.9,452.7,391.9z"/>
<g class="laptopContentGroup" opacity="0.6">
	<path fill="#E5EBEE" d="M437.8,212.3H164.1c-1.9,0-3.5-1.6-3.5-3.5v-9.4c0-1.9,1.6-3.5,3.5-3.5h273.7c1.9,0,3.5,1.6,3.5,3.5v9.4
		C441.2,210.7,439.7,212.3,437.8,212.3z"/>
	<path fill="#8CA5B2" d="M215.1,363.8H164c-1.9,0-3.4-1.5-3.4-3.4V325c0-1.9,1.5-3.4,3.4-3.4h51.1c1.9,0,3.4,1.5,3.4,3.4v35.4
		C218.5,362.3,217,363.8,215.1,363.8z"/>
	<path fill="#8CA5B2" d="M437.8,307.3H164c-1.9,0-3.4-1.5-3.4-3.4v-74.6c0-1.9,1.5-3.4,3.4-3.4h273.8c1.9,0,3.4,1.5,3.4,3.4v74.6
		C441.2,305.8,439.7,307.3,437.8,307.3z"/>
	<path fill="#E5EBEE" d="M440,328.5H234.6c-0.7,0-1.2-0.5-1.2-1.2v-4.5c0-0.7,0.5-1.2,1.2-1.2H440c0.7,0,1.2,0.5,1.2,1.2v4.5
		C441.2,327.9,440.7,328.5,440,328.5z"/>
	<path fill="#E5EBEE" d="M440,345.5H234.6c-0.7,0-1.2-0.5-1.2-1.2v-4.5c0-0.7,0.5-1.2,1.2-1.2H440c0.7,0,1.2,0.5,1.2,1.2v4.5
		C441.2,345,440.7,345.5,440,345.5z"/>
	<path fill="#E5EBEE" d="M440,363.8H234.6c-0.7,0-1.2-0.5-1.2-1.2v-4.5c0-0.7,0.5-1.2,1.2-1.2H440c0.7,0,1.2,0.5,1.2,1.2v4.5
		C441.2,363.3,440.7,363.8,440,363.8z"/>  
</g>
</g>

<g class="phoneGroup" opacity="0">
	<path class="phoneEdge" fill="#FFFAEB" d="M255.2,371.4V198.6c0-3.2,2.7-5.9,5.9-5.9h77.9c3.2,0,5.9,2.7,5.9,5.9v172.9
		c0,3.2-2.7,5.9-5.9,5.9h-77.9C257.8,377.3,255.2,374.7,255.2,371.4z"/>
	<circle class="phoneButton" fill="#9AA3B2" cx="300" cy="363.1" r="6"/>
	<circle class="phoneCamera" fill="#A4ACBB" cx="284.3" cy="203.6" r="1.5"/>
	<rect class="phoneScreen" x="262.1" y="214.3" fill="#BDCCD4" width="75.7" height="135.3"/>
	
		<line class="phoneSpeaker" fill="none" stroke="#9AA3B2" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="292.5" y1="203" x2="307.5" y2="203"/>
  
<g class="phoneContentGroup" opacity="0.6">
	<path fill="#E5EBEE" d="M327.8,235.6h-55.3c-1,0-1.9-0.9-1.9-1.9v-7.3c0-1,0.9-1.9,1.9-1.9h55.3c1,0,1.9,0.9,1.9,1.9v7.3
		C329.7,234.8,328.8,235.6,327.8,235.6z"/>
	<path fill="#8CA5B2" d="M294.3,338.7h-21.9c-1,0-1.9-0.8-1.9-1.9v-25c0-1,0.8-1.9,1.9-1.9h21.9c1,0,1.9,0.8,1.9,1.9v25
		C296.2,337.8,295.3,338.7,294.3,338.7z"/>
	<path fill="#8CA5B2" d="M327.8,300.3h-55.4c-1,0-1.9-0.8-1.9-1.9v-51.7c0-1,0.8-1.9,1.9-1.9h55.4c1,0,1.9,0.8,1.9,1.9v51.7
		C329.7,299.4,328.8,300.3,327.8,300.3z"/>
	<path fill="#E5EBEE" d="M329,314.7h-25.6c-0.4,0-0.7-0.3-0.7-0.7v-3.4c0-0.4,0.3-0.7,0.7-0.7H329c0.4,0,0.7,0.3,0.7,0.7v3.4
		C329.7,314.4,329.4,314.7,329,314.7z"/>
	<path fill="#E5EBEE" d="M329,338.7h-25.6c-0.4,0-0.7-0.3-0.7-0.7v-3.4c0-0.4,0.3-0.7,0.7-0.7H329c0.4,0,0.7,0.3,0.7,0.7v3.4
		C329.7,338.4,329.4,338.7,329,338.7z"/>
	<path fill="#E5EBEE" d="M329,326.3h-25.6c-0.4,0-0.7-0.3-0.7-0.7v-3.4c0-0.4,0.3-0.7,0.7-0.7H329c0.4,0,0.7,0.3,0.7,0.7v3.4
		C329.7,326,329.4,326.3,329,326.3z"/>
</g>  
</g>
  
<g class="tabletGroup" opacity="1">
	<path class="tabletEdge" fill="#FFFAEB" d="M198.5,404.5v-239c0-7.7,6.3-14,14-14h175c7.7,0,14,6.3,14,14v239c0,7.7-6.3,14-14,14
		h-175C204.8,418.5,198.5,412.2,198.5,404.5z"/>
	<path class="tabletScreen" fill="#BDCCD4" d="M218.5,386.5v-203c0-2.8,2.3-5,5-5h153c2.8,0,5,2.3,5,5v203c0,2.8-2.3,5-5,5h-153
		C220.8,391.5,218.5,389.3,218.5,386.5z"/>
	<circle class="tabletButton" fill="#A4ACBB" cx="300" cy="406" r="6"/>
	<circle class="tabletCamera" fill="#A4ACBB" cx="300" cy="168" r="2"/>
  <g class="maskedTabletContentGroup" clip-path="url(#tabletContentGroupMask)">
    <g class="tabletContentGroup" opacity="0.6" >
      <path fill="#E5EBEE" d="M363.6,217.4H236.9c-1.9,0-3.5-1.6-3.5-3.5v-9.4c0-1.9,1.6-3.5,3.5-3.5h126.7c1.9,0,3.5,1.6,3.5,3.5v9.4
        C367,215.8,365.5,217.4,363.6,217.4z"/>
      <path fill="#8CA5B2" d="M288,368.9h-51.1c-1.9,0-3.4-1.5-3.4-3.4v-35.4c0-1.9,1.5-3.4,3.4-3.4H288c1.9,0,3.4,1.5,3.4,3.4v35.4
        C291.4,367.4,289.8,368.9,288,368.9z"/>
      <path fill="#8CA5B2" d="M363.6,312.4H236.8c-1.9,0-3.4-1.5-3.4-3.4v-74.6c0-1.9,1.5-3.4,3.4-3.4h126.8c1.9,0,3.4,1.5,3.4,3.4V309
        C367,310.9,365.5,312.4,363.6,312.4z"/>
      <path fill="#E5EBEE" d="M365.8,333.6h-58.4c-0.7,0-1.2-0.5-1.2-1.2v-4.5c0-0.7,0.5-1.2,1.2-1.2h58.4c0.7,0,1.2,0.5,1.2,1.2v4.5
        C367,333.1,366.5,333.6,365.8,333.6z"/>
      <path fill="#E5EBEE" d="M365.8,368.9h-58.4c-0.7,0-1.2-0.5-1.2-1.2v-4.5c0-0.7,0.5-1.2,1.2-1.2h58.4c0.7,0,1.2,0.5,1.2,1.2v4.5
        C367,368.4,366.5,368.9,365.8,368.9z"/>
      <path fill="#E5EBEE" d="M365.8,350.6h-58.4c-0.7,0-1.2-0.5-1.2-1.2v-4.5c0-0.7,0.5-1.2,1.2-1.2h58.4c0.7,0,1.2,0.5,1.2,1.2v4.5
        C367,350.1,366.5,350.6,365.8,350.6z"/>
    </g>  
  </g>
  </g>
	</svg>

</div>

script.js

var xmlns="http://www.w3.org/2000/svg", select = function(s) {
      return document.querySelector(s);
    }, selectAll = function(s) {
      return document.querySelectorAll(s);
    }, container = select('.container'),
monitorContent = selectAll('.monitorContentGroup path'),		
monitorGroup = select('.monitorGroup'),
monitorScreen = select('.monitorScreen'),
monitorLogo = select('.monitorLogo'),    
monitorStand = select('.monitorStand'),
monitorStandShadow = select('.monitorStandShadow'),
monitorBottom = select('.monitorBottom'), monitorEdge = select('.monitorEdge'), 


laptopContent = selectAll('.laptopContentGroup path'),
laptopContentGroup = select('.laptopContentGroup'),
laptopGroup = select('.laptopGroup'), laptopScreen = select('.laptopScreen'), laptopEdgeLeft = select('.laptopEdgeLeft'), laptopEdgeRight = select('.laptopEdgeRight'), laptopTrackpad = select('.laptopTrackpad'), laptopBase = select('.laptopBase'),
    
tabletContent = selectAll('.tabletContentGroup path'),		
tabletContentGroup = select('.tabletContentGroup'), tabletGroup = select('.tabletGroup'), tabletButton = select('.tabletButton'), tabletCamera = select('.tabletCamera'), tabletScreen = select('.tabletScreen'), 

phoneGroup = select('.phoneGroup'),phoneButton = select('.phoneButton'),phoneCamera = select('.phoneCamera'),phoneSpeaker = select('.phoneSpeaker')




//center the container cos it's pretty an' that
TweenMax.set(container, {
  position:'absolute',
  top:'50%',
  left:'50%',
  xPercent:-50,
  yPercent:-50
})

TweenMax.set([ monitorBottom], {
  transformOrigin:'50% 100%'
})
TweenMax.set([monitorStand, laptopBase,tabletScreen], {
  transformOrigin:'50% 0%'
})

TweenMax.set([monitorLogo,monitorScreen, laptopScreen,  laptopTrackpad,  tabletGroup, laptopGroup, tabletButton, tabletCamera, tabletContentGroup,phoneButton, phoneCamera,phoneSpeaker, laptopContentGroup,phoneGroup], {
  transformOrigin:'50% 50%'
})

TweenMax.set([ laptopEdgeLeft,laptopEdgeRight ], {
  transformOrigin:'0% 100%'
})

TweenMax.set(tabletGroup, {
	rotation:-90
})



var tl = new TimelineMax({repeat:-1, delay:1, yoyo:false,paused:false});
tl.timeScale(3)
tl.from(monitorBottom,1, {
  scaleY:0,
  ease:Power1.easeOut
})
.from(monitorStand, 1, {
  y:-70,
  ease:Power1.easeOut
}, '-=1')
.from(monitorStandShadow, 0.5, {
	alpha:0,
  ease:Power1.easeIn
},'-=0.5')
.from(monitorEdge, 1, {
  y:330
},'-=0.25')
.from(monitorScreen, 2, {
  y:330,
  ease:Power1.easeOut
},'-=1')

.staggerFrom(monitorContent, 1, {
	scaleX:0
},0.1,'-=0.51')
.from(monitorLogo, 1, {
  scale:0,
  ease:Back.easeOut.config(2)
})
.staggerTo(monitorContent, 1, {
	alpha:0,
	delay:2
}, 0.1)
.to(monitorScreen, 1, {
  y:330,
	ease:Power1.easeIn
},'-=1')
.to(monitorEdge, 1, {
  y:330,
	ease:Power1.easeIn
},'-=0.75')
.to(monitorBottom,1, {
  scaleX:0.69,
  y:-23
})
.to(monitorBottom,1, {
  scaleY:0.45,
  alpha:1
}, '-=1')
.set(monitorBottom, {
  alpha:0
})
.to(monitorLogo, 0.5, {
  scale:0,
  ease:Back.easeIn
},'-=1')
.to(monitorStand, 1, {
  //scaleY:0
	y:-120
},'-=1.5')
.to(monitorStandShadow, 0.5, {
	alpha:0
},'-=1.5')

.from(laptopBase, 1, {
  alpha:0
}, '-=1')

.from(laptopTrackpad, 1, {
  scaleX:0
}, '-=1')

.from(laptopScreen, 1, {
  scale:0,
  ease:Back.easeOut.config(0.5)
})

.from(laptopEdgeLeft, 2, {
  skewX:-40,
  scaleY:0,
  ease:Power3.easeOut
},'-=2')
.from(laptopEdgeRight, 2, {
  skewX:40,
  scaleY:0,
  ease:Power3.easeOut
},'-=2')
.staggerFrom(laptopContent, 1, {
	scaleX:0
},0.1)
/*
.to(laptopBase, 1, {
  y:-60,
  scaleX:0
})
*/
.to(laptopTrackpad, 0.3, {
  alpha:0,
  delay:2
})

.to(laptopScreen, 1, {
	scaleX:0.67
})
.to(laptopScreen, 1, {
	scaleY:0.8
},'-=1')
.to(laptopContentGroup, 1,{
  alpha:0,
  scale:0.5
},'-=1')
.to(laptopBase, 1, {
  y:-20,
  scaleX:0
},'-=1')
.to(laptopEdgeLeft, 1, {
	x:40,
	transformOrigin:'50% 50%',
	scaleY:0.85
},'-=1')
.to(laptopEdgeRight, 1, {
	x:-40,
	transformOrigin:'50% 50%',
	scaleY:0.85
}, '-=1')

.set(laptopGroup,{
	alpha:0
})
.from(tabletGroup, 1,{
	scale:1.1,
	//y:20,
	alpha:0
}, '-=1')

.to(tabletGroup, 2, {
	rotation:0,
  delay:2,
  ease:Anticipate.easeOut.config(0.3)
})
.staggerFrom([tabletButton, tabletCamera], 0.5, {
	scale:0,
  ease:Back.easeOut
},0.1,"-=1")
.from(tabletContentGroup, 2, {
  rotation:90,
  scaleX:1.33,
  scaleY:0.8,
  ease:Power3.easeInOut
},'-=0')


.to([tabletButton, tabletCamera], 0.5, {
	scale:0,
  delay:2
})
.to(tabletGroup, 1, {
	scaleX:0.45
})
.to(tabletGroup, 1, {
	scaleY:0.7
},'-=1')
.to(tabletContentGroup, 1, {
  y:-5
},'-=1')
.to(tabletScreen, 0.5,{
	scaleY:0.92,
  y:4
},'-=0.5')
.set(phoneGroup,{
	alpha:1
})

.set([tabletGroup, tabletContentGroup],  {
	alpha:0
})
.staggerFrom([phoneButton, phoneCamera, phoneSpeaker], 1,{
  scale:0,
  ease:Back.easeOut
},0.1)

.to(phoneGroup,2, {
	y:80,
  //alpha:0,
	delay:2,
  //scaleX:0.51,
	ease:Back.easeIn.config(2)
})

TweenMax.set('svg',{
  visibility:'visible'
})

scripts

<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/35984/TweenMax.min.js"></script>

style.css

body{
  background-color:#7E82AB;
  overflow:hidden;
}
body, html {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
}

.container{
  max-width:600px;
  height:600px;
}

svg{
  max-width:100%;
  visibility:hidden;
}

Hi There, I am trying to use this, but i am getting a js error
Uncaught Cannot tween a null target.

any ideas as to why