TweenMax.ticker.fps(60);
var $mf = $("#middle-circle #flare"),
$s1p = $("#scene1 path"),
$mcc = $("#middle-circle circle"),
$mcf = $("#middle-circle #flare line"),
$s3p = $("#scene3 path"),
$s3c =$("#scene3 circle"),
$s3r =$("#scene3 rect"),
$s2l =$("#drawline"),
$s3fl =$("#scene3-flare line"),
$alr =$(".allrule"),
$di1 =$(".dialog1 p"),
$di2 =$(".dialog2 p"),
$di3 =$(".dialog3 p"),
$tri = $("#triangles polygon");
var $a =$("#a"),
$b =$("#b"),
$b2 =$("#b_1_"),
$b3 =$("#b_2_"),
$b4 =$("#b_3_"),
$c =$("#c"),
$d = $("#d"),
$circ1 = $("#circ-a"),
$circ2 = $("#circ-b"),
$circ3 = $("#circ-c"),
$circ4 = $("#circ-d"),
$allB = $([$b, $b2, $b3, $b4]),
$allI = $([$a, $b, $b2, $b3, $b4, $c, $d]),
$ind = $(".indicator");
TweenMax.set([$a, $b, $b2, $b3, $b4, $c, $d, $mcf, $alr, $di1], {
opacity: 0
});
TweenMax.set($tri, {perspective:400});
TweenMax.set($(".dialog, svg"), { visibility:"visible" });
TweenMax.set($("#indicator circle, #indicator ellipse"), {css:{transformPerspective:400, perspective:400, transformStyle:"preserve-3d"}});
TweenMax.set([$s1p, $s3p, $s3fl, $mcf], {
drawSVG:'100% 100%'
});
TweenMax.set($circ4, {
x:60, y:-40, scale:0.9
});
TweenMax.set($s2l, {
drawSVG:'0% 0%'
});
TweenMax.set($("#circ-a, #circ-b, #circ-c, #circ-d"), {
opacity:0
});
//scene one
function sceneOne() {
var tl = new TimelineLite();
tl.fromTo($s1p, 1, {drawSVG:'100% 100%'}, {drawSVG:'99% 100%', ease:Sine.easeIn});
tl.add("soflare");
tl.to($s1p, 1, {drawSVG:'0% -5%', ease:Sine.easeIn}, "soflare")
.staggerFromTo($("#scene1 polygon"), 0.6, {opacity:0, scale:0.3, rotation:90, transformOrigin:"50% 50%"}, {opacity:1, scale:1, rotation:90, transformOrigin:"50% 50%", ease:Expo.easeOut}, 0.3, "soflare")
.staggerTo($("#scene1 polygon"), 0.4, {opacity:0, scale:3, rotation:90, transformOrigin:"50% 50%", ease:Circ.easeOut}, 0.08, "soflare+=1.9");
return tl;
}
//midCirc
function midCirc() {
var tl = new TimelineLite();
tl.add("mid");
tl.set($mcf, {opacity:0});
tl.staggerFrom($mcc, 0.3, {opacity:0, scale:0, transformOrigin:"50% 50%", ease:Expo.easeOut}, 0.08, "mid")
.staggerTo($mcc, 0.3, {opacity:1, scale:1, transformOrigin:"50% 50%", ease:Expo.easeOut}, 0.08, "mid")
.staggerTo($mcc, 0.3, {opacity:0, scale:5, transformOrigin:"50% 50%", ease:Circ.easeIn}, 0.08, "mid+=0.3")
.fromTo($mcf, 0.6, {opacity:1, drawSVG:"0% 20%"}, {opacity:0, drawSVG:"80% 100%"}, "mid+=0.3");
return tl;
}
//scene two
function sceneTwo() {
var tl = new TimelineLite();
tl.fromTo($s2l, 0.3, {drawSVG:'0% 0%'}, {drawSVG:'0% 8%', ease:Sine.easeIn})
.to($s2l, 0.3, {drawSVG:'92% 100%', ease:Sine.easeIn})
.to($s2l, 0.3, {drawSVG:'100% 100%', ease:Sine.easeIn})
.staggerFromTo($tri, 0.6, {opacity:0, scaleX:0, transformOrigin:"0% 100%"}, {opacity:1, scaleX:1, transformOrigin:"0% 100%"}, 0.08, "-=1")
.staggerTo($tri, 0.7, {opacity:0, scaleX:0, y:-80, x:150, transformOrigin:"0% 100%", ease:Expo.easeOut}, 0.1);
return tl;
}
//scene three
function sceneThree() {
var tl = new TimelineLite();
tl.fromTo($s3p, 1, {drawSVG:'100% 100%'}, {drawSVG:'99% 100%', ease:Sine.easeIn});
tl.add("drawpaths");
tl.to($s3p, 1, {drawSVG:'0% -5%', ease:Sine.easeIn}, "drawpaths")
.fromTo($s3c, 0.3, {opacity:0}, {opacity:1}, "drawpaths")
.to($s3c, 1, {rotationX:-300, y:300, x:300, scale:5, opacity:0, ease:Expo.easeOut}, "drawpaths+=0.3")
.staggerFromTo($s3r, 0.1, {opacity:0}, {opacity:1, ease:Circ.easeOut}, 0.1, "drawpaths")
.staggerTo($s3r, 1, {opacity:0, ease:Circ.easeOut}, 0.1, "drawpaths+=0.2")
.fromTo($s3fl, 0.3, {drawSVG:'100% 100%'}, {drawSVG:'80% 100%', ease:Sine.easeIn}, "drawpaths")
.to($s3fl, 0.3, {drawSVG:'0% 20%', ease:Sine.easeIn}, "drawpaths+=0.3")
.to($s3fl, 0.3, {drawSVG:'0% 0%', ease:Sine.easeIn}, "drawpaths+=0.6");
return tl;
}
//second level deep
//first scene
function levelTwoOne() {
var tl = new TimelineLite();
tl.add(midCirc(), "circOne")
.add("scene1", "-=1.2")
.add(sceneOne(), "scene1")
.add("circTwo", "-=1.5")
.add(midCirc(), "circTwo")
.add("scene2", "-=1.5")
.add(sceneTwo(), "scene2")
.add("circThree", "-=1.5")
.add(midCirc(), "circThree")
.add("scene3", "-=0.5")
.add(sceneThree(), "scene3")
.add("circFour", "-=1")
.add(midCirc(), "circFour")
.to($di1, 0.3, {opacity:1}, "circFour+=1.5")
.to($di1, 0.3, {opacity:0}, "circFour+=4.5");
return tl;
}
//var expandSceneThree = sceneThree();
var $a =$("#a"),
$b =$("#b"),
$b2 =$("#b_1_"),
$b3 =$("#b_2_"),
$b4 =$("#b_3_"),
$c =$("#c"),
$d = $("#d"),
$circ1 = $("#circ-a"),
$circ2 = $("#circ-b"),
$circ3 = $("#circ-c"),
$circ4 = $("#circ-d"),
$allB = $([$b, $b2, $b3, $b4]),
$allI = $([$a, $b, $b2, $b3, $b4, $c, $d]),
$ind = $(".indicator");
//second level deep
//second scene
function levelTwoTwo() {
var tl = new TimelineLite();
tl.add("circOne");
tl.add(midCirc(), "circOne")
.to($circ1, 3, {opacity:1, ease:Circ.easeOut}, "circOne+=0.2")
.to($alr, 2, {opacity:1, ease:Circ.easeOut}, "circOne+=2")
.to($circ1, 1, {css:{rotationX:100, scale:0.3, z:-180}, ease:Power2.easeOut}, "circOne+=1")
.to($circ1, 1, {x:-164, y:50, ease:Power2.easeOut}, "circOne+=1")
.to($b4, 1, {opacity:1, ease:Back.easeOut}, "circOne+=2")
.to($circ1, 1, {x:-80, ease:Power2.easeOut}, "circOne+=3")
.to($b3, 1, {opacity:1, ease:Back.easeOut}, "circOne+=3.5")
.to($circ1, 1.25, {x:85, ease:Power2.easeOut}, "circOne+=4")
.to($b2, 1, {opacity:1, ease:Back.easeOut}, "circOne+=4.75")
.to($circ1, 1.25, {x:226, ease:Power2.easeOut}, "circOne+=5")
.to($b, 1, {opacity:1, ease:Back.easeOut}, "circOne+=5.5")
.to($circ1, 1, {opacity:0, ease:Circ.easeIn}, "circOne+=5.5");
tl.add("back")
.to($alr, 1, {opacity:0, ease:Circ.easeIn}, "back")
.to($allI, 1, {opacity:0, ease:Circ.easeIn}, "back");
return tl;
}
//third level deep
//third scene
function levelTwoThree() {
var tl = new TimelineLite();
tl.add("animTwo");
tl.add(sceneOne(), "animTwo");
tl.to($circ2, 3, {opacity:0.2, ease:Circ.easeOut}, "animTwo+=0.2")
.to($circ2, 1, {css:{rotationX:100, rotationY:50, scale:0.12, z:-100}, ease:Power2.easeOut}, "animTwo+=3")
.to($circ2, 1, {x:152, y:174, opacity:1, ease:Power2.easeOut}, "animTwo+=3")
.to($alr, 1, {opacity:1, ease:Circ.easeIn}, "animTwo+=3")
.to($allB, 1, {opacity:1, ease:Circ.easeIn}, "animTwo+=3")
.to($a, 1, {opacity:1, ease:Back.easeOut}, "animTwo+=3")
.to($circ2, 0.8, {opacity:0, ease:Power2.easeOut}, "animTwo+=6");
tl.add("back")
.to($alr, 1, {opacity:0, ease:Circ.easeIn}, "back")
.to($allI, 1, {opacity:0, ease:Circ.easeIn}, "back");
return tl;
}
//fourth level deep
//fourth scene
function levelTwoFour() {
var tl = new TimelineLite();
tl.add("animThree");
tl.add(sceneTwo(), "animThree");
tl.to($circ3, 3, {opacity:0.2, ease:Circ.easeOut}, "animThree")
.to($circ3, 1, {css:{rotationX:105, rotationY:-60, scale:0.12, z:-100}, ease:Power2.easeOut}, "animThree+=1.4")
.to($circ3, 1, {x:-66, y:184, opacity:1, ease:Power2.easeOut}, "animThree+=1.4")
.to($c, 1, {opacity:1, ease:Back.easeOut}, "animThree+=1.3")
.to($alr, 1, {opacity:1, ease:Circ.easeIn}, "animThree+=2")
.to($allB, 1, {opacity:1, ease:Circ.easeIn}, "animThree+=3")
.to($a, 1, {opacity:1, ease:Circ.easeIn}, "animThree+=3")
.to($circ3, 0.8, {opacity:0, ease:Power2.easeOut}, "animThree+=4");
tl.add("back+=1")
.to($alr, 1, {opacity:0, ease:Circ.easeIn}, "back")
.to($allI, 1, {opacity:0, ease:Circ.easeIn}, "back");
return tl;
}
//second level deep
//fifth scene
function levelTwoFive() {
var tl = new TimelineLite();
tl.add("animFour");
tl.add(sceneThree(), "animFour");
tl.to($circ4, 3, {opacity:0.2, ease:Circ.easeOut}, "animFour")
.to($circ4, 1, {css:{rotationX:70, rotationY:-40, scale:0.09, z:-100}, ease:Power2.easeOut}, "animFour+=2")
.to($circ4, 1, {x:165, y:48, opacity:1, ease:Power2.easeOut}, "animFour+=2")
.to($d, 1, {opacity:1, ease:Back.easeOut}, "animFour+=1.9")
.to($alr, 1, {opacity:1, ease:Circ.easeIn}, "animFour+=2")
.to($allB, 1, {opacity:1, ease:Circ.easeIn}, "animFour+=3")
.to($a, 1, {opacity:1, ease:Circ.easeIn}, "animFour+=3")
.to($c, 1, {opacity:1, ease:Circ.easeIn}, "animFour+=3")
.to($circ4, 0.8, {opacity:0, ease:Power2.easeOut}, "animFour+=5.5");
return tl;
}
//second level deep
//sixth scene
function levelTwoSix() {
var tl = new TimelineLite();
tl.add("animFive");
tl.fromTo($di2, 0.3, {opacity:0}, {opacity:1}, "animFive")
.to($di2, 0.3, {opacity:0}, "animFive+=2.5")
.to($a, 1, {x:270, ease:Circ.easeOut}, "animFive+=3")
.to($d, 1, {x:-270, ease:Circ.easeOut}, "animFive+=3");
tl.add("backT+=1")
.to($alr, 1, {opacity:0, ease:Circ.easeIn}, "backT")
.to($allI, 1, {opacity:0, ease:Circ.easeIn}, "backT");
return tl;
}
//second level deep
//seven scene
function levelTwoSeven() {
var tl = new TimelineLite();
tl.add(midCirc(), "cOne")
.add("sce3", "-=1")
.add(sceneThree(), "sce3")
.add("cTwo", "-=1.2")
.add(midCirc(), "cTwo")
.add("sce2", "-=0.5")
.add(sceneTwo(), "sce2")
.add("cThree", "-=0.5")
.add(midCirc(), "cThree")
.add("sce", "-=1")
.add(sceneOne(), "sce")
.add("cFour", "-=2")
.add(midCirc(), "cFour");
return tl;
}
//second level deep
//eighth scene
function levelTwoEight() {
var tl = new TimelineLite();
tl.add("animEight")
.to($alr, 1, {opacity:1, ease:Circ.easeIn}, "animEight")
.to($allI, 1, {opacity:1, ease:Circ.easeIn}, "animEight");
tl.fromTo($di3, 0.3, {opacity:0}, {opacity:1}, "animEight+=1")
.to($di3, 0.3, {opacity:0}, "animEight+=3");
tl.add("lessHalf")
tl.to($c, 1, {x:-45, ease:Circ.easeOut}, "lessHalf")
.to($b3, 1, {x:-35, ease:Circ.easeOut}, "lessHalf")
.to($b2, 1, {x:-75, ease:Circ.easeOut}, "lessHalf")
.to($b, 1, {x:-105, ease:Circ.easeOut}, "lessHalf")
.to($a, 1, {x:175, ease:Circ.easeOut}, "lessHalf")
.to($b4, 1, {x:-8, ease:Circ.easeOut}, "lessHalf")
.to($d, 1, {x:-285, ease:Circ.easeOut}, "lessHalf");
tl.add("backC+=1")
.to($alr, 1, {opacity:0, ease:Circ.easeIn}, "backC")
.to($allI, 1, {opacity:0, ease:Circ.easeIn}, "backC");
return tl;
}
//second level deep
//seven Nine
function levelTwoNine() {
var tl = new TimelineLite();
tl.add(midCirc(), "cOne")
.add("sce3", "-=1")
.add(sceneThree(), "sce3")
.add("cTwo", "-=1.2")
.add(midCirc(), "cTwo")
.add("sce2", "-=0.5")
.add(sceneTwo(), "sce2")
.add("cThree", "-=0.5")
.add(midCirc(), "cThree")
.add("sce", "-=1")
.add(sceneOne(), "sce")
.add("cFour", "-=2")
.add(midCirc(), "cFour");
tl.timeScale(1.8);
return tl;
}
var master = new TimelineMax({ smoothChildTiming:true });
$(document).ready(master)
master.add(levelTwoOne(), "twoOne")
.add(levelTwoTwo(), "twoTwo")
.add(levelTwoThree(), "twoThree")
.add(levelTwoFour(), "twoFour")
.add(levelTwoFive(), "twoFive")
.add(levelTwoSix(), "twoSix")
.add(levelTwoSeven(), "twoSeven")
.add(levelTwoEight(), "twoEight")
.add(levelTwoNine(), "twoNine");
master.fromTo($(".dialog4 p"), 1, {opacity:0}, {opacity:1, ease:Circ.easeIn}, "backC+=1")
.to($(".dialog4 p"), 1, {scale:0, ease:Back.easeIn}, "backC+=4")
.fromTo($(".dialog5"), 1, {scale:0, opacity:0}, {scale:1, opacity:1, ease:Back.easeOut}, "backC+=5");
//master.seek("twoEight");
!
