<div class="container">
<svg version="1.1"
xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink" xmlns:a="https://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>
<filter id="glow" y="-50%" height="200%">
<feGaussianBlur stdDeviation="5 5" result="coloredBlur"/>
<feOffset dx="0" dy="0" result="offsetblur"></feOffset>
<feFlood id="glowAlpha" flood-color="#E9CD08" flood-opacity="0"></feFlood>
<feComposite in2="offsetblur" operator="in"></feComposite>
<feMerge>
<feMergeNode></feMergeNode>
<feMergeNode in="SourceGraphic"></feMergeNode>
</feMerge>
</filter>
<filter id="edgeClean" color-interpolation-filters="sRGB">
<feComponentTransfer>
<feFuncA type="table" tableValues="0 .5 1 1" />
</feComponentTransfer>
</filter>
</defs>
<g class="speedLineGroup" stroke-width="2">
<line fill="none" stroke="#2A4060" x1="71.3" y1="341.3" x2="424.3" y2="341.3"/>
<line fill="none" x1="288.3" y1="143.3" x2="478.3" y2="143.3"/>
<line fill="none" stroke="#6F83B7" x1="71.3" y1="45.3" x2="362.3" y2="45.3"/>
<line fill="none" stroke="#7285BE" x1="229.3" y1="262.3" x2="588.3" y2="262.3"/>
<line fill="none" stroke="#3F3007" x1="25.3" y1="291.3" x2="569.3" y2="291.3"/>
<line fill="none" stroke="#1F7A60" x1="145.3" y1="113.3" x2="545.3" y2="113.3"/>
</g>
<g class="spotlightHover">
<polygon class="beam" opacity="0.1" fill="#67D5D4" points="338.7,237.3 262,237.3 232.9,444 365.8,444 "/>
<ellipse class="spotlight" opacity="1" fill="#E9CD08" cx="299.4" cy="444" rx="66.5" ry="22.1"/>
</g>
<path class="cow" filter="url(#glow)" d="M325.6,430.2l-2.6-2.5c0.9,0,1.9,0.3,2.7-0.2c1.3-0.9,1.6-1.9,0.9-1.6c-0.1,0-0.3,0.1-0.4,0.2
c-1.9,0.8-3.8-0.9-5.9-0.8c-0.4,0.2-0.9,0.4-0.9,0.9c-0.1,0.5,0.5,0.7,0.4,1.3c-1.2-0.1-1.8-1.5-3-0.8c-0.3,0.2-0.9,0.8-0.5,1.4
c0.2,0.4,1.1,0.3,1.5,0.6c-0.1,0.3-0.2,0.5-0.7,0.5c-0.3,0-0.6,0-1,0.1l-6.4,0.4c-2.8,0.2-5.6,0.4-8.4,0.6c-2.8,0.2-5.5,0.8-8.4,0.6
c-2.7-0.1-5.5-0.4-8.3-0.6c-2.7-0.2-5.8-0.9-7.7,0.6c-1.3,0.9-1.1,1.1-1.6,1.9c-0.2,0.3-0.2,0.3-0.5,0.7c-0.6,1.1-1.2,6.5-1.2,7.8
c0.2,5.1-1,3.1-1.7,4.7c-0.8,1.9,0.5,4,0.6,5.8c0.5-0.2,0.9-1,0.9-1.8c-0.1-2.5,1.4-2.4,1.6-3.9c0.1-1.1-0.6-0.6-0.4-1.9
c0.4-2.2,0.5-8,1.2-9.4l-0.2,6.6c0,0.9-0.1,2.3,0.2,3.3c0.2,0.9,1,1.3,1,2.3c-0.2,0.2-0.5,0.2-0.7,0.5c-0.2,0.2-0.5,0.4-0.6,0.5
c-0.3,0.5-0.6,1.1-0.5,1.8c0.1,0.9,0.5,2,0.7,4c0.2,1.5,0.2,3,0,4.5c-0.1,0.3-0.2,0.8,0,1.1c0.2,0.5,0.3,0.3,0.5,0.5
c0.5,0.5-0.4,0.9-0.4,1.6c0.2,0.5,2.8,1.8,4,1.2c0.7-0.4,0.5-1.2,0-1.8c-1.6-1.6-1.5-4.4-1.2-6.5c0.1-0.9,0.7-3.3,1.5-3.9
c1.4,1.5,2.3,5.5,2.3,8.1c0,0.1,0.6,0.4,1.2,0.9c1.1,1.2,0.8,1.9,2.3,1.9c0.7,0,1.2,0,1.7-0.4c-0.1-0.8-0.7-1.4-1.1-1.9
c-0.3-0.4-0.9-1.2-1.2-1.7c-0.6-1.2-1.1-3.4-0.5-4.8l0.7-0.1l0.3,0.5c0.2,0.2,0.3,0.3,0.5,0.4c0.2-0.2,0.4-0.5,0.5-0.9l1-0.1
c0.2,0.5,0.5,0.9,0.8,1c0.7-0.5,0.2-1.1,0.8-1.5c0.1-0.1,0.2-0.1,0.3-0.2c0.6-0.4,1-0.6,1.5-1.2c0.2-0.4,0.5-0.9,0.7-1.1
c3.2,0,4.2,0.2,7.9,0c0.6-0.1,1.2-0.1,1.9-0.2c0.7-0.1,1.2-0.2,1.6,0.2c0.5,0.8,0.5,2.4,0.2,3.3c-0.7,1.6-0.2,1.5,0.3,2.1
c0.6,1,0.9,3.1,0.6,4.1c-0.3,0.9-0.2,0.7,0.4,1.2c0.5,0.5,0.5,0.8,0.9,1.2c0.5,0.5,1.6,0.8,2.3,0.7c0.2,0,0.4,0,0.5-0.1
c0.4-0.2,0.2,0,0.3-0.2c0.4-0.9-0.9-1.1-1.2-1.6c-0.2-0.3-1.6-6.1,0.1-7.6c0.2,0.2,0.2,0.6,0.2,0.9c0.1,1.4,0.5,1.3,0.9,2.2
c0.9,1.7,0.2,4.3,1.2,5.1c0.9,0.6,1.8,1.6,2.4,1.8c0.5,0.2,1.3,0.1,1.7-0.2c0.2-1.1-1.8-1.2-2.6-4.9c-0.3-1.6-0.3-5.2,0-6.9
c0.2-0.2,0.6,0,0.9-0.1c1.8-0.1,2.6-3,3.2-4.4c0.9-2.6,1.6-4,3.1-5.5c2.7-2.9,3.3-1.1,6.4-2.3c4.7-1.8,4.1-0.2,4.9-1.6
c0.4-0.5,0.8-0.5,1.1-1c0.2-0.7-1.9-2.3-2.5-3L325.6,430.2z"/>
<g class="ship" >
<g class="shipRotation" >
<circle class="light" fill="#1d1d1d" cx="402.3" cy="191.5" r="4"/>
<circle class="light" fill="#1d1d1d" cx="206.3" cy="187.5" r="4"/>
<g filter="url(#edgeClean)">
<path fill="#6521C3" d="M431.5,217.6C417.3,239,363.8,255,300,255s-117.3-16-131.5-37.4c-0.1,0.7-0.1,1.4-0.1,2.1
c0,27,58.9,48.9,131.7,48.9s131.7-21.9,131.7-48.9C431.7,219,431.6,218.3,431.5,217.6z"/>
<path fill="#7737EB" d="M300,255c63.8,0,117.3-16,131.5-37.4c-2-17.1-27.6-31.9-65.1-40c1.2,3.1,2.2,6.3,2.9,9.6
c-18.2,10.8-42.1,17.2-68.2,17.2c-26.1,0-50-6.5-68.3-17.2c0.8-3.5,1.8-6.8,3.1-10.1c-38.8,8-65.5,23.1-67.5,40.6
C182.7,239,236.2,255,300,255z"/>
</g>
<path class="alien" fill="#5E2121" d="M300.1,170.7c-0.9,0-1.4,0.5-1.4,1.4c0,0.9,0.5,1.4,1.4,1.4c0.9,0,1.4-0.5,1.4-1.4
C301.5,171.1,301,170.7,300.1,170.7z M300.1,170.7c-0.9,0-1.4,0.5-1.4,1.4c0,0.9,0.5,1.4,1.4,1.4c0.9,0,1.4-0.5,1.4-1.4
C301.5,171.1,301,170.7,300.1,170.7z M327.2,174.9c-2.2-2.4-4.4-4.5-7.2-6.3c0.5-0.9,1-1.9,1.1-3c0.1-1.6-0.2-3.2-1-4.7
c-0.7-1.3-1.6-2.4-2.7-3.2c0.1-0.2,0.1-0.5,0.1-0.7c0-1.7-1.3-3-3-3c-1.7,0-3,1.3-3,3c0,1.7,1.4,3,3,3c0.9,0,1.8-0.4,2.3-1.1
c1.2,1.8,1.8,3.6,1.8,5.4c0,1-0.2,2-0.6,2.9c-6-3.3-12.2-5-18.7-5c-6.6,0-12.8,1.6-18.7,4.9c-0.4-1-0.6-2-0.6-3c0-2,0.6-3.8,1.8-5.3
c0.5,0.7,1.4,1.2,2.4,1.2c1.7,0,3-1.3,3-3c0-1.7-1.3-3-3-3c-1.7,0-3,1.3-3,3c0,0.3,0,0.6,0.1,0.8l-1,1c-1.3,1.4-2.1,2.4-2.3,3
c-0.4,1-0.6,2.1-0.6,3.1c0,1.2,0.3,2.4,0.9,3.5c-2.7,1.8-5.2,4-7.4,6.5c7.1,7.9,15.2,13.3,26.2,13.8v2.9c-3,0.8-5.7,2.6-7.8,6.3
c-1.1,2-1.7,4.1-2.1,6c4.4,0.4,8.9,0.6,13.5,0.6c3.3,0,6.6-0.1,9.8-0.3c-0.5-2.2-1.5-4.6-2.7-6.7c-2-3.7-4.8-5.1-7.8-6v-2.9
C311.3,188.3,319.9,182.9,327.2,174.9z M300.2,167.2c3.2,0,4.8,1.6,4.8,4.8c0,3.2-1.6,4.8-4.8,4.8c-3.3,0-4.9-1.6-4.9-4.8
C295.3,168.8,296.9,167.2,300.2,167.2z M299.3,184.3c-3.2,0-6.3-0.3-8.9-0.8c-4-0.8-6.2-2-6.2-3.7v-0.4c0,0.9,2.3,1.4,5.1,2.1
c2.8,0.6,6.4-0.3,10.4-0.3c2.5,0,5.5,1,8.2,0.6c4-0.6,5.1-1.2,6-2.2l0.1,0.2c0,1-0.3,2.1-1.5,2.6C309.6,183.8,305,184.3,299.3,184.3
z M300.1,173.4c0.9,0,1.4-0.5,1.4-1.4c0-0.9-0.5-1.4-1.4-1.4c-0.9,0-1.4,0.5-1.4,1.4C298.7,172.9,299.2,173.4,300.1,173.4z"/>
<path fill="#7CD8FF" filter="url(#edgeClean)" opacity="0.7" d="M301.1,204.3c26.1,0,50-6.5,68.2-17.2c-0.7-3.3-1.7-6.5-2.9-9.6c-10-26.4-35.4-45.1-65.3-45.1
c-29.7,0-55,18.5-65.2,44.6c-1.3,3.3-2.3,6.6-3.1,10.1C251.1,197.8,275,204.3,301.1,204.3z"/>
<path fill="#56C4FF" opacity="0.7" d="M343,191.8c4.8-1.8,9.2-3.9,13.3-6.3c-5.2-23.7-26.2-41.6-51.4-42C322.8,150.1,337.1,168.3,343,191.8z"/>
<g filter="url(#edgeClean)">
<circle class="light" fill="#1d1d1d" cx="198.3" cy="207.5" r="4"/>
<circle class="light" fill="#1d1d1d" cx="233.3" cy="223.5" r="4"/>
<circle class="light" fill="#1d1d1d" cx="277.3" cy="231.5" r="4"/>
<circle class="light" fill="#1d1d1d" cx="323.3" cy="234.5" r="4"/>
<circle class="light" fill="#1d1d1d" cx="366.3" cy="224.5" r="4"/>
<circle class="light" fill="#1d1d1d" cx="402.3" cy="207.5" r="4"/>
</g>
</g>
</g>
</svg>
</div>
var xmlns="https://www.w3.org/2000/svg", select = function(s) {
return document.querySelector(s);
}, selectAll = function(s) {
return document.querySelectorAll(s);
}, container = select('.container'), ship = select('.ship'), shipRotation = select('.shipRotation'), beam = select('.beam'), spotlight = select('.spotlight'), spotlightHover = select('.spotlightHover'), speedLineGroup = selectAll('.speedLineGroup line'), cow = select('.cow'), glowAlpha = select('#glowAlpha')
//center the container cos it's pretty an' that
TweenMax.set(container, {
position:'absolute',
top:'50%',
left:'50%',
xPercent:-50,
yPercent:-50
})
TweenMax.set(speedLineGroup, {
drawSVG:'0% 0%'
})
TweenMax.set([ship, shipRotation, beam, spotlight, spotlightHover], {
transformOrigin:'50% 50%'
})
var hoverTween = TweenMax.to(ship, 0.8, {
y:'+=13',
yoyo:true,
repeat:-1,
ease:Sine.easeInOut
})
var rotationTween = TweenMax.fromTo(shipRotation, 1.3, {
rotation:-4
}, {
rotation:4,
yoyo:true,
repeat:-1,
ease:Sine.easeInOut
})
var lightTween = TweenMax.staggerTo('.light', 0.76, {
fill:'#E5023B',
repeat:-1,
yoyo:true,
ease:Linear.easeNone
},0.16)
var spotlightHoverTween = TweenMax.from(spotlightHover, 0.8, {
scaleX:0.9,
yoyo:true,
repeat:-1,
ease:Sine.easeInOut
})
var speedLineTimeline = new TimelineMax({repeat:21});
speedLineTimeline.timeScale(9);
var tl = new TimelineMax({repeat:-1});
tl.from(ship, 4, {
x:400,
rotation:-53,
//ease:Back.easeOut.config(2)
ease:Elastic.easeOut.config(1.7, .8)
})
.fromTo(cow, 1, {
x:-800},{
x:0,
ease:Expo.easeOut
})
.from(beam, 1.2, {
scaleX:0,
ease:Expo.easeOut,
delay:1
},'-=3')
.from(spotlight, 1.2, {
attr:{
rx:0,
ry:0
},
ease:Expo.easeOut,
delay:1
},'-=3')
.to(glowAlpha, 1,{
attr:{
'flood-opacity':1
}
})
.to(cow,2, {
y:'-=160',
x:0,
fill:'#B8A310',
rotation:-65,
ease:Power2.easeIn
},'-=1')
.set(cow,{
//x:-400,
alpha:0
})
.to(beam, 1.2, {
scaleX:0,
ease:Expo.easeIn,
delay:0
})
.to(spotlight, 1.2, {
attr:{
rx:0,
ry:0
},
ease:Expo.easeIn
},'-=1.2')
.to(ship, 2, {
//x:400,
rotation:-54,
ease:Power2.easeInOut
})
.to(ship, 2, {
x:-1800,
ease:Back.easeIn.config(0.8)
},'-=2')
.add(speedLineTimeline, 0)
function createSpeedLines(){
for(var i = 0; i < speedLineGroup.length; i++){
var tl = new TimelineMax();
tl.to(speedLineGroup[i], 0.2, {
drawSVG:'20% 0%',
ease:Linear.easeNone
})
.to(speedLineGroup[i], 1, {
drawSVG:'100% 80%',
ease:Linear.easeNone
})
.to(speedLineGroup[i], 0.2, {
drawSVG:'100% 100%',
ease:Linear.easeNone
})
speedLineTimeline.add(tl, ((i+1)/1.83))
}
}
createSpeedLines()