<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<svg class="mainSVG" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 600 600">
<defs>
<filter id="goo">
<feGaussianBlur in="SourceGraphic" stdDeviation="1" result="blur" />
<feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 12 -1.9" result="cm" />
</filter>
<g id="bubble" stroke="#F3F1E2">
<ellipse fill="none" stroke-width="1" stroke-miterlimit="10" cx="8" cy="8" rx="7" ry="7"/>
<path fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M3.39,8
c0.07-0.84,0.35-1.68,0.87-2.42c0.5-0.71,1.15-1.25,1.89-1.61"/>
</g>
<path id="heart" fill="none" stroke="#F3F1E2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M11.58,3.55c0,4.16-4.32,8.04-5.54,8.04S0.5,7.7,0.5,3.55c0-1.68,1.36-3.05,3.05-3.05c1.03,0,1.94,0.51,2.49,1.3
c0.55-0.78,1.46-1.3,2.49-1.3C10.22,0.5,11.58,1.86,11.58,3.55z M3.99,2.25c-0.86,0-1.72,0.78-1.78,1.86"/>
<g id="pop" class="pop" fill="none" stroke="#F3F1E2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" opacity="0">
<circle cx="18.22" cy="17.89" r="0" stroke="#F3F1E2" fill="none"/>
<line x1="18" y1="10.5" x2="18" y2="0.5"/>
<line x1="18" y1="25.5" x2="18" y2="35.5"/>
<line x1="25.5" y1="18" x2="35.5" y2="18"/>
<line x1="10.5" y1="18" x2="0.5" y2="18"/>
</g>
</defs>
<g id="follower" ></g>
<path id="waveyPath" fill="none" stroke="none" stroke-width="3.5" stroke-linecap="round" stroke-miterlimit="10" d="M300,338
c100,0,100,36,199.99,36c100,0,100-36,200-36c100,0,100,36,200,36c100,0,100-36,200-36c100,0,100,36,200.01,36s100-36,200.01-36" />
<g id="movingPath">
<path id="filledMovingPath" fill="#69B565" d="M2300.5,338c-100,0-100,36-200.01,36
c-100,0-100-36-200.01-36c-100,0-100,36-200,36c-100,0-100-36-200-36c-100,0-100,36-200,36c-100,0-100-36-199.99-36
c-100,0-100,36-200.01,36s-100-36-200.01-36c-100,0-100,36-200,36c-100,0-100-36-200-36c-100,0-100,36-200,36
c-100,0-100-36-199.99-36v423h2400V338z"/>
<path class="movingPath" fill="none" stroke="#F3F1E2" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" d="M-100,338
c100,0,100,36,199.99,36c100,0,100-36,200-36c100,0,100,36,200,36c100,0,100-36,200-36c100,0,100,36,200.01,36s100-36,200.01-36
c100,0,100,36,199.99,36c100,0,100-36,200-36c100,0,100,36,200,36c100,0,100-36,200-36c100,0,100,36,200.01,36
c100,0,100-36,200.01-36" />
</g>
<g id="jumpingLorry">
<g id="movingLorry">
<g id="lorryGroup" fill="none" stroke="#F3F1E2" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10">
<path d="M53.58,34.5 H48v-24h12.24c2.2,0,4.34,1.76,4.76,3.92l1.56,7.9l1.96,0.78c1.93,0.77,3.49,3.07,3.49,5.15v4.25c0,1.1-0.89,2-2.01,2h-3.26h-0.3
C65.94,31.38,63.25,29,60,29S54.06,31.38,53.58,34.5z" />
<line x1="1.5" y1="34.5" x2="10.5" y2="34.5" />
<path fill="#3D933A" stroke="#F3F1E2" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" d="M34.41,34.5
H48v-29c0-2.2-1.79-4-4.01-4H9.01C6.79,1.5,5,3.29,5,5.5v29h6.65c0.81-5.81,5.59-10.28,11.38-10.28S33.6,28.69,34.41,34.5z" />
<path d="M53.25,15.53h3.66
c1.58,0,3.02,1.19,3.22,2.65l0.1,0.7c0.2,1.46-0.92,2.65-2.5,2.65h-4.48V15.53z" />
<path d="M34.53,36.24
c0-6.64-5.15-12.02-11.5-12.02c-6.35,0-11.5,5.38-11.5,12.02" />
<g id="wheelL">
<circle cx="23.03" cy="35.72" r="6.5" />
<circle fill="#F3F1E2" stroke="none" cx="23" cy="35.5" r="1" />
</g>
<g id="wheelR">
<circle cx="60" cy="35.5" r="6.5" />
<circle fill="#F3F1E2" stroke="none" cx="60" cy="35.5" r="1" />
</g>
</g>
</g>
</g>
</svg>
</div>
<script>
var xmlns = "http://www.w3.org/2000/svg",
xlinkns = "http://www.w3.org/1999/xlink"
select = function(s) {
return document.querySelector(s);
},
selectAll = function(s) {
return document.querySelectorAll(s);
},
container = select('.container'),
mainSVG = select('.mainSVG'),
waveyPath = select('#waveyPath'),
pop = select('#pop'),
follower = select('#follower'),
movingPath = select('#movingPath'),
jumpingLorry = select('#jumpingLorry'),
movingLorry = select('#movingLorry'),
lorryGroup = select('#lorryGroup'),
particleContainer = select('#particleContainer'),
//particleTypeArray = ['#flake1', '#flake2', '#flake3', '#star','#heart'],
particleTypeArray = ['#bubble', '#heart'],
particleColorArray = ['#F3F1E2', '#B51541'],
particlePool = [],
popPool = [],
numParticles = 270,
particleCount = 0
//center the container cos it's pretty an' that
TweenMax.set(container, {
position: 'absolute',
top: '50%',
left: '50%',
xPercent: -50,
yPercent: -50
})
TweenMax.set('svg', {
visibility: 'visible'
})
TweenMax.set(lorryGroup, {
transformOrigin: '50% 100%'
})
TweenMax.set(jumpingLorry, {
transformOrigin: '50% 50%',
rotation: 0
})
TweenMax.set(follower, {
x: 0,
y: 0
})
TweenMax.set(pop, {
alpha:0
})
var waveyPathBezier = MorphSVGPlugin.pathDataToBezier(waveyPath.getAttribute('d'), {
offsetX: -(lorryGroup.getBBox().width / 2),
offsetY: -(lorryGroup.getBBox().height) - waveyPath.getAttribute('stroke-width')
})
var tl = new TimelineMax({
repeat: -1,
onUpdate: playParticle
});
tl.to(lorryGroup, 6, {
bezier: {
type: "cubic",
values: waveyPathBezier,
autoRotate: true
},
ease: Linear.easeNone
})
.to([movingPath, movingLorry], 6, {
x: -1200,
ease: Linear.easeNone
}, '-=6')
var jumpTl = new TimelineMax();
jumpTl.to(lorryGroup, 0.16, {
//y:-6,
scaleY: 0.97,
scaleX: 1.03,
repeat: -1,
ease: Linear.easeNone,
yoyo: true
})
function createParticlePool() {
var i = numParticles,
p, popClone;
while (--i > -1) {
p = document.createElementNS(xmlns, 'use');
popClone = pop.cloneNode(true);
//pop.setAttributeNS(xlinkns, "xlink:href", '#pop');
p.setAttributeNS(xlinkns, "xlink:href", particleTypeArray[i % particleTypeArray.length]);
follower.appendChild(p);
follower.appendChild(popClone);
p.setAttributeNS(null, 'stroke', particleColorArray[i % particleColorArray.length]);
//popClone.setAttributeNS(null, 'opacity', 1);
//p.setAttribute('class', "particle");
particlePool.push(p);
popPool.push(popClone);
TweenMax.set([p, popClone], {
transformOrigin: '50% 50%',
alpha:1,
x:-100,
y:-100
//x:300,
//y:follower._gsTransform.y
})
TweenMax.set([p], {
scale: 0
})
}
}
//ScrubGSAPTimeline(tl);
function playParticle() {
//console.log(particleCount%250 == 1)
if (particleCount % 13) {
particleCount++;
checkParticleCount();
return;
}
var p = particlePool[particleCount];
TweenMax.set(p, {
x: 260,
y: lorryGroup._gsTransform.y + 12,
//scale:0,
alpha: 1
})
var s = randomBetween(5, 10) / 10;
TweenMax.to(p, 0.46, {
scaleX: s,
ease: Elastic.easeOut.config(1, 0.83)
})
TweenMax.to(p, 0.6, {
scaleY: s,
ease: Elastic.easeOut.config(1, 0.4)
})
TweenMax.to(p, randomBetween(1, 2), {
//paused:true,
physics2D: {
velocity: randomBetween(30, 165),
angle: randomBetween(-180, -160),
gravity: randomBetween(-130, -17)
},
onComplete: function(p) {
TweenMax.set(p, {
scale: 0
})
createPop(p);
},
onCompleteParams: [p]
});
particleCount++;
checkParticleCount();
}
function createPop(p) {
var popTl = new TimelineMax(),
popClone = popPool[particleCount],
popLines = popClone.getElementsByTagName('line'),
popCircle = popClone.getElementsByTagName('circle');
TweenMax.set(popClone, {
x: p._gsTransform.x - 10,
y: p._gsTransform.y - 10,
rotation: 45
})
TweenMax.set(popCircle, {
alpha: 1,
attr: {
r: 0
}
})
popTl.set(popLines, {
drawSVG: '0% 0%'
})
.to(popLines, 0.3, {
drawSVG: '0% 20%',
ease: Linear.easeNone
})
.to(popLines, 0.6, {
drawSVG: '80% 100%',
ease: Linear.easeNone
})
.to(popLines, 0.2, {
drawSVG: '105% 105%',
ease: Linear.easeNone
})
.to(popClone, 1, {
x: '-=20',
y: '-=20',
scale: 0.5,
ease: Linear.easeNone
}, '-=' + popTl.duration())
.to(popCircle, 1, {
attr: {
r: 6
},
alpha: 0,
ease: Expo.easeOut
}, '-=' + popTl.duration());
popTl.timeScale(1.6)
}
function checkParticleCount() {
particleCount = (particleCount >= numParticles) ? 0 : particleCount;
}
tl.timeScale(1);
createParticlePool();
//ScrubGSAPTimeline(tl);
function randomBetween(min, max) {
return Math.floor(Math.random() * (max - min + 1) + min);
}
</script>
body {
background-color:#3D933A;
overflow: hidden;
}
body,
html {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
.container{
position:absolute;
width:100%;
}
svg{
width:100%;
height:100%;
visibility:hidden;
overflow:hidden;
}
