var $nb = $(".moveup"), $t1 = $(".t-1"), $t2 = $(".t-2"), $t3 = $(".t-3"), $t4 = $(".t-4"), $t5 = $(".t-5"), $path = [{x:-150, y:20}, {x:-75, y:40}, {x:0, y:60}]; TweenMax.set("p, #mstar, #lstar", {perspective:400}); TweenMax.set("p, .moveup", {visibility:"visible"}); // introvert function sceneOne() { var tl = new TimelineLite(); sT = new SplitText($t1, {type:"words"}); sT2 = new SplitText($t2, {type:"chars, words"}); tl.staggerFrom(sT.words, 1, {opacity:0, rotationY:-90, ease:Circ.easeOut}, 0.3, "+=1") .staggerTo(sT.words, 0.8, {rotationY:90, opacity:0, ease:Power4.easeIn}, 0.1, "+=0.5") .staggerFrom(sT2.chars, 1, {opacity:0, rotationY:-90, y:-10, ease:Elastic.easeOut}, 0.05, "+=0.5") .staggerTo(sT2.words, 0.8, {rotation:180, scale:0, opacity:0, ease:Back.easeIn}, 0.1, "+=0.5") .from($t3, 1, {opacity:0, ease:Back.easeOut}) .to($t3, 0.75, {opacity:0, ease:Back.easeOut}, "+=0.75") ; return tl; } // show function sceneTwo() { var tl = new TimelineLite(); sT4 = new SplitText($t4, {type:"chars, lines"}); tl.add("bringin"); tl.to($nb, 7, {autoAlpha:1, ease:Back.easeOut}, "bringin") .from($("#objects"), 2, {scale:0, rotation:120, transformOrigin:"50% 50%", ease:Expo.easeOut}, "bringin") .from($("#lines"), 3, {autoAlpha:1, scale:0, rotation:-500, transformOrigin:"50% 50%", ease:Back.easeOut}, "bringin") .staggerFrom(sT4.chars, 1, {opacity:0, rotationY:-90, ease:Circ.easeOut}, 0.1, "bringin+=1") .staggerTo(sT4.lines, 1.5, {rotationY:-90, scale:0, bezier:$path, opacity:0, ease:Power4.easeIn}, 0.1, "bringin+=5") .staggerFrom($("#lines line"), 5, {scale:0, rotation:-10, transformOrigin:"50%", ease:Back.easeOut}, 0.1, "bringin=+2") .staggerFromTo($("#motorcycle path, #ball path, #squiggle path, #elephant path"), 1.5, { drawSVG: '0' }, { drawSVG: true }, 0.01, "bringin=+3") .fromTo($("#bstar, #lstar, #lstar2, #lines line"), 8, { drawSVG: '0' }, { drawSVG: true }, "bringin=+1") ; return tl; } // away function sceneThree() { var tl = new TimelineLite(); tl.add("bringout-=16"); tl.staggerFromTo($("#squiggle path"), 1.5, { drawSVG: true }, { drawSVG: '0' }, 0.01, "bringout") .to($("#objects"), 3, {autoAlpha:0, scale:4, rotation:90, transformOrigin:"50% 50%", ease:Back.easeIn}, "bringout") .fromTo($("#bstar, #lstar, #lstar2, #lines line"), 8, { drawSVG: true }, { drawSVG: '0' }, "bringout") .to($("#lines"), 3, {autoAlpha:0, scale:4, rotation:-500, transformOrigin:"50% 50%", ease:Back.easeIn}, "bringout") .to($nb, 4, {opacity:0.7, ease:Expo.easeIn}, "bringout") .to($t5, 6, {opacity:0.85, y:10, scale:1, ease:Expo.easeOut}, "bringout+=4") ; return tl; } var master = new TimelineLite(); $(document).ready(master) master.add(sceneOne(), "scene1") .add(sceneTwo(), "scene2") .add(sceneThree(), "scene3"); //master.seek("scene2");