var controller; $(window).load(function() { // makes sure the whole site and images is loaded $('#container').imagesLoaded().always( function( instance ) { var tl = new TimelineMax() .to(window, 0.1, {scrollTo: {y: 0}}) .to("#loader .line", 0.5, {width: "100%", x: 0}) .to("#loader .cssload-thecube", 0.4, {opacity: 0}) .to("#loader .line", 0.2, {y: 10} , "-=0.4") .to("#loader", 1.5, {opacity: 0}) .set("html", {className: '-=loading'}) .from(".border-top", 1, {y: '-=25px'},2) .from(".border-right", 1, {x: '+=25px'}, 2) .from(".border-bottom", 1, {y: '+=25px'}, 2) .from(".border-left", 1, {x: '-=25px'}, 2) .from("#intro h1.title", 0.4, {ease: Linear.easeNone, opacity: 0}, 1) .from("#intro h1.baseline", 0.4, {ease: Linear.easeNone, opacity: 0}, 1.3) .from("#intro .senz", 1, {opacity: 0, y: '+=50px'}, 1.5) .from("#intro .btn-scroll", 1.0, {ease: Elastic. easeOut.config( 1, 0.75), y: '+=100px'}, "+=0.5"); }); // Init ScollMagic controller controller = new ScrollMagic.Controller(); // Paralax intro bg var tween = new TimelineMax() .to(".no-touch .introBg1", 3.5, {y: 100}, 0) .to(".no-touch .introBg2", 3.5, {y: -50}, 0) .to("#intro", 1.5, {opacity: 0.2}, 2); var scene = new ScrollMagic.Scene({triggerElement: "#introPlaceholder", triggerHook: "onLeave", duration: "200%"}) .setTween(tween) //.addIndicators() .addTo(controller); if($('html').hasClass("no-touch")) { // Hand image sequence var images = [ "../images/handswipe/02.png", "../images/handswipe/03.png", "../images/handswipe/04.png", "../images/handswipe/05.png", "../images/handswipe/06.png", "../images/handswipe/07.png", "../images/handswipe/08.png", "../images/handswipe/09.png", "../images/handswipe/10.png", "../images/handswipe/11.png", "../images/handswipe/12.png", "../images/handswipe/13.png", "../images/handswipe/14.png", "../images/handswipe/15.png", "../images/handswipe/16.png", "../images/handswipe/17.png", "../images/handswipe/18.png", "../images/handswipe/19.png", "../images/handswipe/20.png", "../images/handswipe/21.png", "../images/handswipe/22.png", "../images/handswipe/23.png", "../images/handswipe/24.png", "../images/handswipe/25.png", "../images/handswipe/26.png", "../images/handswipe/27.png", "../images/handswipe/28.png", "../images/handswipe/29.png", "../images/handswipe/30.png", "../images/handswipe/31.png", "../images/handswipe/32.png", "../images/handswipe/33.png", "../images/handswipe/34.png", "../images/handswipe/35.png", "../images/handswipe/36.png", "../images/handswipe/37.png", "../images/handswipe/38.png", "../images/handswipe/39.png", "../images/handswipe/40.png", "../images/handswipe/41.png", "../images/handswipe/42.png", "../images/handswipe/43.png", "../images/handswipe/44.png", "../images/handswipe/45.png", "../images/handswipe/46.png", "../images/handswipe/47.png", "../images/handswipe/48.png", "../images/handswipe/49.png", "../images/handswipe/50.png", "../images/handswipe/51.png", "../images/handswipe/52.png", "../images/handswipe/53.png", "../images/handswipe/54.png" ]; var obj = {curImg: 0}; var tween = new TimelineMax() .to(obj, 3.5, { curImg: images.length - 1, roundProps: "curImg", repeat: 0, immediateRender: true, ease: Linear.easeNone, onUpdate: function () { $(".swipe").attr("src", images[obj.curImg]); } } ) .to("#intro .btn-scroll", 0.7, { y: 100}, 0) .to("#intro .display .inner", 0.5, { ease: Elastic. easeOut.config( 1, 0.75), x: "-56%"}, 1.6); var scene = new ScrollMagic.Scene({triggerElement: "#introPlaceholder", triggerHook: "onLeave", duration: "100%", tweenChanges: true}) .setTween(tween) .setPin("#introPlaceholder") //.addIndicators() .addTo(controller); // Advantages var tween = new TimelineMax() .to("#advantages nav .arrow", 1, {left: '1%'}) .set("#advantages", {className: 'btn1'}) .to("#advantages nav .arrow", 41, {left: '42%'}) .set("#advantages", {className: 'btn2'}) .to("#advantages nav .arrow", 31, {left: '73%'}) .set("#advantages", {className: 'btn3'}) .to("#advantages nav .arrow", 71, {left: '102%'}) .to("#advantages .visual", 130, {ease: Linear.easeNone, y: '-32%'}, 0); var scene = new ScrollMagic.Scene({triggerElement: ".advantagesPin", triggerHook: "onLeave", duration: "200%"}) .setPin(".advantagesPin") .setTween(tween) //.addIndicators() .addTo(controller); } // Split variant var tween = new TimelineMax() .to(".btn-scroll-hidden", 0.1, {y: 400}) .to("#variants .split .black", 1, {width: '103%'}, 0); var scene = new ScrollMagic.Scene({triggerElement: "#variants", triggerHook: "onEnter", duration: "80%"}) .offset(500) .setTween(tween) //.addIndicators() .addTo(controller); // HACK : Disble Intro var tween = new TimelineMax() .to("#intro", 0.1, {width: "100%"}) .set("#intro", {display: "none"}); var scene = new ScrollMagic.Scene({triggerElement: "#variants", triggerHook: "onLeave"}) .setTween(tween) //.addIndicators() .addTo(controller); /* // Installers var tween = new TimelineMax() .from("#installers .visual", 1, {ease: Linear.easeNone, x: '-20%', y: '10%'}); var scene = new ScrollMagic.Scene({triggerElement: ".advantagesPin", triggerHook: "onLeave", duration: "200%"}) .offset(2200) .setTween(tween) //.addIndicators() .addTo(controller); */ // Propertie lines drawing var tween = new TimelineMax() .from(".line1-1", 1.2, {height: 0, ease:Linear.easeNone}) .from(".dot1-1", 0.5, {scale: 0}) .from("#line1", 5.5, {width: 0, ease:Linear.easeNone}, 0) .from(".line1-2", 1.2, {height: 0, ease:Linear.easeNone}, 1.7) .from(".dot1-2", 0.5, {scale: 0}, 2.9) .from(".line1-3", 1.2, {height: 0, ease:Linear.easeNone}, 2.9) .from(".dot1-3", 0.5, {scale: 0}, 4.2) .from(".line1-4", 1.2, {height: 0, ease:Linear.easeNone}, 4.2) .from(".dot1-4", 0.5, {scale: 0}, 5.5) .from(".line1-5", 1.2, {height: 0, ease:Linear.easeNone}, 5.5) .from(".dot1-5", 0.5, {scale: 0}, 6.8) .from(".line2-1", 1.2, {height: 0, ease:Linear.easeNone}, 0) .from(".dot2-1", 0.5, {scale: 0}, 0) .from("#line2", 9.2, {width: 0, ease:Linear.easeNone}, 0) .from(".line2-2", 1.2, {height: 0, ease:Linear.easeNone}, 1.7) .from(".dot2-2", 0.5, {scale: 0}, 2.9) .from(".line2-3", 1.2, {height: 0, ease:Linear.easeNone}, 2.9) .from(".dot2-3", 0.5, {scale: 0}, 4.2) .from(".line2-4", 1.2, {height: 0, ease:Linear.easeNone}, 4.2) .from(".dot2-4", 0.5, {scale: 0}, 5.5) .from(".line2-5", 1.2, {height: 0, ease:Linear.easeNone}, 5.5) .from(".dot2-5", 0.5, {scale: 0}, 6.8) .from(".line2-6", 1.2, {height: 0, ease:Linear.easeNone}, 6.8) .from(".dot2-6", 0.5, {scale: 0}, 7.9) .from(".line2-7", 1.2, {height: 0, ease:Linear.easeNone}, 7.9) .from(".dot2-7", 0.5, {scale: 0}, 9.2) .from(".line2-8", 1.2, {height: 0, ease:Linear.easeNone}, 9.2) .from(".dot2-8", 0.5, {scale: 0}, 10.4) .timeScale(3); var scene = new ScrollMagic.Scene({triggerElement: "#properties"}) .setTween(tween) //.addIndicators({name: "5 (duration: 400)"}) .addTo(controller); $(document).on("click", "#advantages nav a", function (e) { e.preventDefault(); var btn = $(this).attr("class"); $("#advantages").attr("class", btn); }); // ScrollTo Btn controller.scrollTo(function (newpos) { TweenMax.to(window, 2.5, {scrollTo: {y: newpos}}); }); $(document).on("click", "a[data-scroll]", function (e) { var id = $(this).attr("data-scroll"); if ($(id).length > 0) { e.preventDefault(); controller.scrollTo(id); // if supported by the browser we can even update the URL. if (window.history && window.history.pushState) { history.pushState("", document.title, id); } } }); /* Video btn */ $('a[data-video]').click(function(e) { e.preventDefault(); $("body").addClass("video-open"); var src = $(this).attr("data-video"); $('#video-player iframe').attr("src", src); }); /* Close video */ $('#video-player .btn-close , #video-player').click(function(e) { e.preventDefault(); $('#video-player iframe').attr("src", ""); $("body").removeClass("video-open"); }); });