var kpassions = (function() {
// ORBS
var orb_tr = document.getElementById('orb-tr'),
orb_bl = document.getElementById('orb-bl'),
orb_tl = document.getElementById('orb-tl'),
orb_mr = document.getElementById('orb-mr'),
orbs = [orb_tr, orb_bl, orb_tl, orb_mr];
// BRAIN WAVES
var bwave_front = document.querySelectorAll('#bwave-front path'),
bwave_front_bl = document.querySelectorAll('#bwave-front_bl path'),
bwave_cerebellum = document.querySelectorAll('#bwave-cerebellum path'),
bwave_cerebellum_tr = document.querySelectorAll('#bwave-cerebellum_tr path'),
bwave_vein = document.querySelectorAll('#vein path');
// NODES
var nodes = document.querySelectorAll('.node'),
vein_node = document.querySelectorAll('.vein-node');
// Configs
var scale_start = {
scale: 0,
transformOrigin: 'center center'
}
var path_reverse = {
rotation: 180,
transformOrigin: 'center center'
};
var from = {
drawSVG: '0'
};
var to_default = {
drawSVG: '100%',
opacity: 0.8
};
var to_reverse = {
drawSVG: '0 100%',
opacity: 0.8
};
var unfill = {
drawSVG: '100% 100%',
opacity: 0.2
};
// Setters
TweenMax.set(bwave_front, path_reverse);
TweenMax.set([orbs, nodes, vein_node], scale_start);
// Utility Methods
// =============================================
function hideGraphic(selector) {
TweenMax.set(selector, {
visibility: 'hidden'
});
}
// Breathing
// =============================================
function breatheIn() {
var start = "M935.2,891.7C912.8,804,737.9,648.8,726.3,602.8c-7.4-29.3,0.3-59.1,9.6-88.2c1.1,1.2,2.2,2.3,3.5,3.2c1.4,1,3.7,1.8,4.6,0.3c0.4-0.7,0.3-1.5,0.2-2.3c-0.7-4.6-1.2-9.3-1.6-14c1.8,3.7,4.3,7.1,7.7,9.6c1.4,1,3.7,1.8,4.6,0.3c0.4-0.7,0.3-1.5,0.2-2.3c-2.9-19.8-3.4-40.2-1-60.1c0.2-1.1,0.3-2.1,0.4-3.2c0-0.1,0-0.3,0-0.4s0-0.1,0-0.2l0,0c16.3-139.3-69-171.2-113.4-178.4l0,0c-51.1-9.5-90.2,9.2-109.9,27.9c-14.7,13.9-28.3,30.7-47.6,36.6c-2.8,0.9-6.1,1.9-6.9,4.7c-0.8,3,1.9,5.7,4.5,7.4c2.5,1.6,5.2,3,8,4.1c-1.4,1.3-3.1,2.2-4.9,2.7c-1.1,0.3-2.5,0.7-2.7,1.9c-0.1,0.9,0.7,1.7,1.5,2.1c1.7,1,3.7,1.5,5.7,1.8c1.1,0.2,2.2,0.3,3.3,0.3c-7.3,21.1-11.8,47.2-11.8,79.2c0,51.3-8.2,67.7-12.8,72.9c-0.8,0.9-0.2,2.3,1,2.3h41.7c1.5,0,2.7,1.2,2.7,2.7l-1.3,32.9c0,1.5,0.9,2.9,2.3,3.4l9.1-0.9c1.4,0.6,1.5,2.5,0.1,3.2l-10.3,1c-0.9,0.5-1.5,1.4-1.5,2.4c0.3,13.7,7.2,109.8,91.2,109.8c0,0,67.2,79.6-45,226.2L935.2,891.7L935.2,891.7z";
var end = "M953.6,891.7c-88.5-223.2-215.7-242.9-227.3-288.9c-7.4-29.3,0.3-59.1,9.6-88.2c1.1,1.2,2.2,2.3,3.5,3.2c1.4,1,3.7,1.8,4.6,0.3c0.4-0.7,0.3-1.5,0.2-2.3c-0.7-4.6-1.2-9.3-1.6-14c1.8,3.7,4.3,7.1,7.7,9.6c1.4,1,3.7,1.8,4.6,0.3c0.4-0.7,0.3-1.5,0.2-2.3c-2.9-19.8-3.4-40.2-1-60.1c0.2-1.1,0.3-2.1,0.4-3.2c0-0.1,0-0.3,0-0.4s0-0.1,0-0.2l0,0c16.3-139.3-69-171.2-113.4-178.4l0,0c-51.1-9.5-90.2,9.2-109.9,27.9c-14.7,13.9-28.3,30.7-47.6,36.6c-2.8,0.9-6.1,1.9-6.9,4.7c-0.8,3,1.9,5.7,4.5,7.4c2.5,1.6,5.2,3,8,4.1c-1.4,1.3-3.1,2.2-4.9,2.7c-1.1,0.3-2.5,0.7-2.7,1.9c-0.1,0.9,0.7,1.7,1.5,2.1c1.7,1,3.7,1.5,5.7,1.8c1.1,0.2,2.2,0.3,3.3,0.3c-7.3,21.1-11.8,47.2-11.8,79.2c0,51.3-8.2,67.7-12.8,72.9c-0.8,0.9-0.2,2.3,1,2.3h41.7c1.5,0,2.7,1.2,2.7,2.7v28.8c0,1.5,0.9,2.9,2.3,3.4l7.8,3.2c1.4,0.6,1.5,2.5,0.1,3.2l-8.6,4.3c-0.9,0.5-1.5,1.4-1.5,2.4c0.3,13.7,5.5,106.4,89.5,106.4c0,0,40.6,66.6-45,226.2h377.7L953.6,891.7z";
var speed = 3200,
eaze = mina.linear,
silhouette = Snap.select('#child');
var outline = silhouette.attr({
d: start
});
silhouette.animate({
d: end
}, speed, eaze, function() {
setTimeout(breatheOut, 1000);
});
}
function breatheOut() {
var start = "M953.6,891.7c-88.5-223.2-215.7-242.9-227.3-288.9c-7.4-29.3,0.3-59.1,9.6-88.2c1.1,1.2,2.2,2.3,3.5,3.2c1.4,1,3.7,1.8,4.6,0.3c0.4-0.7,0.3-1.5,0.2-2.3c-0.7-4.6-1.2-9.3-1.6-14c1.8,3.7,4.3,7.1,7.7,9.6c1.4,1,3.7,1.8,4.6,0.3c0.4-0.7,0.3-1.5,0.2-2.3c-2.9-19.8-3.4-40.2-1-60.1c0.2-1.1,0.3-2.1,0.4-3.2c0-0.1,0-0.3,0-0.4s0-0.1,0-0.2l0,0c16.3-139.3-69-171.2-113.4-178.4l0,0c-51.1-9.5-90.2,9.2-109.9,27.9c-14.7,13.9-28.3,30.7-47.6,36.6c-2.8,0.9-6.1,1.9-6.9,4.7c-0.8,3,1.9,5.7,4.5,7.4c2.5,1.6,5.2,3,8,4.1c-1.4,1.3-3.1,2.2-4.9,2.7c-1.1,0.3-2.5,0.7-2.7,1.9c-0.1,0.9,0.7,1.7,1.5,2.1c1.7,1,3.7,1.5,5.7,1.8c1.1,0.2,2.2,0.3,3.3,0.3c-7.3,21.1-11.8,47.2-11.8,79.2c0,51.3-8.2,67.7-12.8,72.9c-0.8,0.9-0.2,2.3,1,2.3h41.7c1.5,0,2.7,1.2,2.7,2.7v28.8c0,1.5,0.9,2.9,2.3,3.4l7.8,3.2c1.4,0.6,1.5,2.5,0.1,3.2l-8.6,4.3c-0.9,0.5-1.5,1.4-1.5,2.4c0.3,13.7,5.5,106.4,89.5,106.4c0,0,40.6,66.6-45,226.2h377.7L953.6,891.7z";
var end = "M935.2,891.7C912.8,804,737.9,648.8,726.3,602.8c-7.4-29.3,0.3-59.1,9.6-88.2c1.1,1.2,2.2,2.3,3.5,3.2c1.4,1,3.7,1.8,4.6,0.3c0.4-0.7,0.3-1.5,0.2-2.3c-0.7-4.6-1.2-9.3-1.6-14c1.8,3.7,4.3,7.1,7.7,9.6c1.4,1,3.7,1.8,4.6,0.3c0.4-0.7,0.3-1.5,0.2-2.3c-2.9-19.8-3.4-40.2-1-60.1c0.2-1.1,0.3-2.1,0.4-3.2c0-0.1,0-0.3,0-0.4s0-0.1,0-0.2l0,0c16.3-139.3-69-171.2-113.4-178.4l0,0c-51.1-9.5-90.2,9.2-109.9,27.9c-14.7,13.9-28.3,30.7-47.6,36.6c-2.8,0.9-6.1,1.9-6.9,4.7c-0.8,3,1.9,5.7,4.5,7.4c2.5,1.6,5.2,3,8,4.1c-1.4,1.3-3.1,2.2-4.9,2.7c-1.1,0.3-2.5,0.7-2.7,1.9c-0.1,0.9,0.7,1.7,1.5,2.1c1.7,1,3.7,1.5,5.7,1.8c1.1,0.2,2.2,0.3,3.3,0.3c-7.3,21.1-11.8,47.2-11.8,79.2c0,51.3-8.2,67.7-12.8,72.9c-0.8,0.9-0.2,2.3,1,2.3h41.7c1.5,0,2.7,1.2,2.7,2.7l-1.3,32.9c0,1.5,0.9,2.9,2.3,3.4l9.1-0.9c1.4,0.6,1.5,2.5,0.1,3.2l-10.3,1c-0.9,0.5-1.5,1.4-1.5,2.4c0.3,13.7,7.2,109.8,91.2,109.8c0,0,67.2,79.6-45,226.2L935.2,891.7L935.2,891.7z";
var speed = 3000,
eaze = mina.linear,
silhouette = Snap.select('#child');
var outline = silhouette.attr({
d: start
});
silhouette.animate({
d:end
}, speed, eaze, function() {
setTimeout(breatheIn, 1000);
});
}
// Hair Movement
// =============================================
function hairUp() {
var start = "M481.2,343.7c2.5,1.6,5.2,3,8,4.1c-1.4,1.3-3.1,2.2-4.9,2.7c-1.1,0.3-2.5,0.7-2.7,1.9c-0.1,0.9,0.7,1.7,1.5,2.1c1.7,1,3.7,1.5,5.7,1.8c1.1,0.2,2.2,0.3,3.3,0.3l39.1-61.6c-14.7,13.9-28.3,30.7-47.6,36.6c-2.8,0.9-6.1,1.9-6.9,4.7C475.9,339.3,478.6,342,481.2,343.7z";
var end = "M484.5,334.9c2.5,1.6,4.8,4.1,7.6,5.2c-1.4,1.3-2.7,1.1-4.5,1.6c-1.1,0.3-2.5,0.7-2.7,1.9c-0.1,0.9,0.7,1.7,1.5,2.1c1.7,1,3.3,2.6,5.3,2.9c1.1,0.2-0.7,8,0.4,8l39.1-61.6c-14.7,13.9-25,21.9-44.3,27.8c-2.8,0.9-6.1,1.9-6.9,4.7C479.2,330.5,481.9,333.2,484.5,334.9z";
var speed = 1200,
eaze = mina.backin,
silhouette = Snap.select('#hair');
var outline = silhouette.attr({
d: start
});
silhouette.animate({
d:end
}, speed, eaze, function() {
setTimeout(hairDown, 0);
});
}
function hairDown() {
var start = "M484.5,334.9c2.5,1.6,4.8,4.1,7.6,5.2c-1.4,1.3-2.7,1.1-4.5,1.6c-1.1,0.3-2.5,0.7-2.7,1.9c-0.1,0.9,0.7,1.7,1.5,2.1c1.7,1,3.3,2.6,5.3,2.9c1.1,0.2-0.7,8,0.4,8l39.1-61.6c-14.7,13.9-25,21.9-44.3,27.8c-2.8,0.9-6.1,1.9-6.9,4.7C479.2,330.5,481.9,333.2,484.5,334.9z";
var end = "M481.2,343.7c2.5,1.6,5.2,3,8,4.1c-1.4,1.3-3.1,2.2-4.9,2.7c-1.1,0.3-2.5,0.7-2.7,1.9c-0.1,0.9,0.7,1.7,1.5,2.1c1.7,1,3.7,1.5,5.7,1.8c1.1,0.2,2.2,0.3,3.3,0.3l39.1-61.6c-14.7,13.9-28.3,30.7-47.6,36.6c-2.8,0.9-6.1,1.9-6.9,4.7C475.9,339.3,478.6,342,481.2,343.7z";
var speed = 1200,
eaze = mina.backout,
silhouette = Snap.select('#hair');
var outline = silhouette.attr({
d: start
});
silhouette.animate({
d:end
}, speed, eaze, function() {
setTimeout(hairUp, 0);
});
}
// Facial Movements
// =============================================
function blink() {
var tl = new TimelineMax({
repeat: -1,
repeatDelay: 3,
yoyo: true
});
var eye = document.querySelector('.kp #eye'),
duration = 0.5;
TweenMax.set(eye, { transformOrigin: 'bottom center' })
var blink = {
scaleY: 0,
ease: Power1.easeIn
};
var open = {
scaleY: 1,
ease: Power1.easeOut
};
tl.to(eye, duration, blink)
.to(eye, duration, open);
return tl;
}
// Silhouette Orb
// =============================================
function orbPulse() {
var tl = new TimelineMax();
var orbs = document.querySelectorAll('#pulse circle'),
stagger_in = 0.2,
stagger_out = stagger_in,
duration_in = 1,
duration_out = duration_in,
orb_array = [orbs[5], orbs[4], orbs[3], orbs[2], orbs[1], orbs[0]];
hideGraphic(orbs);
var from = {
transformOrigin: 'center center',
scale: 0,
ease: Cubic.easeIn
};
var to = {
scale: 1,
opacity: 1,
visibility: 'visible',
ease: Cubic.easeOut
};
var fade = {
opacity: 0,
ease: Ease.easeOut
};
tl.staggerFromTo(orb_array, duration_in, from, to, stagger_in)
.staggerTo(orb_array, duration_out, fade, stagger_out);
tl.timeScale(3);
return tl
}
// Floating Orbs
// =============================================
var bezier_topleft = [
{ x: 0, y: 0 },
{ x: 5, y: 12 },
{ x: -4, y: -24 },
{ x: 1, y: 24 },
{ x: 5, y: 0 },
{ x: 0, y: 0 }
];
var bezier_bottomleft = [
{ x: 0, y: 0 },
{ x: 14, y: 12 },
{ x: -4, y: -24 },
{ x: 25, y: 24 },
{ x: 10, y: -10 },
{ x: 20, y: 24 },
{ x: 10, y: 27 },
{ x: 0, y: 0 },
{ x: -10, y: 36 },
{ x: 20, y: 0 },
{ x: -15, y: 36 },
{ x: 10, y: -6 },
{ x: -15, y: 36 },
{ x: 0, y: 0 }
];
var bezier_bottomright = [
{ x: 0, y: 0 },
{ x: -15, y: 12 },
{ x: 14, y: -24 },
{ x: -14, y: 24 },
{ x: 14, y: -24 },
{ x: -14, y: 24 },
{ x: 14, y: -24 },
{ x: 0, y: 0 }
];
var bezier_topright = [
{ x: 0, y: 0 },
{ x: 5, y: 12 },
{ x: -4, y: -24 },
{ x: 1, y: 24 },
{ x: 5, y: 0 },
{ x: 0, y: 0 },
{ x: 5, y: 12 },
{ x: -4, y: -24 },
{ x: 1, y: 24 },
{ x: 5, y: 0 },
{ x: 0, y: 0 },
{ x: 5, y: 12 },
{ x: -4, y: -24 },
{ x: 1, y: 24 },
{ x: 5, y: 0 },
{ x: 0, y: 0 },
{ x: 5, y: 12 },
{ x: -4, y: -24 },
{ x: 1, y: 24 },
{ x: 5, y: 0 },
{ x: 0, y: 0 }
];
function orbFloat(selector, duration, bezier) {
var tl = new TimelineMax();
tl.to(selector, duration, { bezier: {
type: 'thru',
values: bezier
}, ease: Linear.easeInOut });
return tl;
}
// Orb Bubbling
// =============================================
function orbBubbleIn(selector, duration) {
var tl = new TimelineMax();
var to = {
scale: 1,
ease: Elastic.easeOut
};
tl.to(selector, duration, to);
return tl;
}
function orbBubbleOut(selector, duration) {
var tl = new TimelineMax();
var to = {
transformOrigin: 'center center',
scale: 0,
ease: Elastic.easeInOut
};
tl.to(selector, duration, to);
return tl;
}
// Pulsing Brain Nodes
// =============================================
TweenMax.set([nodes,vein_node], { visibility: 'visible' });
function nodePulseIn(selector, n) {
var tl = new TimelineMax();
var duration = 0.5;
var pulse_in = {
scale: 1,
opacity: 1,
ease: Power1.easeIn
};
tl.to(selector[n], duration, pulse_in);
return tl;
}
function nodePulseOut(selector) {
var tl = new TimelineMax();
var duration = 0.5;
var pulse_out = {
scale: 0,
opacity: 0,
ease: Power1.easeOut
};
tl.to(selector, duration, pulse_out);
return tl;
}
// Idea Data Flow
// =============================================
function transmissionTopLeft() {
var tl = new TimelineMax({
repeat: -1
});
tl.add(orbBubbleIn(orb_tl, 1), 0)
.add(orbFloat(orb_tl, 21, bezier_topleft), 0)
.add('transmit')
.fromTo(bwave_front, 1, from, to_default, 'transmit')
.add('wave')
.add(nodePulseIn(nodes, 0), 'wave-=0.25')
.add(orbPulse(), 'wave')
.add('pulse')
.add(nodePulseIn(vein_node, 0), 'pulse-=1')
.fromTo(bwave_vein, 1, from, to_reverse, 'pulse')
.add('unfill')
.add(nodePulseOut(nodes, 0), 'unfill+=0.25')
.add(nodePulseOut(vein_node, 0), 'unfill')
.add(orbFloat(orb_tl, 21, bezier_topleft), 'unfill+=0.5')
.to(bwave_front, 1, unfill, 'unfill')
.to(bwave_vein, 1, unfill, 'unfill+=0.25')
.add(orbBubbleOut(orb_tl, 1));
return tl;
}
function transmissionBottomLeft() {
var tl = new TimelineMax({
repeat: -1
});
tl.add(orbBubbleIn(orb_bl, 1), 0)
.add(orbFloat(orb_bl, 63.975, bezier_bottomleft), 0)
.add('transmit')
.fromTo(bwave_front_bl, 1, from, to_default, 'transmit')
.add('wave')
.add(nodePulseIn(nodes, 1), 'wave-=0.25')
.add(orbPulse(), 'wave')
.add('pulse')
.add(nodePulseIn(vein_node, 0), 'pulse-=1')
.fromTo(bwave_vein, 1, from, to_reverse, 'pulse')
.add('unfill')
.add(nodePulseOut(nodes, 1), 'unfill+=0.25')
.add(nodePulseOut(vein_node, 0), 'unfill')
.add(orbFloat(orb_bl, 63.975, bezier_bottomleft), 'unfill+=0.5')
.to(bwave_front_bl, 1, unfill, 'unfill')
.to(bwave_vein, 1, unfill, 'unfill+=0.25')
.add(orbBubbleOut(orb_bl, 1));
return tl;
}
function transmissionBottomRight() {
var tl = new TimelineMax({
repeat: -1
});
tl.add(orbBubbleIn(orb_mr, 1), 0)
.add(orbFloat(orb_mr, 42.21375, bezier_bottomright), 0)
.add('transmit')
.fromTo(bwave_cerebellum, 1, from, to_default, 'transmit')
.add('wave')
.add(nodePulseIn(nodes, 2), 'wave-=0.25')
.add(orbPulse(), 'wave')
.add('pulse')
.add(nodePulseIn(vein_node, 0), 'pulse-=1')
.fromTo(bwave_vein, 1, from, to_reverse, 'pulse')
.add('unfill')
.add(nodePulseOut(nodes, 2), 'unfill+=0.25')
.add(nodePulseOut(vein_node, 0), 'unfill')
.add(orbFloat(orb_mr, 42.21375, bezier_bottomright), 'unfill+=0.5')
.to(bwave_cerebellum, 1, unfill, 'unfill')
.to(bwave_vein, 1, unfill, 'unfill+=0.25')
.add(orbBubbleOut(orb_mr, 1));
return tl;
}
function transmissionTopRight() {
var tl = new TimelineMax({
repeat: -1
});
tl.add(orbBubbleIn(orb_tr, 1), 0)
.add(orbFloat(orb_tr, 55, bezier_topright), 0)
.add('transmit')
.fromTo(bwave_cerebellum_tr, 1, from, to_default, 'transmit')
.add('wave')
.add(nodePulseIn(nodes, 3), 'wave-=0.25')
.add(orbPulse(), 'wave')
.add('pulse')
.add(nodePulseIn(vein_node, 0), 'pulse-=1')
.fromTo(bwave_vein, 1, from, to_reverse, 'pulse')
.add('unfill')
.add(nodePulseOut(nodes, 3), 'unfill+=0.25')
.add(nodePulseOut(vein_node, 0), 'unfill')
.add(orbFloat(orb_tr, 55, bezier_topright), 'unfill+=0.5')
.to(bwave_cerebellum_tr, 1, unfill, 'unfill')
.to(bwave_vein, 1, unfill, 'unfill+=0.25')
.add(orbBubbleOut(orb_tr, 1));
return tl;
}
//////////////////////////////////////////////////////
var laser = document.querySelector("#laser");
var brain = document.querySelector("#brain");
function Orb(config, index) {
var node = config.target;
var tl = new TimelineMax({ repeat: -1 });
tl.to(node, config.duration, { bezier: {
type: 'thru',
values: config.bezier
}, ease: Linear.easeInOut });
TweenLite.delayedCall(index * 0.25, start);
var orb = {
tl: tl,
node: node,
fire: fire
};
return orb;
function start() {
TweenLite.to(node, 1, { scale: 1, ease: Elastic.easeOut });
}
function fire(callback) {
tl.pause();
var bbox1 = node.getBBox();
var bbox2 = brain.getBBox();
TweenLite.set(laser, {
drawSVG: 0,
autoAlpha: 1,
attr: {
x1: bbox1.x + bbox1.width / 2,
y1: bbox1.y + bbox1.height / 2,
x2: bbox2.x + bbox2.width / 2,
y2: bbox2.y + bbox2.height / 2,
}
});
TweenMax.to(laser, 1, {
drawSVG: true,
repeat: 1,
yoyo: true,
repeatDelay: 1,
onComplete: function() {
tl.play();
callback();
}
});
}
}
var orbConfig = [
{ target: orb_tl, duration: 21, bezier: bezier_topleft },
{ target: orb_bl, duration: 64, bezier: bezier_bottomleft },
{ target: orb_mr, duration: 42, bezier: bezier_bottomright },
{ target: orb_tr, duration: 55, bezier: bezier_topright }
];
var orbs = orbConfig.map(Orb);
var size = orbs.length;
fireLaser(random(4, true));
function fireLaser(delay) {
TweenLite.delayedCall(delay, function() {
getRandom().fire(function() {
fireLaser(random(1, 4, true));
});
});
}
function getRandom() {
return orbs[random(size - 1)];
}
function random(min, max, float) {
if (max == null) {
max = min;
min = 0;
}
return float
? min + Math.random() * (max - min + 1)
: min + Math.floor(Math.random() * (max - min + 1));
}
// Master Timeline
// =============================================
function timeline() {
// http://greensock.com/docs/#/HTML5/GSAP/TimelineMax/TimelineMax
var master = new TimelineMax({
smoothChildTiming: true,
tweens: [
//transmissionTopLeft(),
//transmissionBottomLeft(),
//transmissionBottomRight(),
//transmissionTopRight()
],
stagger: 0.25
});
master.timeScale(6)
return master;
}
return {
init: function(){
blink();
breatheIn();
timeline();
}
};
})();
kpassions.init();