const randomMinMax = (min,max) => {
return min + Math.random()* (max-min);
}
TweenMax.set('#arrow',{x:-10,y:4})
TweenMax.set('#arrow polyline',{alpha:0})
const coinEase = CustomEase.create("custom", "M0,0 C0.128,0.572 0.16,1.048 0.542,1.048 0.928,1.048 1,0 1,0");
const jiggleEase = CustomEase.create("custom", "M0,0 C0,0.704 0.3,1 0.5,1 0.704,1 1,0.704 1,0");
const nostrilEase = CustomEase.create("custom",'M0,0 C0.126,0.382 0.166,1 0.328,1 0.568,1 0.448,0 0.654,0 0.792,0 0.7,0.502 0.86,0.502 0.974,0.502 1,0 1,0');
const particleL = document.querySelectorAll('#tearL');
const particleR = document.querySelectorAll('#tearR');
TweenMax.set('svg',{visibility:"visible"});
TweenMax.set('#hole',{scale:0,transformOrigin:"center center"});
TweenMax.set('.lineUp',{drawSVG:"0% 0%",y:-4,scaleY:1.5});
TweenMax.set('.lineDown',{drawSVG:"0% 0%", y:-4,scaleY:1.5});
TweenMax.set('#eyeSquint',{opacity:0,y:2,scale:1.1});
TweenMax.set(particleL,{alpha:0});
TweenMax.set(particleR,{alpha:0});
MorphSVGPlugin.convertToPath('#mouth');
const particleLTl = new TimelineMax({repeat:-1,paused:true});
const particleRTl = new TimelineMax({repeat:-1,paused:true});
for (let i = 0; i < particleL.length;i++) {
particleLTl.staggerFromTo(particleL,0.4,{
scaleY:randomMinMax(0.5,1),
scaleX:randomMinMax(0.5,1),
alpha: randomMinMax(0.5,1),
immediateRender:false,
x:0,
y:0
},{
cycle: {
physics2D: () => {
return {
velocity:randomMinMax(30,50),
angle:randomMinMax(-180,-110),
gravity:randomMinMax(600,800)
}
}
},
scale: 0,
alpha: 1,
ease:Linear.easeNone
},0.15)
particleRTl.staggerFromTo(particleR,0.4,{
scaleY:randomMinMax(0.5,1),
scaleX:randomMinMax(0.5,1),
alpha:randomMinMax(0.5,1),
immediateRender:false,
x:0,
y:0
},{
cycle: {
physics2D: () => {
return {
velocity:randomMinMax(30,60),
angle:randomMinMax(90,30),
gravity:randomMinMax(600,800)
}
}
},
scale: 0,
alpha: 1,
ease:Linear.easeNone
},0.15)
}
const squealTl = new TimelineMax({repeat:-1,paused:true});
squealTl.to('#tail',1,{morphSVG:"#tail2"},'in')
.to('#eyes',1,{scale:1.15,transformOrigin:"center center",rotation:10,x:2},'in')
.to('#eyeR',1,{scale:1.4,transformOrigin:"center center"},'in')
.to('#eyeL',1,{scale:1.3,transformOrigin:"center center"},'in')
.to('#head',1,{scale:1.05,transformOrigin:"center center"},'in')
.to('#noseGroup',1,{y:-5,rotation:8},'in')
.to('#earR',1,{rotation:12,x:7,y:-2},'in')
.to('#earL',1,{x:7,y:-2},'in')
.to('#mouth',1,{y:-5,morphSVG:"#mouth2"},'in')
.to('#bodyB',1,{scaleX:1.1},'in')
.to("#headGroup",1,{x:0,y:0},'in')
.to("#headShadow",1,{x:2,y:0,rotation:0},'in')
.to('#frontFootR',1,{rotation:10,x:5,transformOrgin:"right bottom"},'in')
.to('#frontFootL',1,{rotation:-5,x:0,y:2,transformOrgin:"right bottom"},'in')
.to('#backFootR',1,{rotation:10,x:5,transformOrgin:"right bottom"},'in')
.to('#backFootL',1,{rotation:5,x:2,transformOrgin:"right bottom"},'in')
.to('#hole',1,{rotation:-3,transformOrigin:"center center"},'in')
const holeTl = new TimelineMax({paused:true});
holeTl.to('#hole',1,{
scale:1
},'in')
const scrubTls = () => {
let percentDragged = (dragInstance.target._gsTransform.x/10) * squealTl.duration();
TweenMax.to(squealTl, 0.15, {
time:percentDragged,
ease:Power1.easeOut
})
TweenMax.to(holeTl,0.15,{
time:percentDragged,
ease:Power1.easeOut
})
}
const tailWaggleTl = new TimelineMax({paused:true,repeat:-1});
tailWaggleTl.to('#tail',0.26,{
rotation:3.5,
transformOrigin:"left bottom"
})
.to('#tail',0.26,{
rotation:0,
transformOrigin:"left bottom"
})
const oinkTl = new TimelineMax({repeat:-1,repeatDelay:2})
oinkTl.to('#nose',0.16,{
y:-1.5,
rotation:2,
ease:jiggleEase
},'oink')
.to('.nostril',0.16,{
y:-1.5,
rotation:2,
ease:jiggleEase
},'oink')
.to('#mouth',0.16,{
rotation:-5,
ease:jiggleEase,
transformOrigin:"left top",
y:-1
},'oink')
const blinkTl = new TimelineMax({
paused:true,
repeat:-1,
repeatDelay:2
});
blinkTl.to('#eyeWR',0.2,{scaleY:0,transformOrigin:"center center"},'in')
.to('#eyeWL',0.2,{scaleY:0,transformOrigin:"center center"},'in')
.to('#eyeWR',0.2,{scaleY:1,transformOrigin:"center center"},'in+=0.2')
.to('#eyeWL',0.2,{scaleY:1,transformOrigin:"center center"},'in+=0.2')
.to('#eyeRMask',0.2,{scaleY:0,transformOrigin:"center center"},'in')
.to('#eyeRMask',0.2,{scaleY:1,transformOrigin:"center center"},'in+=0.2')
.to('#eyeLMask',0.2,{scaleY:0,transformOrigin:"center center"},'in')
.to('#eyeLMask',0.2,{scaleY:1,transformOrigin:"center center"},'in+=0.2')
const panicTl = new TimelineMax({
paused:true,
repeat:-1
});
panicTl.to('.nostril',0.64,{
scale:1.3,
transformOrigin:"center center",
ease:nostrilEase
},'panic')
.to('#nose',0.64,{
scale:1.1,
transformOrigin:"center center",
ease:jiggleEase
},'panic')
const panicStopTl = new TimelineMax({
paused:true
})
panicStopTl.to('.nostril',0.64,{
scale:1,
ease:Power2.easeOut,
onComplete:() => {
TweenMax.set('.nostril',{
clearProps:"all"
})
TweenMax.set(panicTl,{
time:0
})
}
},'stopPanicking')
.to('#nose',0.64,{
scale:1,
ease:Power2.easeOut
},'stopPanicking')
const coinTl = new TimelineMax({
paused:true,
id:"cointoss",
onComplete:() => {
TweenMax.set(holeTl,{time:0})
TweenMax.set('#coin',{clearProps:"all"})
}
})
coinTl.fromTo('#coin',0.32,{y:0,opacity:1},{y:-110, ease:coinEase},'coin')
.to('#hole',0.20,{scale:0},'coin+=0.32')
// add speed lines to coin tl
.to('.lineUp',0.06,{drawSVG:"0% 100%"},'coin+=0.03')
.to('.lineUp',0.12,{drawSVG:"100% 100%",opacity:0},'coin+=0.1')
.to('.lineDown',0.06,{drawSVG:"0% 100%"},'coin+=0.24')
.to('.lineDown',0.12,{drawSVG:"100% 100%",opacity:0},'coin+=0.30')
const bodyJiggle = () => {
TweenMax.to(dragInstance.target,0.1,{x:0})
TweenMax.to('#bodyB',0.16,{scaleX:0.98,delay:0.1,ease:jiggleEase,repeat:1})
TweenMax.to(dragInstance.target,0.16,{x:-4,delay:0.1,ease:jiggleEase,repeat:1})
// shake body when coin enters hole
TweenMax.to('#bodyB',0.16,{scaleY:1.03,delay:0.32,ease:jiggleEase})
TweenMax.to('#bodyB',0.16,{scaleX:1,delay:0.48})
}
const jiggleAlt = () => {
TweenMax.to(dragInstance.target,0.1,{x:0})
TweenMax.to('#bodyB',0.16,{scaleX:0.98,delay:0.1,ease:jiggleEase,repeat:1})
TweenMax.to(dragInstance.target,0.16,{x:-4,delay:0.1,ease:jiggleEase,repeat:1})
TweenMax.to('#bodyB',0.16,{scaleX:1,delay:0.42,ease:Power1.easeOut})
}
const hideParticles = () => {
TweenMax.set(particleR,{
alpha:0,
onComplete:() => {
particleRTl.stop();
}
})
TweenMax.set(particleL,{
alpha:0,
onComplete:() => {
particleLTl.stop();
}
})
}
// Move legs on coin impact
const legImpact = () => {
const legImpactTl = new TimelineMax({delay:0.34});
legImpactTl.to('#frontFootR',0.24,{rotation:3,x:0,transformOrgin:"right bottom",ease:jiggleEase},'in')
.to('#frontFootL',0.24,{rotation:-3,x:0,y:2,transformOrgin:"right bottom",ease:jiggleEase},'in')
.to('#backFootR',0.24,{rotation:3,x:5,transformOrgin:"right bottom",ease:jiggleEase},'in')
.to('#backFootL',0.24,{rotation:-5,x:0,transformOrgin:"right bottom",ease:jiggleEase},'in')
return legImpactTl;
}
// head movement on coin impact
const headImpact = () => {
headImpactTl = new TimelineMax();
headImpactTl.set('#eyes',{opacity:0},'impact')
.set('#eyeSquint',{opacity:1},'impact')
.to('#headGroup',0.24,{y:3,scaleY:0.95,transformOrigin:"center bottom",ease:coinEase,delay:0.34},'impact')
.to('#eyeSquint',0.24,{y:-2,ease:Power1.easeOut},'impact')
TweenMax.to('#eyeSquint',0.24,{scale:1.1,y:4,delay:0.34,ease:jiggleEase,onComplete:() => {
TweenMax.set('#eyes',{opacity:1})
TweenMax.set('#eyeSquint',{opacity:0,y:2})
// stop blinkTl --> open eyes after squint eyes disappear
TweenMax.fromTo('#eyeWR',0.25,{scaleY:0,immediateRender:false},{scaleY:1,transformOrigin:"center center",delay:0,onComplete:()=> {
blinkTl.progress(0);
setTimeout(() => {
blinkTl.play();
},2000)
}},'openEyes')
TweenMax.fromTo('#eyeWL',0.25,{scaleY:0,immediateRender:false},{scaleY:1,transformOrigin:"center center"},'openEyes')
TweenMax.fromTo('#eyeRMask',0.25,{scaleY:0,immediateRender:false},{scaleY:1,transformOrigin:"center center"},'openEyes')
TweenMax.fromTo('#eyeLMask',0.25,{scaleY:0,immediateRender:false},{scaleY:1,transformOrigin:"center center"},'openEyes')
}})
return headImpactTl;
}
const dragInstance = new Draggable('#tail',{
type:"x",
lockAxis:"true",
bounds:{minX:0,maxX:10},
dragResistance:0.9,
onDrag: () => {
// hide arrow
TweenMax.set('#arrow',{opacity:0,onComplete:() => arrowTl.stop()})
scrubTls();
tailWaggleTl.pause();
oinkTl.stop();
if (dragInstance.target._gsTransform.x < 10 && dragInstance.getDirection("velocity") === "left") {
hideParticles();
}
if (dragInstance.target._gsTransform.x > 5) {
panicTl.play();
}
if (dragInstance.target._gsTransform.x > 8 ) {
particleLTl.play();
particleRTl.play();
}
if (dragInstance.target._gsTransform.x === 10 ) {
panicTl.play();
}
},
onDragEnd: () => {
TweenMax.to(squealTl, 0.2, {
time:0,
ease:Power1.easeOut
})
// stop the waterfalls -- hide particles then stop tl
hideParticles();
// resume the waggling
tailWaggleTl.resume();
// keep on oinking on
oinkTl.play();
// stop the nostril flaring
panicTl.stop();
// scale down the nostrils after the piggy has calmed down
panicStopTl.progress() === 0 ? panicStopTl.play() : panicStopTl.restart();
if (dragInstance.target._gsTransform.x < 10) {
TweenMax.to(holeTl,0.2,{
time:0,
ease:Power1.easeOut
})
}
if (dragInstance.target._gsTransform.x > 0 && dragInstance.target._gsTransform.x != 10) {
jiggleAlt();
}
if (dragInstance.target._gsTransform.x === 10) {
coinTl.progress() === 0 ? coinTl.play() : coinTl.restart();
bodyJiggle();
blinkTl.stop();
//
legImpact();
//
headImpact();
}
}
})
const arrowTl = new TimelineMax({delay:0.5,repeat:-1,repeatDelay:0.3});
arrowTl.staggerTo('#arrow polyline',0.3,{alpha:1,ease:Sine.easeInOut},0.15,'in')
.staggerTo('#arrow polyline',0.3,{alpha:0,ease:Sine.easeInOut},0.15,'in+=0.3')
const onLoad = () => {
blinkTl.play();
tailWaggleTl.play();
}
onLoad();
!
