$(function(){ "use strict"; var tl; function zoomViewPort() { // get element location and center point on page var e = document.getElementById("animation"); if (!e) return; var er = e.getBoundingClientRect(); er.center = { 'x': er.width*0.7, 'y': er.height }; er.center.string = "" + er.center.x + "px " + er.center.y + "px"; // get viewport size var vp = { "width": window.innerWidth, "height": window.innerHeight }; // calculate transform parameters var t = {}; if(er.width>er.height){ t.scale = (er.width / er.height)*0.6; } else { t.scale = (er.height / er.width)*1.2; } t.translate = { 'x': (vp.width / 2.0 - er.center.x), 'y': (vp.height / 2.0 - er.center.y) }; tl.to(e, 1, { transformOrigin: er.center.string, scale: (1 / t.scale) , rotate: 70, ease: "Sine.easeIn" }); } function makeSVG(tag, attrs) { var el= document.createElementNS('http://www.w3.org/2000/svg', tag); for (var k in attrs) el.setAttribute(k, attrs[k]); return el; } function addBlade($parent, color='light', rotation=-45, first=false, slot=undefined) { var x,y; var width= 80; var height= 30; var rx=height/2; var ry=height/2; var duration; if (!first) duration=getRandomInRange(0.2,0.4,1); else duration=1; var blade=makeSVG('g'); var rect=makeSVG('rect', {width: width, height: height, rx: rx, ry: ry}); var $rect=$(rect); var $blade=$(blade); $blade.addClass('element blend').addClass(color); $blade.append($rect); $parent.append($blade) //var $rect=$('').addClass('segment blend').addClass(color).attr('width',width).attr('height',height).attr('rx',height/2).attr('rh',height/2).appendTo($blade); //$parent.append($blade); $blade.css('visibility','hidden') if (first) { x=0; y=0; } else x=50; tl.set($blade, { transformOrigin: "15 15", rotation: 0, x: x, y: y },slot); tl.to($blade, { duration: duration, rotation: rotation, autoAlpha: 1, ease: "Sine.easeIn" },slot); return $blade; } var arms={}; var segments=[]; var spliced=false; var flip=true; function nextColor(color) { var next; switch (color) { case 'light': next = flip?'medium':'dark'; break; case 'medium': next = flip?'dark':'light'; break; case 'dark': next = flip?'light':'medium'; break; } return next; } var windmills=[]; var blades=[]; function addWindMill($parent, color, rotation, next=true, slot=undefined) { var first, second, third, nextcolor; if (windmills.length % 2 !==1) flip=!flip; switch (rotation) { case -90: first = -30; second = 60; third = -60; break; case -210: first = -30; second = 60; third = -60; break; case 30: first = -30; second = 60; third = -60; break; default: first = 30; second = -60; third = 60; break; } var $connector=addBlade($parent, color, first, false, slot); windmills.push($connector); nextcolor=nextColor(color); blades.push({element: $connector, deg:first}); var $main2=addBlade($connector, nextcolor, second, false, slot); blades.push({element: $main2, deg:second}); nextcolor=nextColor(nextcolor); var $main3=addBlade($connector, nextcolor, third, false, slot); blades.push({element: $main3, deg:third}); if (next) addWindMill($main3, nextColor(nextcolor), -rotation, windmills.length<3); return $connector; } function startWindmill($parent, color, direction) { arms[color]=addWindMill($parent, nextColor(color), direction, true); } function start() { var $target=$('#windmill'); if (!$target.length) return; windmills=[] if (!tl) { tl = new TimelineMax({ repeat: false }); } var $main1=addBlade($target, 'light', -90, true); var $main2=addBlade($target, 'medium', -210, true); var $main3=addBlade($target, 'dark', 30, true); tl.to($target, { onComplete: refreshTriggers }, "stage-1"); tl.to($('.main-title'), {autoAlpha: 1, duration: 0.5, onComplete:logoShow}, "stage-1+=0"); zoomViewPort(); tl.to($target, { onComplete: refreshTriggers }, "zoomed"); startWindmill($main2, 'medium', -210); startWindmill($main1, 'light', -90); startWindmill($main3, 'dark',30); tl.to($target, { onComplete: refreshTriggers}, "done"); /* $.each(blades, function(i, blade){ var rnd=getRandomInRange(2,4,0); var left=parseInt(blade.deg)-parseInt(rnd); var right=parseInt(blade.deg)+parseInt(rnd); var dur=getRandomInRange(5,8,0); tl.to(blade.element, { duration: dur, rotation: ((i % 2)===1?left:right), yoyo: true, repeat: -1, ease: "Sine.easeInOut" }, "done+=1"); }); */ var queryString = location.search let params = new URLSearchParams(queryString) if (params.get("guid")) showNow(); } function refreshTriggers() { ScrollTrigger.refresh(); console.log('refresh'); } function showNow() { //tl.progress(1, false); tl.play('done'); checkTitle(); } function checkTitle() { console.log('Y '+scrollY); if (scrollY < 300) showTitle(); else showTitle(false); } function logoShow() { console.log('show logo'); checkTitle(); } function getRandomInRange(min, max, precision) { min = min === undefined ? 0 : min; max = max === undefined ? 9007199254740992 : max; precision = precision === undefined ? 0 : precision; var random = Math.random() * (max - min) + min; return random.toFixed(precision); } $( document ).ready(function() { start(); }); /*******************************************************************/ /* ftrtch dino */ /* [type: JS] [file:wfill-hero-animation] [43.3840] DESIGN*/ /*******************************************************************/ /* 0.7 P>P */ /* db 155 */ });