/*! * GSAP 3.5.1 * https://greensock.com * * @license Copyright 2020, GreenSock. All rights reserved. * Subject to the terms at https://greensock.com/standard-license or for Club GreenSock members, the agreement issued with that membership. * @author: Jack Doyle, jack@greensock.com */ !function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define(["exports"],e):e((t=t||self).window=t.window||{})}(this,function(e){"use strict";function _inheritsLoose(t,e){t.prototype=Object.create(e.prototype),(t.prototype.constructor=t).__proto__=e}function _assertThisInitialized(t){if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t}function n(t){return"string"==typeof t}function o(t){return"function"==typeof t}function p(t){return"number"==typeof t}function q(t){return void 0===t}function r(t){return"object"==typeof t}function s(t){return!1!==t}function t(){return"undefined"!=typeof window}function u(t){return o(t)||n(t)}function K(t){return(l=mt(t,ot))&&ae}function L(t,e){return console.warn("Invalid property",t,"set to",e,"Missing plugin? gsap.registerPlugin()")}function M(t,e){return!e&&console.warn(t)}function N(t,e){return t&&(ot[t]=e)&&l&&(l[t]=e)||ot}function O(){return 0}function Y(t){var e,i,n=t[0];if(r(n)||o(n)||(t=[t]),!(e=(n._gsap||{}).harness)){for(i=_t.length;i--&&!_t[i].targetTest(n););e=_t[i]}for(i=t.length;i--;)t[i]&&(t[i]._gsap||(t[i]._gsap=new It(t[i],e)))||t.splice(i,1);return t}function Z(t){return t._gsap||Y(bt(t))[0]._gsap}function $(t,e,r){return(r=t[e])&&o(r)?t[e]():q(r)&&t.getAttribute&&t.getAttribute(e)||r}function _(t,e){return(t=t.split(",")).forEach(e)||t}function aa(t){return Math.round(1e5*t)/1e5||0}function ba(t,e){for(var r=e.length,i=0;t.indexOf(e[i])<0&&++it._dur||e._start<0))for(var r=t;r;)r._dirty=1,r=r.parent;return t}function ua(t){return t._repeat?gt(t._tTime,t=t.duration()+t._rDelay)*t:0}function wa(t,e){return(t-e._start)*e._ts+(0<=e._ts?0:e._dirty?e.totalDuration():e._tDur)}function xa(t){return t._end=aa(t._start+(t._tDur/Math.abs(t._ts||t._rts||U)||0))}function ya(t,e){var r=t._dp;return r&&r.smoothChildTiming&&t._ts&&(t._start=aa(t._dp._time-(0U)&&e.render(r,!0)),ra(t,e)._dp&&t._initted&&t._time>=t._dur&&t._ts){if(t._dura;)s=s._prev;s?(e._next=s._next,s._next=e):(e._next=t[r],t[r]=e),e._next?e._next._prev=e:t[i]=e,e._prev=s,e.parent=e._dp=t}(t,e,"_first","_last",t._sort?"_start":0),t._recent=e,i||za(t,e),t}function Ba(t,e){return(ot.ScrollTrigger||L("scrollTrigger",e))&&ot.ScrollTrigger.create(e,t)}function Ca(t,e,r,i){return Nt(t,e),t._initted?!r&&t._pt&&(t._dur&&!1!==t.vars.lazy||!t._dur&&t.vars.lazy)&&d!==At.frame?(ht.push(t),t._lazy=[e,i],1):void 0:1}function Fa(t,e,r,i){var n=t._repeat,a=aa(e)||0,s=t._tTime/t._tDur;return s&&!i&&(t._time*=a/t._dur),t._dur=a,t._tDur=n?n<0?1e10:aa(a*(n+1)+t._rDelay*n):a,s&&!i?ya(t,t._tTime=t._tDur*s):t.parent&&xa(t),r||ra(t.parent,t),t}function Ga(t){return t instanceof Bt?ra(t):Fa(t,t._dur)}function Ia(t,e){var r,i,a=t.labels,s=t._recent||vt,o=t.duration()>=B?s.endTime(!1):t._dur;return n(e)&&(isNaN(e)||e in a)?"<"===(r=e.charAt(0))||">"===r?("<"===r?s._start:s.endTime(0<=s._repeat))+(parseFloat(e.substr(1))||0):(r=e.indexOf("="))<0?(e in a||(a[e]=o),a[e]):(i=+(e.charAt(r-1)+e.substr(r+1)),1(n=Math.abs(n))&&(a=i,o=n);return a}function fb(t){return qa(t),t.progress()<1&&xt(t,"onInterrupt"),t}function kb(t,e,r){return(6*(t=t<0?t+1:1>16,t>>8&kt,t&kt]:0:Ot.black;if(!_){if(","===t.substr(-1)&&(t=t.substr(0,t.length-1)),Ot[t])_=Ot[t];else if("#"===t.charAt(0))4===t.length&&(t="#"+(i=t.charAt(1))+i+(n=t.charAt(2))+n+(a=t.charAt(3))+a),_=[(t=parseInt(t.substr(1),16))>>16,t>>8&kt,t&kt];else if("hsl"===t.substr(0,3))if(_=d=t.match(et),e){if(~t.indexOf("="))return _=t.match(rt),r&&_.length<4&&(_[3]=1),_}else s=+_[0]%360/360,o=_[1]/100,i=2*(u=_[2]/100)-(n=u<=.5?u*(o+1):u+o-u*o),3<_.length&&(_[3]*=1),_[0]=kb(s+1/3,i,n),_[1]=kb(s,i,n),_[2]=kb(s-1/3,i,n);else _=t.match(et)||Ot.transparent;_=_.map(Number)}return e&&!d&&(i=_[0]/kt,n=_[1]/kt,a=_[2]/kt,u=((h=Math.max(i,n,a))+(l=Math.min(i,n,a)))/2,h===l?s=o=0:(f=h-l,o=.5=r&&te)return i;i=i._next}else for(i=t._last;i&&i._start>=r;){if(!i._dur&&"isPause"===i.data&&i._start=n._start)&&n._ts&&h!==n){if(n.parent!==this)return this.render(t,e,r);if(n.render(0=this.totalDuration()||!v&&c)&&(f!==this._start&&Math.abs(l)===Math.abs(this._ts)||this._lock||(!t&&g||!(v===m&&0=i&&(a instanceof Xt?e&&n.push(a):(r&&n.push(a),t&&n.push.apply(n,a.getChildren(!0,e,r)))),a=a._next;return n},t.getById=function getById(t){for(var e=this.getChildren(1,1,1),r=e.length;r--;)if(e[r].vars.id===t)return e[r]},t.remove=function remove(t){return n(t)?this.removeLabel(t):o(t)?this.killTweensOf(t):(pa(this,t),t===this._recent&&(this._recent=this._last),ra(this))},t.totalTime=function totalTime(t,e){return arguments.length?(this._forcing=1,!this._dp&&this._ts&&(this._start=aa(At.time-(0e:!e||a.isActive())&&i.push(a):(r=a.getTweensOf(n,e)).length&&i.push.apply(i,r),a=a._next;return i},t.tweenTo=function tweenTo(t,e){e=e||{};var r=this,i=Ia(r,t),n=e.startAt,a=e.onStart,s=e.onStartParams,o=Xt.to(r,ha(e,{ease:"none",lazy:!1,time:i,overwrite:"auto",duration:e.duration||Math.abs((i-(n&&"time"in n?n.time:r._time))/r.timeScale())||U,onStart:function onStart(){r.pause();var t=e.duration||Math.abs((i-r._time)/r.timeScale());o._dur!==t&&Fa(o,t,0,1).render(o._time,!0,!0),a&&a.apply(o,s||[])}}));return o},t.tweenFromTo=function tweenFromTo(t,e,r){return this.tweenTo(e,ha({startAt:{time:Ia(this,t)}},r))},t.recent=function recent(){return this._recent},t.nextLabel=function nextLabel(t){return void 0===t&&(t=this._time),db(this,Ia(this,t))},t.previousLabel=function previousLabel(t){return void 0===t&&(t=this._time),db(this,Ia(this,t),1)},t.currentLabel=function currentLabel(t){return arguments.length?this.seek(t,!0):this.previousLabel(this._time+U)},t.shiftChildren=function shiftChildren(t,e,r){void 0===r&&(r=0);for(var i,n=this._first,a=this.labels;n;)n._start>=r&&(n._start+=t,n._end+=t),n=n._next;if(e)for(i in a)a[i]>=r&&(a[i]+=t);return ra(this)},t.invalidate=function invalidate(){var t=this._first;for(this._lock=0;t;)t.invalidate(),t=t._next;return i.prototype.invalidate.call(this)},t.clear=function clear(t){void 0===t&&(t=!0);for(var e,r=this._first;r;)e=r._next,this.remove(r),r=e;return this._time=this._tTime=this._pTime=0,t&&(this.labels={}),ra(this)},t.totalDuration=function totalDuration(t){var e,r,i,n=0,a=this,s=a._last,o=B;if(arguments.length)return a.timeScale((a._repeat<0?a.duration():a.totalDuration())/(a.reversed()?-t:t));if(a._dirty){for(i=a.parent;s;)e=s._prev,s._dirty&&s.totalDuration(),o<(r=s._start)&&a._sort&&s._ts&&!a._lock?(a._lock=1,Aa(a,s,r-s._delay,1)._lock=0):o=r,r<0&&s._ts&&(n-=r,(!i&&!a._dp||i&&i.smoothChildTiming)&&(a._start+=r/a._ts,a._time-=r,a._tTime-=r),a.shiftChildren(-r,!1,-Infinity),o=0),s._end>n&&s._ts&&(n=s._end),s=e;Fa(a,a===E&&a._time>n?a._time:n,1,1),a._dirty=0}return a._tDur},Timeline.updateRoot=function updateRoot(t){if(E._ts&&(ea(E,wa(t,E)),d=At.frame),At.frame>=pt){pt+=j.autoSleep||120;var e=E._first;if((!e||!e._ts)&&j.autoSleep&&At._listeners.length<2){for(;e&&!e._ts;)e=e._next;e||At.sleep()}}},Timeline}(Lt);ha(Bt.prototype,{_lock:0,_hasPause:0,_forcing:0});function Nb(t,e,i,a,s,u){var h,l,f,d;if(ft[t]&&!1!==(h=new ft[t]).init(s,h.rawVars?e[t]:function _processVars(t,e,i,a,s){if(o(t)&&(t=jt(t,s,e,i,a)),!r(t)||t.style&&t.nodeType||tt(t)||H(t))return n(t)?jt(t,s,e,i,a):t;var u,h={};for(u in t)h[u]=jt(t[u],s,e,i,a);return h}(e[t],a,s,u,i),i,a,u)&&(i._pt=l=new ie(i._pt,s,t,0,1,h.render,h,0,h.priority),i!==c))for(f=i._ptLookup[i._targets.indexOf(s)],d=h._props.length;d--;)f[h._props[d]]=l;return h}var qt,Yt=function _addPropTween(t,e,r,i,a,s,u,h,l){o(i)&&(i=i(a||0,t,s));var f,d=t[e],p="get"!==r?r:o(d)?l?t[e.indexOf("set")||!o(t["get"+e.substr(3)])?e:"get"+e.substr(3)](l):t[e]():d,_=o(d)?l?Jt:Zt:Gt;if(n(i)&&(~i.indexOf("random(")&&(i=ab(i)),"="===i.charAt(1)&&(i=parseFloat(p)+parseFloat(i.substr(2))*("-"===i.charAt(0)?-1:1)+(La(p)||0))),p!==i)return isNaN(p*i)?(d||e in t||L(e,i),function _addComplexStringPropTween(t,e,r,i,n,a,s){var o,u,h,l,f,d,p,_,c=new ie(this._pt,t,e,0,1,Ht,null,n),m=0,g=0;for(c.b=r,c.e=i,r+="",(p=~(i+="").indexOf("random("))&&(i=ab(i)),a&&(a(_=[r,i],t,e),r=_[0],i=_[1]),u=r.match(nt)||[];o=nt.exec(i);)l=o[0],f=i.substring(m,o.index),h?h=(h+1)%5:"rgba("===f.substr(-5)&&(h=1),l!==u[g++]&&(d=parseFloat(u[g-1])||0,c._pt={_next:c._pt,p:f||1===g?f:",",s:d,c:"="===l.charAt(1)?parseFloat(l.substr(2))*("-"===l.charAt(0)?-1:1):parseFloat(l)-d,m:h&&h<4?Math.round:0},m=nt.lastIndex);return c.c=m")});else{if(f=D.length,c=b?Sa(b):O,r(b))for(d in b)~Ut.indexOf(d)&&((m=m||{})[d]=b[d]);for(h=0;hU&&!t._dp._lock||(t._ts<0||t._dp._ts<0)&&"isFromStart"!==t.data&&"isStart"!==t.data?0:1,u=t._rDelay,h=0;if(u&&t._repeat&&(h=yt(0,t._tDur,e),gt(h,u)!==(a=gt(t._tTime,u))&&(s=1-o,t.vars.repeatRefresh&&t._initted&&t.invalidate())),o!==s||i||t._zTime===U||!e&&t._zTime){if(!t._initted&&Ca(t,e,i,r))return;for(a=t._zTime,t._zTime=e||(r?U:0),r=r||e&&!a,t.ratio=o,t._from&&(o=1-o),t._time=0,t._tTime=h,r||xt(t,"onStart"),n=t._pt;n;)n.r(o,n.d),n=n._next;t._startAt&&e<0&&t._startAt.render(e,!0,!0),t._onUpdate&&!r&&xt(t,"onUpdate"),h&&t._repeat&&!r&&t.parent&&xt(t,"onRepeat"),(e>=t._tDur||e<0)&&t.ratio===o&&(o&&qa(t,1),r||(xt(t,o?"onComplete":"onReverseComplete",!0),t._prom&&t._prom()))}else t._zTime||(t._zTime=e)}(this,t,e,r);return this},t.targets=function targets(){return this._targets},t.invalidate=function invalidate(){return this._pt=this._op=this._startAt=this._onUpdate=this._act=this._lazy=0,this._ptLookup=[],this.timeline&&this.timeline.invalidate(),S.prototype.invalidate.call(this)},t.kill=function kill(t,e){if(void 0===e&&(e="all"),!(t||e&&"all"!==e)&&(this._lazy=0,this.parent))return fb(this);if(this.timeline){var r=this.timeline.totalDuration();return this.timeline.killTweensOf(t,e,qt&&!0!==qt.vars.overwrite)._first||fb(this),this.parent&&r!==this.timeline.totalDuration()&&Fa(this,this._dur*this.timeline._tDur/r,0,1),this}var i,a,s,o,u,h,l,f=this._targets,d=t?bt(t):f,p=this._ptLookup,c=this._pt;if((!e||"all"===e)&&function _arraysMatch(t,e){for(var r=t.length,i=r===e.length;i&&r--&&t[r]===e[r];);return r<0}(f,d))return"all"===e&&(this._pt=0),fb(this);for(i=this._op=this._op||[],"all"!==e&&(n(e)&&(u={},_(e,function(t){return u[t]=1}),e=u),e=function _addAliasesToVars(t,e){var r,i,n,a,s=t[0]?Z(t[0]).harness:0,o=s&&s.aliases;if(!o)return e;for(i in r=mt({},e),o)if(i in r)for(n=(a=o[i].split(",")).length;n--;)r[a[n]]=r[i];return r}(f,e)),l=f.length;l--;)if(~d.indexOf(f[l]))for(u in a=p[l],"all"===e?(i[l]=e,o=a,s={}):(s=i[l]=i[l]||{},o=e),o)(h=a&&a[u])&&("kill"in h.d&&!0!==h.d.kill(u)||pa(this,h,"_pt"),delete a[u]),"all"!==s&&(s[u]=1);return this._initted&&!this._pt&&c&&fb(this),this},Tween.to=function to(t,e,r){return new Tween(t,e,r)},Tween.from=function from(t,e){return new Tween(t,ca(arguments,1))},Tween.delayedCall=function delayedCall(t,e,r,i){return new Tween(e,0,{immediateRender:!1,lazy:!1,overwrite:!1,delay:t,onComplete:e,onReverseComplete:e,onCompleteParams:r,onReverseCompleteParams:r,callbackScope:i})},Tween.fromTo=function fromTo(t,e,r){return new Tween(t,ca(arguments,2))},Tween.set=function set(t,e){return e.duration=0,e.repeatDelay||(e.repeat=0),new Tween(t,e)},Tween.killTweensOf=function killTweensOf(t,e,r){return E.killTweensOf(t,e,r)},Tween}(Lt);ha(Xt.prototype,{_targets:[],_lazy:0,_startAt:0,_op:0,_onInit:0}),_("staggerTo,staggerFrom,staggerFromTo",function(r){Xt[r]=function(){var t=new Bt,e=Tt.call(arguments,0);return e.splice("staggerFromTo"===r?5:4,0,0),t[r].apply(t,e)}});function Yb(t,e,r){return t.setAttribute(e,r)}function ec(t,e,r,i){i.mSet(t,e,i.m.call(i.tween,r,i.mt),i)}var Gt=function _setterPlain(t,e,r){return t[e]=r},Zt=function _setterFunc(t,e,r){return t[e](r)},Jt=function _setterFuncWithParam(t,e,r,i){return t[e](i.fp,r)},Qt=function _getSetter(t,e){return o(t[e])?Zt:q(t[e])&&t.setAttribute?Yb:Gt},Wt=function _renderPlain(t,e){return e.set(e.t,e.p,Math.round(1e4*(e.s+e.c*t))/1e4,e)},$t=function _renderBoolean(t,e){return e.set(e.t,e.p,!!(e.s+e.c*t),e)},Ht=function _renderComplexString(t,e){var r=e._pt,i="";if(!t&&e.b)i=e.b;else if(1===t&&e.e)i=e.e;else{for(;r;)i=r.p+(r.m?r.m(r.s+r.c*t):Math.round(1e4*(r.s+r.c*t))/1e4)+i,r=r._next;i+=e.c}e.set(e.t,e.p,i,e)},Kt=function _renderPropTweens(t,e){for(var r=e._pt;r;)r.r(t,r.d),r=r._next},te=function _addPluginModifier(t,e,r,i){for(var n,a=this._pt;a;)n=a._next,a.p===i&&a.modifier(t,e,r),a=n},ee=function _killPropTweensOf(t){for(var e,r,i=this._pt;i;)r=i._next,i.p===t&&!i.op||i.op===t?pa(this,i,"_pt"):i.dep||(e=1),i=r;return!e},re=function _sortPropTweensByPriority(t){for(var e,r,i,n,a=t._pt;a;){for(e=a._next,r=i;r&&r.pr>a.pr;)r=r._next;(a._prev=r?r._prev:n)?a._prev._next=a:i=a,(a._next=r)?r._prev=a:n=a,a=e}t._pt=i},ie=(PropTween.prototype.modifier=function modifier(t,e,r){this.mSet=this.mSet||this.set,this.set=ec,this.m=t,this.mt=r,this.tween=e},PropTween);function PropTween(t,e,r,i,n,a,s,o,u){this.t=e,this.s=i,this.c=n,this.p=r,this.r=a||Wt,this.d=s||this,this.set=o||Gt,this.pr=u||0,(this._next=t)&&(t._prev=this)}_(ct+"parent,duration,ease,delay,overwrite,runBackwards,startAt,yoyo,immediateRender,repeat,repeatDelay,data,paused,reversed,lazy,callbackScope,stringFilter,id,yoyoEase,stagger,inherit,repeatRefresh,keyframes,autoRevert,scrollTrigger",function(t){return ut[t]=1}),ot.TweenMax=ot.TweenLite=Xt,ot.TimelineLite=ot.TimelineMax=Bt,E=new Bt({sortChildren:!1,defaults:I,autoRemoveChildren:!0,id:"root",smoothChildTiming:!0}),j.stringFilter=qb;var ne={registerPlugin:function registerPlugin(){for(var t=arguments.length,e=new Array(t),r=0;rr&&(n*=t/100),e=e.substr(0,r-1)),e=n+(e in m?m[e]*t:~e.indexOf("%")?parseFloat(e)*t/100:parseFloat(e)||0)}return e}function Da(e,t,r,n,o,i,a){var s=o.startColor,l=o.endColor,c=o.fontSize,u=o.indent,f=o.fontWeight,d=Pe.createElement("div"),p=K(r)||"fixed"===L(r,"pinType"),g=-1!==e.indexOf("scroller"),h=p?Oe:r,v=-1!==e.indexOf("start"),b=v?s:l,m="border-color:"+b+";font-size:"+c+";color:"+b+";font-weight:"+f+";pointer-events:none;white-space:nowrap;font-family:sans-serif,Arial;z-index:1000;padding:4px 8px;border-width:0;border-style:solid;";return m+="position:"+(g&&p?"fixed;":"absolute;"),!g&&p||(m+=(n===rt?x:y)+":"+(i+parseFloat(u))+"px;"),a&&(m+="box-sizing:border-box;text-align:left;width:"+a.offsetWidth+"px;"),d._isStart=v,d.setAttribute("class","gsap-marker-"+e),d.style.cssText=m,d.innerText=t||0===t?e+"-"+t:e,h.insertBefore(d,h.children[0]),d._offset=d["offset"+n.op.d2],w(d,0,n,v),d}function Ha(){return l=l||s(B)}function Ia(){l||(l=s(B),De||_("scrollStart"),De=He())}function Ja(){return!Re&&a.restart(!0)}function Pa(e){var t,r=Me.ticker.frame,n=[],o=0;if(g!==r||Be){for(A();o=Q(he,te),pe)if(e||!r&&!o)ib(se,B);else{var f=nt(se,!0),d=s-P;ib(se,Oe,f.top+(te===rt?d:0)+et,f.left+(te===rt?0:d)+et)}ct(r||o?q:W),J!==A&&c<1&&r||g(D+(1!==c||o?0:J))}}else g(D+J*c);!de||p.tween||Re||Be||Z.restart(!0),ne&&(a||fe&&c&&(c<1||!qe))&&Ee(ne.targets).forEach(function(e){return e.classList[r||fe?"add":"remove"](ne.className)}),!re||ge||e||re(Te),i&&!Re?(n=c&&!u?0:1===c?1:1===u?2:3,ge&&(o=!a&&"none"!==xe[n+1]&&xe[n+1]||xe[n],y&&("complete"===o||"reset"===o||o in y)&&("complete"===o?y.pause().totalProgress(1):"reset"===o?y.restart(!0).pause():y[o]()),re&&re(Te)),!a&&qe||(oe&&a&&oe(Te),me[n]&&me[n](Te),fe&&(1===c?Te.kill(!1,1):me[n]=0),a||me[n=1===c?1:3]&&me[n](Te))):ge&&re&&!Re&&re(Te)}b&&(v(s+(I._isFlipped?1:0)),b(s))},Te.enable=function(){Te.enabled||(Te.enabled=!0,xa(he,"resize",Ja),xa(he,"scroll",Ia),we&&xa(ScrollTrigger,"refreshInit",we),y&&y.add?Me.delayedCall(.01,function(){return P||_||Te.refresh()})&&(A=.01)&&(P=_=0):Te.refresh())},Te.disable=function(e,t){if(Te.enabled&&(!1!==e&&Te.revert(),Te.enabled=Te.isActive=!1,t||Y&&Y.pause(),G=0,n&&(n.uncache=1),we&&ya(ScrollTrigger,"refreshInit",we),Z&&(Z.pause(),p.tween&&p.tween.kill()&&(p.tween=0)),!ve)){for(var r=at.length;r--;)if(at[r].scroller===he&&at[r]!==Te)return;ya(he,"resize",Ja),ya(he,"scroll",Ia)}},Te.kill=function(e,t){Te.disable(e,t),i&&delete st[i];var r=at.indexOf(Te);at.splice(r,1),r===ze&&0 { initApp(); allowScroll(true); revealHeader(); console.log('App READY!'); loadOtherVideos(); initTCPlayer(); });*/ const video = document.querySelector("#tc-loby-video"); if (video.readyState > 3) { initAll(); } else { video.addEventListener("loadedmetadata", initAll); } // initApp(); } function initAll() { initApp(); allowScroll(true); revealHeader(); console.log('App READY!'); loadOtherVideos(); initTCPlayer(); } function timelineVideoDuration() { let timelinevideo = document.querySelector("#tc-loby-video"); let duration = isFinite(timelinevideo.duration) ? timelinevideo.duration * 2 : 0; console.log(duration); return duration; } function loadOtherVideos() { vids = document.querySelectorAll('.video-embed video'); console.log('Loading other videos ...'); vids.forEach((video, i) => { let src = video.getAttribute('data-src'); console.log(i + ': ' + src); video.setAttribute('preload', 'auto'); // video.setAttribute('autoplay', 'true'); // video.setAttribute('muted', 'true'); // video.setAttribute('loop', 'true'); video.src = src; }); } function waitABit() { return new Promise((resolve) => { setTimeout(() => { resolve(); }, 2000); }); } function showPreloadAnim() { return new Promise((resolve) => { var tl = gsap.timeline({ repeat: -1, // onComplete: () => { // console.log('Anim DONE'); // resolve(); // } }); var QUOTE_MIN_DELAY = 2; var QUOTE_CHAR_DELAY = 1 / 15; var quotes = document.querySelectorAll('.preloader .preloader-quote'); // quotes = Array.from(quotes).splice(0, 4); quotes.forEach((quote, i) => { var text = quote.querySelector('.prequote-text'); var author = quote.querySelector('.prequote-author'); var lbl = 'hide_' + i; let delay = Math.max(QUOTE_MIN_DELAY, QUOTE_CHAR_DELAY * text.textContent.length); tl.from(text, { duration: .5, ease: 'sine.out', alpha: 0 }, '>'); if (author) tl.from(author, { duration: .5, ease: 'sine.out', alpha: 0 }, '<+' + .2); tl.add(lbl, '>+' + delay) tl.to(text, { duration: .5, ease: 'sine.out', alpha: 0 }, lbl); if (author) tl.to(author, { duration: .5, ease: 'sine.out', alpha: 0 }, lbl + '+=' + .2); quote.classList.remove('hidden'); }); tl.seek(.5); // show 1st quote preloaderAnim = tl; console.log('Anim started @ ' + tl.duration().toFixed(2)); }); } function preloadHeaderVideo() { return new Promise((resolve) => { var video = document.querySelector('.header-video video'); // video.addEventListener('canplay', onVideoReady); // console.log('video.paused '+video.paused); if (video.paused) video.addEventListener('loadeddata', onVideoReady); else onVideoReady(); console.log('loading video ...'); function onVideoReady() { console.log('video.readyState ' + video.readyState); if (video.readyState >= 2) { // if (video.readyState == 4) { // HAVE_ENOUGH_DATA console.log('Video loaded'); video.play(); resolve(); } } }); } function preloadImgSeq() { return new Promise((resolve) => { let imgLoadTimeStart = Date.now(); const pmImgLoadLow = preloadImgSeq_Low(); pmImgLoadLow.then(() => { let imgLoadTimeEnd = Date.now(); // const timeToLoad = Math.floor((imgLoadTimeEnd - imgLoadTimeStart) / 1000); const timeToLoad = (imgLoadTimeEnd - imgLoadTimeStart) / 1000; console.log('LQ loaded in ', timeToLoad); console.log(timeToLoad, ' ', IMG_SEQ_LOAD_TIME); if (timeToLoad > IMG_SEQ_LOAD_TIME) { console.log('going with LOW :/'); resolve(); } else { console.log('loading HI :)'); preloadImgSeq_Hi().then(() => resolve()); } }); }); } function preloadImgSeq_Low() { const prefix = 'https://static.touchcast.com/master/website-media/seq2/imgSeq_'; // load ~ every 30th image const urls = [ prefix + "1".padStart(3, '0') + '.jpg', prefix + "30".padStart(3, '0') + '.jpg', prefix + "60".padStart(3, '0') + '.jpg', prefix + "90".padStart(3, '0') + '.jpg', prefix + "120".padStart(3, '0') + '.jpg', prefix + "150".padStart(3, '0') + '.jpg', ]; return new Promise((resolve) => { imgSeq = SHOWTIME.initImageSequence({ canvasId: 'img-seq-canvas', width: 1024, height: 576, urls: urls, onLoaded: () => { console.log('[ lq ] ImgSeq loaded'); resolve(); } }); }); } function preloadImgSeq_Hi() { /* Apple example sequence */ // width: 1158, height: 770, // url: 'https://www.apple.com/105/media/us/airpods-pro/2019/1299e2f5_9206_4470_b28e_08307a42f19b/anim/sequence/large/01-hero-lightpass/', // framesTotal: 147 // const prefix = 'https://in-tag.com/exchange/showtime/imgSeq/imgSeq_'; // const prefix = 'http://localhost:3000/images/imgSeq_'; const prefix = 'https://static.touchcast.com/master/website-media/seq2/imgSeq_'; const framesTotal = 153; const urls = []; for (let i = 0; i < framesTotal; i++) { const url = prefix + (i + 1).toString().padStart(3, '0') + '.jpg'; urls.push(url); } return new Promise((resolve) => { imgSeq = SHOWTIME.initImageSequence({ canvasId: 'img-seq-canvas', width: 1024, height: 576, urls: urls, onLoaded: () => { console.log('[ HQ ] ImgSeq loaded'); resolve(); } }); }); } function revealHeader() { gsap.to('.preloader', { duration: .7, ease: 'sine.out', autoAlpha: 0, onComplete: () => { preloaderAnim.pause(0); } }); } function initApp() { var _params_ = getParams(); let timelinevideo = document.querySelector("#tc-loby-video"); lastWidth = window.innerWidth; lastHeight = window.innerHeight; resizableTimelines = []; window.addEventListener('resize', onResize); // disable auto-scroll to last pos (to keep animation logic with callbacks consistent) history.scrollRestoration = 'manual'; var GLOBAL_TIME_SCALE = 1 / 3; var TIME_IDLE = .5; var TIME_SLIDE_OUT = 1; var TIME_SLIDE_IN = 1; var IMG_SEQ_DURATION = TIME_SLIDE_IN * 10; var SLIDES_TOTAL = 6 + 2 + 2; // var SLIDES_TOTAL = 3; $('.scroll-pad').css('height', SLIDES_TOTAL * 100 / GLOBAL_TIME_SCALE + 'vh'); var slidesContainer = $('.slides'); var videosBunch = $('.header-video, ._1-3-to-stars .slide-video-2, ._1-3-5-venues .slide-video-2, ._1-3-6-accenture .slide-video-2'); // pause all videos var headerVideo = $('.header-video video')[0]; $('video').each(function(i, el) { if (el == headerVideo) return; // el.pause(); // el.currentTime = 1; }); var navbarBg = $('.nav-bg'); // ---------------------------------- slides 1-2 setup function getVideoBounds() { var videoBounds = { width: Math.min(window.innerWidth, 1680) * .83, height: '83%', right: (window.innerWidth - 1680) / 2 > 0 ? (window.innerWidth - 1680) / 2 : 0, }; console.log('videoBounds', videoBounds); return videoBounds; } var lapCards = $('.lap-cards>*').toArray(); var lapCards1_4 = lapCards.concat(); var lapCards5 = lapCards1_4.pop(); // init image sequence var imgSeqFrame = { frame: 0 }; // ---------------------------------- slides 3.* setup var cardsCoords = [{ x: '20%', y: '40%' }, { x: '60%', y: '60%' }, { x: '40%', y: '50%' }, { x: '85%', y: '35%' }, { x: '15%', y: '70%' }, { x: '55%', y: '55%' }, { x: '75%', y: '65%' }, { x: '30%', y: '40%' }, { x: '65%', y: '30%' }, { x: '40%', y: '70%' }, { x: '20%', y: '30%' }, { x: '60%', y: '60%' }, ]; var cardsW = $('.card-w-popup'); var cards = $('.card-w-popup .card-att'); var popups = $('.card-w-popup .card-att-popup'); var txtCounters = $('._3-3-timeline .statsitem-num'); cardsCoords.forEach((c, i) => { gsap.set(cardsW[i], { left: c.x, top: c.y, position: 'absolute' }); }); var TL_TICK_H = 2 + 15; var TL_TICKS_PER_HOUR = 12; var TL_TICK_VALUE = 60 / TL_TICKS_PER_HOUR; var TIME_TIMELINE_MOVE = 5; var TIME_MARKS = [{ text: '9:15 AM', value: 0, type: 'attendee' }, { text: '10:20 AM', value: 0, type: 'press' }, { text: '11:35 AM', value: 0, type: 'speaker' }, { text: '12:10 PM', value: 0, type: 'sponsor' }, { text: '1:45 PM', value: 0, type: 'attendee' }, { text: '2:25 PM', value: 0, type: 'speaker' }, { text: '3:10 PM', value: 0, type: 'press' }, { text: '4:00 PM', value: 0, type: 'exhibitor' }, { text: '4:20 PM', value: 0, type: 'speaker' }, { text: '5:00 PM', value: 0, type: 'attendee' }, { text: '5:40 PM', value: 0, type: 'sponsor' }, { text: '6:00 PM', value: 0, type: 'attendee' }, // DEBUG 1 // { text: '9:00 AM', value: 0 }, // { text: '11:10 AM', value: 0 }, // { text: '12:00 PM', value: 0 }, // { text: '2:00 PM', value: 0 }, // { text: '3:00 PM', value: 0 }, // DEBUG 0 // { text: '0:30 AM', value: 0 }, // { text: '1:00 AM', value: 0 }, // { text: '2:00 AM', value: 0 }, // { text: '3:00 AM', value: 0 }, // { text: '4:00 AM', value: 0 }, // { text: '5:00 PM', value: 0 }, // { text: '6:00 PM', value: 0 }, ]; let tlTimelineWrap = $('._3-3-timeline .timeline-wrap'); let tlTimeline = $('._3-3-timeline .timeline'); let tlTimeNode = tlTimeline.find('.tl-time.is--full'); let tlTimeNode_half = tlTimeline.find('.tl-time.is--half'); let tlTimes = []; let tlHours = tlTimeNode.parent(); let tlTimeTicks = tlTimeline.find('.tl-tick'); // tlTimeTicks.removeClass('big'); let tlTickMark = tlTimelineWrap.find('.tl-tick-mark'); let shiftMarks = []; let shiftMarksShown = []; TIME_MARKS.forEach((mark, i) => { let [time, ampm] = mark.text.split(' '); let [hh, mm] = time.split(':'); ampm = ampm.toLowerCase(); hh = parseInt(hh, 10); mm = parseInt(mm, 10); if (ampm == "pm" && hh < 12) hh += 12; if (ampm == "am" && hh == 12) hh -= 12; let timeValue = hh * 60 + mm; mark.value = timeValue; // update tick let tickIndex = Math.round(timeValue / TL_TICK_VALUE); // tlTimeTicks[tickIndex].classList.add('marked'); let markClone = tlTickMark.clone(); tlTimeTicks[tickIndex].appendChild(markClone[0]); tlTimeTicks[tickIndex].classList.add('mark-' + mark.type); /* // add time label let tlTime = tlTimeNode.clone(); tlTime.text(mark.text.toUpperCase()); // gsap.set(tlTime[0], { y: getMarkerShift(timeValue) });// real time gsap.set(tlTime[0], { y: getMarkerShift(tickIndex * TL_TICK_VALUE) - 10 });// 'rounded to tick' time tlHours.append(tlTime); tlTimes[i] = tlTime; */ // shiftMarks[i] = getMarkerShift(tickIndex * TL_TICK_VALUE); shiftMarks[i] = getMarkerShift(timeValue); shiftMarksShown[i] = false; }); // pre-shift whole scale to the first item in time let firstMarkerPos = -getMarkerShift(TIME_MARKS[0].value - 2 * 60); // -60 is to leave '1 hour gap' at the top let tlPosMax = -getMarkerShift(TIME_MARKS[TIME_MARKS.length - 1].value) - firstMarkerPos; gsap.set(tlTimeline[0], { y: firstMarkerPos, immediateRender: true }); gsap.set('.martini-icon', { y: TL_TICKS_PER_HOUR * TL_TICK_H * 19 }); let ticksTotal = TL_TICKS_PER_HOUR * 12 * 2 + 1; for (let tickIndex = 0; tickIndex < ticksTotal; tickIndex++) { if (tickIndex < TL_TICKS_PER_HOUR * 9 || tickIndex >= TL_TICKS_PER_HOUR * 19) { gsap.set(tlTimeTicks[tickIndex], { visibility: 'hidden' }); } else { let minutes = tickIndex * TL_TICK_VALUE; let hh = Math.floor(minutes / 60) % 12; let mm = minutes % 60; let ampm = minutes < 60 * 12 ? 'AM' : 'PM'; if (hh == 0 && minutes != 0) hh = 12; if (mm == 0 || mm == 30) { let node = (mm == 0) ? tlTimeNode : tlTimeNode_half; let tlTime = node.clone(); let sHH = hh.toString().padStart(2, '0'); let sMM = mm.toString().padStart(2, '0'); tlTime.text(sHH + ':' + sMM + ' ' + ampm); gsap.set(tlTime[0], { y: getMarkerShift(tickIndex * TL_TICK_VALUE) - 10 }); tlHours.append(tlTime); } } } tlTimeNode.hide(); // hide donor node tlTimeNode_half.hide(); // hide donor node // save shift marks for later use with scale and cards anims shiftMarks.forEach((mark, i) => { shiftMarks[i] -= Math.abs(firstMarkerPos); shiftMarks[i] -= 2 * TL_TICK_H * TL_TICKS_PER_HOUR; // 1 hour gap }); // console.log(shiftMarks); // console.log(TIME_MARKS); // ---------------------------------- START main timeline var tl = gsap.timeline(); tl .add('__1', TIME_IDLE * .5) // ---------------------------------- 1.1 .add('__1.1', '__1+=' + (0)) // .add(playVideo('._1-home video', true), '__1.1') .to('._1-home .column-left > *', { duration: TIME_SLIDE_OUT, ease: 'power2.inOut', y: '-300', autoAlpha: 0, stagger: .1, }, '__1.1') // ----------------- << IN .add('image_seq_start', '__1.1+=' + 0) .add((function() { let tl = gsap.timeline(); resizableTimelines.push(tl); tl.fromTo('._1-home .header-video', { width: '100%', height: '100%', y: 0, borderRadius: 0, }, { duration: TIME_SLIDE_IN, ease: 'power2.inOut', width: '100%',//83% height: '100%',//83% y: '5%', borderRadius: 24, // width: () => { return getVideoBounds().width }, // height: () => { return getVideoBounds().height }, // right: () => { return getVideoBounds().right }, // y: () => { return '5%' },// more top padding // borderRadius: () => { return '24' }, }); return tl; })(), 'image_seq_start') .from('.image-sequence', { duration: TIME_SLIDE_IN, ease: 'power2.out', autoAlpha: 0 }, 'image_seq_start+=' + .5) .to(timelinevideo, { currentTime: timelineVideoDuration(), scrollTrigger: { scrub: true } }) .from('._1-1-powered-by .column-left > *', { duration: TIME_SLIDE_IN, ease: 'power2.out', y: '+300', alpha: 0, stagger: .1, }, '__1.1+=' + TIME_SLIDE_OUT) .add('logos_anim', '>+' + TIME_SLIDE_OUT / 3) .to('.trusted-by-logos-wrap:nth-child(1) > *', { duration: TIME_SLIDE_IN * .7, ease: 'power2.out', alpha: 0, stagger: TIME_SLIDE_IN * .16, }, 'logos_anim') .from('.trusted-by-logos-wrap:nth-child(2) > *', { duration: TIME_SLIDE_IN * .7, ease: 'power2.out', alpha: 0, stagger: TIME_SLIDE_IN * .16, }, 'logos_anim') // ---------------------------------- 1.2 .add('__1.2', '__1.1+=' + IMG_SEQ_DURATION / 2) // .add('__1.2', '+=' + TIME_IDLE) .to('._1-1-powered-by .column-left > *', { duration: TIME_SLIDE_OUT, ease: 'power2.inOut', y: '-300', alpha: 0, stagger: .1, }, '__1.2') // ----------------- << IN .from('._1-2-speakers h2', { duration: TIME_SLIDE_IN, ease: 'power2.out', y: '+300', alpha: 0, }, '__1.2+=' + TIME_SLIDE_OUT) // ---------------------------------- 1.3 .add('__1.3', 'image_seq_start+=' + IMG_SEQ_DURATION * .9) .to('._1-2-speakers h2', { duration: TIME_SLIDE_OUT, ease: 'power2.inOut', y: '-300', alpha: 0, }, '__1.3') // .add(playVideo('._1-3-to-stars video', true)) // hide header video and img seq // .set('._1-home .header-video', { autoAlpha: 0 }) // .add(playVideo('._1-home video', false)) .set('._1-home .header-video', { autoAlpha: 0 }) // ----------------- << IN .from('._1-3-to-stars .slide-video-2', { duration: TIME_SLIDE_IN, ease: 'power2.out', autoAlpha: 0, }, '__1.3+=' + TIME_SLIDE_OUT) .from('._1-3-to-stars .column-left > *', { duration: TIME_SLIDE_IN, ease: 'power2.out', y: '+300', alpha: 0, stagger: .1, }, '__1.3+=' + TIME_SLIDE_OUT) // ---------------------------------- 1.5 .add('__1.5', '+=' + TIME_IDLE) .to('._1-3-to-stars .slide-video-2', { duration: TIME_SLIDE_OUT, ease: 'power2.out', autoAlpha: 0, }, '__1.5') .to('._1-3-to-stars .column-left > *', { duration: TIME_SLIDE_OUT, ease: 'power2.inOut', y: '-300', alpha: 0, stagger: .1, }, '__1.5') // ----------------- << IN .from('._1-5-amazing-people .amazing-people-heading', { duration: TIME_SLIDE_IN, ease: 'power2.out', y: '+100', alpha: 0, stagger: .1, }, '__1.5+=' + TIME_SLIDE_OUT ) .from('._1-5-amazing-people .amazing-people-inner-wrappar', { duration: TIME_SLIDE_IN, opacity:1, autoAlpha: 0, y: '+=50', stagger: .1, }, '__1.5+=' + TIME_SLIDE_OUT ) .from('._1-5-amazing-people .card-item-2:nth-child(-n+6)', { duration: TIME_SLIDE_IN, ease: 'power2.out', alpha: 0, scale: .85, y: '+=50', stagger: .1, }, '__1.5+=' + TIME_SLIDE_OUT) .from('._1-5-amazing-people .card-item-2:nth-child(n+7)', { duration: TIME_SLIDE_IN, ease: 'power2.out', alpha: 0, scale: .55, y: '+=50', stagger: .1, }, '__1.5+=' + TIME_SLIDE_OUT * 1.5) .add(genCardRoles(), '<+' + TIME_SLIDE_OUT * .3) //------------------------------------------------------------- 1.3.5 .add('__1.3.5', '+=' + TIME_IDLE) .to('._1-5-amazing-people', { duration: TIME_SLIDE_OUT * 2, ease: 'power2.inOut', y: '-150vh', }, '__1.3.5') // ----------------- << IN .from('._1-3-5-venues .slide-video-2', { duration: TIME_SLIDE_IN, ease: 'power2.out', autoAlpha: 0, }, '__1.3.5+=' + TIME_SLIDE_OUT) .fromTo('._1-3-5-venues', { pointerEvents: 'none' }, { pointerEvents: 'all' }, '<') .from('._1-3-5-venues .column-left > *', { duration: TIME_SLIDE_IN, ease: 'power2.out', y: '+300', alpha: 0, stagger: .1, }, '__1.3.5+=' + TIME_SLIDE_OUT) // ---------------------------------- 1.3.6 .add('__1.3.6', '+=' + TIME_IDLE) .to('._1-3-5-venues .column-left > *', { duration: TIME_SLIDE_OUT, ease: 'power2.inOut', y: '-300', alpha: 0, // iconic stagger: .1, }, '__1.3.6') // ----------------- << IN .from('._1-3-6-accenture .slide-video-2', { duration: TIME_SLIDE_IN, ease: 'power2.out', autoAlpha: 0, }, '__1.3.6+=' + TIME_SLIDE_OUT) .fromTo('._1-3-6-accenture', { pointerEvents: 'none' }, { pointerEvents: 'all' }, '<') .from('._1-3-6-accenture .column-left > *', { duration: TIME_SLIDE_IN, ease: 'power2.out', y: '+300', autoAlpha: 0, stagger: .1, }, '__1.3.6+=' + TIME_SLIDE_OUT) // ---------------------------------- 1.4 .add('__1.4', '+=' + TIME_IDLE) .to('._1-3-6-accenture .column-left > *', { duration: TIME_SLIDE_OUT, ease: 'power2.inOut', y: '-300', autoAlpha: 0, stagger: .1, }, '__1.4') // ----------------- << IN .from('._1-4-works-seamlessly .slide-video-2', { duration: TIME_SLIDE_IN, ease: 'power2.out', autoAlpha: 0, }, '__1.4+=' + TIME_SLIDE_OUT) .from('._1-4-works-seamlessly .h2, ._1-4-works-seamlessly .speaker-logo', { duration: TIME_SLIDE_IN, ease: 'power2.out', y: '+300', alpha: 0, stagger: .1, }, '__1.4+=' + TIME_SLIDE_OUT) .set(videosBunch, { autoAlpha: 0 }) // ---------------------------------- 1.9 // .add('__1.9', '+=' + TIME_IDLE) // .to('._1-4-works-seamlessly .slide-video-2', { // duration: TIME_SLIDE_OUT, // ease: 'power2.out', // autoAlpha: 0, // }, '_1.9') //.to('._1-4-works-seamlessly .h2, ._1-4-works-seamlessly .speaker-logo', { // duration: TIME_SLIDE_OUT, // ease: 'power2.out', // y: '-300', // alpha: 0, // stagger: .1, /// }, '_1.9') // ----------------- << IN // .from('._1-9-production .pro-duction-wrap > .h2', { // duration: TIME_SLIDE_IN, // ease: 'power2.out', // y: '+100', // alpha: 0, // stagger: .1, // }, '__1.9+=' + TIME_SLIDE_OUT) // .from('._1-9-production .card-prod-item', { // duration: TIME_SLIDE_IN, // ease: 'power2.out', // autoAlpha: 0, // scale: .85, // y: '+=50', // stagger: .1, // }, '__1.9+=' + TIME_SLIDE_OUT) //.add(genProdRoles(), '<+' + TIME_SLIDE_OUT * .3) // ---------------------------------- 2.0 .add('__2.0', '+=' + TIME_IDLE) .to('._1-4-works-seamlessly .slide-video-2', { duration: TIME_SLIDE_OUT, ease: 'power2.inOut', // y: '-=100vh', autoAlpha: 0, }, '__2.0') .to('._1-4-works-seamlessly .h2, ._1-4-works-seamlessly .speaker-logo', { duration: TIME_SLIDE_OUT, ease: 'power2.out', y: '-300', alpha: 0, stagger: .1, }, '_2.0') // ----------------- << IN .from('._2-0-curtain .column-center', { duration: TIME_SLIDE_OUT * 6, ease: 'power2.inOut', y: '100vh', // alpha: 0, // stagger: .1, }, '__2.0') // ---------------------------------- 2.1 .add('__2.1', '+=' + TIME_IDLE * .5) .to('._2-0-curtain .stage-video-cont', { duration: TIME_SLIDE_OUT, ease: 'power2.inOut', autoAlpha: 0, }, '__2.1') .to('._2-0-curtain .h2', { duration: TIME_SLIDE_OUT, ease: 'power2.inOut', alpha: 0, y: '-80' }, '__2.1') // ---------------------------------- 2.3 laptop .from('.laptop', { duration: TIME_SLIDE_IN, ease: 'power2.out', scale: .7, autoAlpha: 0, }, '<' + TIME_SLIDE_IN * .5) // ---------------------------------- 2.3 cards .add('lapCards', '<' + TIME_SLIDE_IN * .25) .from('.lap-card:nth-child(1)', { duration: TIME_SLIDE_IN * .5, ease: 'power2.out', scale: 1.1, x: '-250', autoAlpha: 0, }, 'lapCards+=' + .2) .from('.lap-card:nth-child(2)', { duration: TIME_SLIDE_IN * .5, ease: 'power2.out', scale: 1.4, x: '-150', autoAlpha: 0, }, 'lapCards+=' + .1) .from('.lap-card:nth-child(3)', { duration: TIME_SLIDE_IN * .5, ease: 'power2.out', scale: 1.7, autoAlpha: 0, }, 'lapCards+=' + 0) .from('.lap-card:nth-child(4)', { duration: TIME_SLIDE_IN * .5, ease: 'power2.out', scale: 1.4, x: '+150', autoAlpha: 0, }, 'lapCards+=' + .1) .from('.lap-card:nth-child(5)', { duration: TIME_SLIDE_IN * .5, ease: 'power2.out', scale: 1.1, x: '+250', autoAlpha: 0, }, 'lapCards+=' + .2) .from('.laptop-headings .h2:nth-child(1)', { duration: TIME_SLIDE_OUT, ease: 'power2.out', alpha: 0, y: '100' }, '>-' + TIME_SLIDE_OUT * .5) // ---------------------------------- 2.3 right pane .to('.lap-cards', { duration: TIME_SLIDE_IN * .7, ease: 'power2.out', // x: '-=14%', x: '-=100', }, '>-' + TIME_SLIDE_OUT * .5) .fromTo('.lap-panes', { // x: '+=100', autoAlpha: 0 }, { duration: TIME_SLIDE_IN * .7, ease: 'power2.inOut', // x: '+=10%', x: '-=100', autoAlpha: 1, }, '<') .to('.lap-panes', { duration: TIME_SLIDE_IN * .7, ease: 'power2.inOut', rotationY: 180, }, '>+' + TIME_SLIDE_IN * .5) .add('lapCards_off', '>' + TIME_IDLE * .5) .to(lapCards1_4, { duration: TIME_SLIDE_IN * .7, ease: 'power2.out', x: '-=70%', autoAlpha: 0, }, 'lapCards_off') .to(lapCards5, { duration: TIME_SLIDE_IN * .8, ease: 'power2.inOut', x: '-=120%', y: '-=60%', scale: 1.5, autoAlpha: 0, }, 'lapCards_off+=' + 0) .to('.lap-panes .lap-pane', { duration: TIME_SLIDE_IN * .7, ease: 'power2.out', x: '-=35%', autoAlpha: 0, }, '<') // ---------------------------------- 2.4 .add('video_n9', '<' + TIME_SLIDE_IN * .35) .from('.laptop-bg-video.n9', { duration: TIME_SLIDE_IN * .7, ease: 'power2.out', scale: .7, autoAlpha: 0, }, 'video_n9') .to('.laptop-headings .h2:nth-child(1)', { duration: TIME_SLIDE_OUT, ease: 'power2.out', alpha: 0, y: '-80' }, 'video_n9') .from('.laptop-headings .h2:nth-child(2)', { duration: TIME_SLIDE_IN * .5, ease: 'power2.out', alpha: 0, y: '100' }, '>-' + TIME_SLIDE_OUT * .5) // ---------------------------------- 2.5 .add('video_n10', '>' + TIME_IDLE) .from('.laptop-bg-video.n10', { duration: TIME_SLIDE_IN * .7, ease: 'power2.out', autoAlpha: 0, }, 'video_n10') .to('.laptop-scene', { duration: TIME_SLIDE_IN, ease: 'power2.out' /*scale: 1.15 y: '+=10%'*/ }, 'video_n10') .to('.laptop-headings .h2:nth-child(2)', { duration: TIME_SLIDE_OUT, ease: 'power2.out', alpha: 0, y: '-80' }, 'video_n10') .from('.laptop-headings .h2:nth-child(3)', { duration: TIME_SLIDE_IN * .5, ease: 'power2.out', alpha: 0, y: '100' }, '>-' + TIME_SLIDE_OUT * .5) // ---------------------------------- 2.6 .add('video_n11', '>' + TIME_IDLE) .from('.laptop-bg-video.n11', { duration: TIME_SLIDE_IN * .7, ease: 'power2.out', autoAlpha: 0, }, 'video_n11') .to('.laptop-headings .h2:nth-child(3)', { duration: TIME_SLIDE_OUT, ease: 'power2.out', alpha: 0, y: '-80' }, 'video_n11') .from('.laptop-headings .h2:nth-child(4)', { duration: TIME_SLIDE_IN * .5, ease: 'power2.out', alpha: 0, y: '100' }, '>-' + TIME_SLIDE_OUT * .5) // ---------------------------------- 2.7 .add('video_n12', '>' + TIME_IDLE) .from('.laptop-bg-video.n12', { duration: TIME_SLIDE_IN * .7, ease: 'power2.out', autoAlpha: 0, }, 'video_n12') .to('.laptop-headings .h2:nth-child(4)', { duration: TIME_SLIDE_OUT, ease: 'power2.out', alpha: 0, y: '-80' }, 'video_n12') .from('.laptop-headings .h2:nth-child(5)', { duration: TIME_SLIDE_IN * .5, ease: 'power2.out', alpha: 0, y: '100' }, '>-' + TIME_SLIDE_OUT * .5) // ---------------------------------- 3.0 .add('__3.0', '>' + TIME_IDLE) .to('.laptop-headings .h2:nth-child(5)', { duration: TIME_SLIDE_OUT * .5, ease: 'power2.out', alpha: 0, y: '-80' }, '__3.0') // .to('.laptop-bg-video.n11', { // duration: TIME_SLIDE_OUT * .7, // ease: 'power2.out', // autoAlpha: 0, // }, '<') .to('.laptop-scene', { duration: TIME_SLIDE_OUT, ease: 'power2.out', autoAlpha: 0 }, '<') // ----------------- << IN .from('._3-0-decisions .h2', { duration: TIME_SLIDE_IN, ease: 'power2.out', y: '+=100vh', // alpha: 0, // }, '__3.0') }, '>-' + TIME_SLIDE_OUT * .7) .from('._3-0-decisions .bg-audience', { duration: TIME_SLIDE_IN, ease: 'power2.out', y: '+=100vh', // alpha: 0, }, '<+' + TIME_SLIDE_IN * .1) .from('._3-2-cards .card-att', { duration: TIME_SLIDE_OUT * 3, ease: 'power2.out', scale: '-=.3', autoAlpha: 0, stagger: .2 }, '<+' + TIME_SLIDE_OUT) .to('._3-0-decisions .bg-audience', { duration: TIME_SLIDE_IN * 3, ease: 'power2.inOut', alpha: .3, }, '<') // ---------------------------------- 3.2 .add('__3.2', '>' + TIME_IDLE * 0) // ----------------- << OUT .to('._3-0-decisions .h2', { duration: TIME_SLIDE_OUT, ease: 'power2.out', y: '-80', alpha: 0, }, '__3.2') .from('._3-2-cards .h2', { duration: TIME_SLIDE_IN, ease: 'power2.out', y: '+80', alpha: 0, }, '<' + TIME_SLIDE_OUT * .5) .add('__3.3', '>' + TIME_IDLE) // ----------------- << OUT .to('._3-2-cards .h2', { duration: TIME_SLIDE_OUT, ease: 'power2.out', y: '-80', alpha: 0, }, '__3.3') // ----------------- << IN .from('._3-3-timeline .stats-item', { duration: TIME_SLIDE_IN, ease: 'power2.out', y: '+50', alpha: 0, stagger: .1 }, '>-' + TIME_SLIDE_IN * .25) .from('._3-3-timeline .logo-item', { duration: TIME_SLIDE_IN, ease: 'power2.out', y: '+50', alpha: 0, stagger: .1 }, '<' + TIME_SLIDE_IN * .5) .add('stats_done', '>') .to('._3-2-cards .card-att', { duration: TIME_SLIDE_OUT, ease: 'power2.inOut', scale: 1.0, alpha: 0, stagger: .2 }, 'stats_done-=' + TIME_SLIDE_IN * .25); // ----------------- [][][] add cards let tlCurrentPos = { y: 0 }; tl // .add('timeline', '<' + TIME_SLIDE_IN * .25) .add('timeline', 'stats_done+=' + TIME_SLIDE_IN * .25) .from(tlTimelineWrap[0], { duration: TIME_SLIDE_IN * .6, // ease: 'power2.inOut', // x: '+=50', ease: 'none', y: '+=100', alpha: 0, }, 'timeline') .from('.timeline-mask-gradient', { duration: TIME_SLIDE_IN * .6, ease: 'none', alpha: 0, }, '<') .add('cards', '>') // animate timeline .to(tlTimelineWrap[0], { duration: TIME_TIMELINE_MOVE, ease: 'none', y: tlPosMax, }, 'cards') .add('timeline_done', '>') // sync timeline's coords to tlPos .to(tlCurrentPos, { duration: TIME_TIMELINE_MOVE, ease: 'none', y: tlPosMax, /* onUpdate: function () { var curTriggerY = Math.abs(tlCurrentPos.y); shiftMarks.forEach((mark, i) => { var doShow = mark < curTriggerY; if (shiftMarksShown[i] != doShow) { // console.log((doShow ? 'Reveal' : 'Hide') + ' ' + i); // console.log(curTriggerY); if (doShow) tlTimes[i].addClass('is--on'); else tlTimes[i].removeClass('is--on'); } shiftMarksShown[i] = doShow; }); // console.log('Y: ' + tlCurrentPos.y.toFixed(2) + ' // ' + tlPosMax.toFixed(2)); } */ }, 'cards'); // generate Cards' timelines for (let i = 0; i < cardsCoords.length; i++) { var shift = shiftMarks[i] / Math.abs(tlPosMax) * TIME_TIMELINE_MOVE; tl.add(genCard(i), 'cards+=' + shift); } // ----------------- [][][] anim counters var cnt0 = { value: 1340 }; var cnt1 = { value: 3.5 }; var cnt2 = { value: 73 }; var cnt3 = { value: 6700 }; var cnt4 = { value: 4200 }; var counters = { progress: 1 }; tl .add('numbers', 'cards') .from(counters, { duration: TIME_TIMELINE_MOVE, ease: 'none', progress: 0, onUpdate: function() { txtCounters[0].textContent = Math.round(cnt0.value * counters.progress) + ''; txtCounters[1].textContent = (cnt1.value * counters.progress).toFixed(1) + ' hrs'; txtCounters[2].textContent = Math.round(cnt2.value * counters.progress) + '%'; txtCounters[3].textContent = Math.round(cnt3.value * counters.progress) + ''; txtCounters[4].textContent = Math.round(cnt4.value * counters.progress) + ''; } }, 'numbers'); tl .to(tlTimelineWrap[0], { duration: TIME_SLIDE_OUT, ease: 'none', y: '-=200', alpha: 0, }, 'timeline_done') .to('._3-3-timeline .stats-item', { duration: TIME_SLIDE_OUT, ease: 'power2.inOut', y: '-=80', alpha: 0, stagger: .1 }, 'timeline_done+=' + TIME_SLIDE_OUT * .5) .to('._3-3-timeline .logo-item', { duration: TIME_SLIDE_OUT, ease: 'power2.inOut', y: '-=80', alpha: 0, stagger: .1 }, '<' + TIME_SLIDE_OUT * .25) .to('._3-0-decisions .bg-audience', { duration: TIME_SLIDE_OUT, ease: 'power2.out', alpha: 0, }, '<') ; tl.timeScale(GLOBAL_TIME_SCALE); scTrigger = ScrollTrigger.create({ animation: tl, // ----- manual pin trigger: '.scroll-pad', onLeave: (e) => { // console.log('unPIN'); slidesContainer.css('position', 'relative'); slidesContainer.css('top', (SLIDES_TOTAL - 1) * 100 + 'vh'); }, onEnterBack: (e) => { // console.log('PIN'); slidesContainer.css('position', 'fixed'); slidesContainer.css('top', '0px'); }, // ----- AUTO pin (does not quite work in our case) // trigger: '.slides', // pin: true, start: 'top top', end: 'bottom bottom', scrub: 1, // invalidateOnRefresh: true, }); /* var tlForm = gsap.timeline(); tlForm .add('__3.4', 0) // ----------------- << IN .from('.form-slide .h2', { duration: TIME_SLIDE_OUT * 2, ease: 'power2.inOut', y: '+=30', alpha: 0, stagger: .1 }, '__3.4') .from('.form-slide .hs-form', { duration: TIME_SLIDE_IN * 2, ease: 'power2.out', rotationY: 90, }, '>-' + TIME_SLIDE_IN * 2 * .25) ; tlForm.timeScale(GLOBAL_TIME_SCALE); ScrollTrigger.create({ animation: tlForm, trigger: '.form-slide', start: 'top center', end: '70% bottom', scrub: true, // markers: true, onEnter: () => navbarBg.addClass('show-bg'), onLeaveBack: () => navbarBg.removeClass('show-bg'), }); */ /* -------------------------------------------- Utils -------------------------------------------- */ function genCardRoles() { var tl = gsap.timeline(); var roles = $('._1-5-amazing-people .amazing-people-item-wrapper').toArray(); var TIME = TIME_SLIDE_OUT * 2; var STGR = .2; tl .fromTo(roles, { }, { }) .from(roles, { duration: TIME, x: '288vh', opacity:'1', y: '0', z: '0', ease: 'power2.out', stagger: STGR, }, 0) .to(roles, { duration: TIME, x: '-=336vh', y: '0', z: '0', opacity:'1', ease: 'power1.out', stagger: STGR, }, '<+' + TIME * (1 - .2)); return tl; } function genProdRoles() { var tl = gsap.timeline(); var roles = $('._1-9-production .prod-role').toArray(); var TIME = TIME_SLIDE_OUT * 2; var STGR = .2; tl .fromTo(roles, { scale: .5, }, { duration: TIME, ease: 'none', scale: 1.5, stagger: STGR, }) .from(roles, { duration: TIME * .2, ease: 'power1.out', alpha: 0, stagger: STGR, }, 0) .to(roles, { duration: TIME * .2, ease: 'power1.out', alpha: 0, stagger: STGR, }, '<+' + TIME * (1 - .2)); return tl; } function genCard(i) { var card = cards[i]; var popup = popups[i]; var CARD_FLY_TIME = TIME_SLIDE_IN * 2 * 1; if (_params_['reverse_cards']) { var tl = gsap.timeline(); tl .add('stgr', 0) .fromTo(card, { scale: 1.0, }, { duration: CARD_FLY_TIME / 2, ease: 'none', scale: .6, }, 'stgr') .to(card, { duration: CARD_FLY_TIME / 2, ease: 'none', scale: .2, }, '>') .from(card, { duration: CARD_FLY_TIME / 4, ease: 'none', alpha: 0, }, 'stgr') .to(card, { duration: CARD_FLY_TIME / 4, ease: 'none', alpha: 0, }, 'stgr+=' + CARD_FLY_TIME * 3 / 4) .fromTo(popup, { y: '50', alpha: 0, }, { duration: TIME_SLIDE_IN, ease: 'power2.inOut', y: '10', alpha: 1, }, 'stgr+=' + CARD_FLY_TIME / 8) .to(popup, { duration: CARD_FLY_TIME / 2 * 1, ease: 'sine.out', alpha: 0, y: '-=200' }, '<' + 0); } else { var tl = gsap.timeline(); tl .add('stgr', 0) .fromTo(card, { scale: .2, }, { duration: CARD_FLY_TIME / 2, ease: 'none', scale: .6, }, 'stgr') .to(card, { duration: CARD_FLY_TIME / 2, ease: 'none', scale: 1.0, }, '>') .from(card, { duration: CARD_FLY_TIME / 4, ease: 'none', alpha: 0, }, 'stgr') .to(card, { duration: CARD_FLY_TIME / 4, ease: 'none', alpha: 0, }, 'stgr+=' + CARD_FLY_TIME * 3 / 4) .fromTo(popup, { y: '50', alpha: 0, }, { duration: TIME_SLIDE_IN, ease: 'power2.inOut', y: '-20', alpha: 1, }, 'stgr+=' + CARD_FLY_TIME / 8) .to(popup, { duration: CARD_FLY_TIME / 2 * .6, ease: 'sine.inOut', alpha: 0, y: '-=70' // }, '<-' + CARD_FLY_TIME / 8) }, '<'); } return tl; } function getMarkerShift(timeValue) { var shift = Math.round(((timeValue / 60) * TL_TICKS_PER_HOUR) * TL_TICK_H); return shift; } function playVideo(sel, st, restart) { restart = restart || false; return function() { return; var video = $(sel)[0]; // if (restart) video.currentTime = 0; st ? video.play() : video.pause(); }; } function hideVideos() { // st = restart || false; return function() { let hide = (scTrigger.direction > 0); // hide if +1/forward console.log('HIDE >> ', hide); gsap.set(videosBunch, { autoAlpha: hide ? 0 : 1 }); }; } function getParams() { var urlParams = new URLSearchParams(window.location.search); var params = {}; params['reverse_cards'] = urlParams.has('reverse_cards') && (urlParams.get('reverse_cards') != false); return params; } } var isResizing = false; var resizeTO; SHOWTIME.allowScroll = allowScroll; function doReload() { // console.log('reload .....'); window.location.reload(); } var lastWidth, lastHeight; function onResize(e) { // resizeV1_brutalRefresh(); resizeV2_gracefulInvalidate(); } function resizeV2_gracefulInvalidate() { if (resizableTimelines.length) { console.log('**** invalitading timelines ...'); resizableTimelines.forEach(t => t.invalidate()); } } function resizeV1_brutalRefresh() { // only refresh if width has changed if (Math.abs(lastWidth - window.innerWidth) > 1) { if (!isResizing) { isResizing = true; gsap.set('.preloader', { autoAlpha: 1 }); gsap.set('.slides', { display: 'none' }); scTrigger.disable(); } clearTimeout(resizeTO); resizeTO = setTimeout(doReload, 1000); } lastWidth = window.innerWidth; lastHeight = window.innerHeight; } function allowScroll(st) { if (st) { document.body.classList.remove('disable-scroll'); enableScroll(); } else { document.body.classList.add('disable-scroll'); disableScroll(); } function disableScroll() { scrollTop = window.pageYOffset || document.documentElement.scrollTop; scrollLeft = window.pageXOffset || document.documentElement.scrollLeft, window.onscroll = function() { window.scrollTo(scrollLeft, scrollTop); }; } function enableScroll() { window.onscroll = function() {}; } } /* function initTCPlayer() { window.tcPlayerApiAsyncInit = function() { var popup = document.querySelector('.popup-vid_wrap-2'); document.querySelector('.shwt_btn-2').addEventListener('click', function() { showPopup(true); }); document.querySelector('.shwt-popupclose-4').addEventListener('click', function() { showPopup(false); }); function showPopup(st) { if (st) { var playerIframeObj = document.getElementById("player_01"); if (playerIframeObj) { playerIframeObj.remove(); } var player = TouchCastPlayerAPI.embed({ container: ".video-holder", width: "100%", height: "100%", videoUrl: "//tc.touchcast.com/s/ffxn4hy1fx", playerId: "player_01", playerConfig: { playerBackgroundColor: 'grey', progressUpdateColor: 'green', interactiveTip: false, infoControl: false, shareControl: true, chaptersControl: false, summaryControl: false, }, }); popup.querySelector('iframe').setAttribute('scrolling', 'yes'); popup.classList.remove('hidden'); } else { popup.classList.add('hidden'); TouchCastPlayerAPI.doAction({ action: TouchCastPlayerAPI.actions.PAUSE_VIDEO, playerId: "player_01" }); } SHOWTIME.allowScroll(!st); } }; (function(d, s, id) { var js, tjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) { return; } js = d.createElement(s); js.id = id; js.src = "//static.touchcast.com/master/player-api/player_api.js"; tjs.parentNode.insertBefore(js, tjs); }(document, 'script', 'touchcast-player-api')); } */