From: nael Date: Mon, 17 Dec 2018 17:06:26 +0000 (+0100) Subject: wip #2445 @4 X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=09fceff12d51644b946b24c5f57814d0b50ff2cc;p=Animations.git wip #2445 @4 --- diff --git a/AccordHotel-p80/countUp.min.js b/AccordHotel-p80/countUp.min.js new file mode 100644 index 0000000..c17c47b --- /dev/null +++ b/AccordHotel-p80/countUp.min.js @@ -0,0 +1 @@ +!function(a,n){"function"==typeof define&&define.amd?define(n):"object"==typeof exports?module.exports=n(require,exports,module):a.CountUp=n()}(this,function(a,n,t){return function(a,n,t,e,i,r){var u=this;if(u.version=function(){return"1.9.3"},u.options={useEasing:!0,useGrouping:!0,separator:",",decimal:".",easingFn:function(a,n,t,e){return t*(1-Math.pow(2,-10*a/e))*1024/1023+n},formattingFn:function(a){var n,t,e,i,r,o,s=a<0;if(a=Math.abs(a).toFixed(u.decimals),n=(a+="").split("."),t=n[0],e=1u.endVal,u.frameVal=u.startVal,u.initialized=!0):(u.error="[CountUp] startVal ("+n+") or endVal ("+t+") is not a number",!1)):!(u.error="[CountUp] target is null or undefined"))},u.printValue=function(a){var n=u.options.formattingFn(a);"INPUT"===u.d.tagName?this.d.value=n:"text"===u.d.tagName||"tspan"===u.d.tagName?this.d.textContent=n:this.d.innerHTML=n},u.count=function(a){u.startTime||(u.startTime=a);var n=(u.timestamp=a)-u.startTime;u.remaining=u.duration-n,u.options.useEasing?u.countDown?u.frameVal=u.startVal-u.options.easingFn(n,0,u.startVal-u.endVal,u.duration):u.frameVal=u.options.easingFn(n,u.startVal,u.endVal-u.startVal,u.duration):u.countDown?u.frameVal=u.startVal-(u.startVal-u.endVal)*(n/u.duration):u.frameVal=u.startVal+(u.endVal-u.startVal)*(n/u.duration),u.countDown?u.frameVal=u.frameValu.endVal?u.endVal:u.frameVal,u.frameVal=Math.round(u.frameVal*u.dec)/u.dec,u.printValue(u.frameVal),nu.endVal,u.rAF=requestAnimationFrame(u.count))):u.error="[CountUp] update() - new endVal is not a number: "+a)},u.initialize()&&u.printValue(u.startVal)}}); \ No newline at end of file diff --git a/AccordHotel-p80/index.html b/AccordHotel-p80/index.html index 394abda..ddf43aa 100644 --- a/AccordHotel-p80/index.html +++ b/AccordHotel-p80/index.html @@ -1 +1,33 @@ -
\ No newline at end of file + + + +
+ + + + + +
+ + + + + + 1 + 92 + % + hotel + rooms + country + hotels + rooms + country +

of guests had
a positive interaction
with Tribe staff

+ PIPELINE +
+ +
+ + + + \ No newline at end of file diff --git a/AccordHotel-p80/main.css b/AccordHotel-p80/main.css index 955140c..cf80af5 100644 --- a/AccordHotel-p80/main.css +++ b/AccordHotel-p80/main.css @@ -1,3 +1,19 @@ +#canvas { + display: none; + position: absolute; +} +@font-face { + font-family: Gotham-Bold; + src: url("gotham-bold.woff"); +} +@font-face { + font-family: GothamHTF-Book; + src: url("gothamhtf-book.woff"); +} +@font-face { + font-family: GothamHTF-medium; + src: url("gotham-htf-medium.woff"); +} #p82-image-1, #p82-image-2, #p82-image-3, @@ -5,10 +21,164 @@ #p83-image-2, #p83-image-3, #p83-image-4, -#p83-e-46, -#p82-e-81, #p82-e-82, #p82-e-83 { opacity: 0; } +#p83-e-46 { + stroke-dasharray: 3620; + stroke-dashoffset: 3620; + opacity: 0; +} +#p82-e-81 { + stroke-dasharray: 3620; + stroke-dashoffset: 3620; + opacity: 0; +} +#p83-e-47, +#p83-e-48, +#p83-e-49, +#p83-e-50, +#p83-e-51, +#p83-e-52, +#p83-e-53, +#p83-e-54 { + opacity: 0; +} +.test { + opacity: 0; +} +.number-contain { + opacity: 0; +} +.number1 { + color: white; + position: absolute; + bottom: 174px; + left: 76.25px; + font-family: Gotham-Bold; + font-size: 18px; +} +.number2 { + color: white; + position: absolute; + bottom: 151px; + left: 76px; + font-family: Gotham-Bold; + font-size: 18px; +} +.number3 { + color: white; + position: absolute; + bottom: 129px; + left: 76px; + font-family: Gotham-Bold; + font-size: 18px; +} +.number4 { + color: white; + position: absolute; + bottom: 163px; + left: 170px; + font-family: Gotham-Bold; + font-size: 16px; +} +.number5 { + color: white; + position: absolute; + bottom: 145px; + left: 170px; + font-family: Gotham-Bold; + font-size: 16px; +} +.number6 { + color: white; + position: absolute; + bottom: 127px; + left: 169.5px; + font-family: Gotham-Bold; + font-size: 16px; +} +.number7 { + color: white; + position: absolute; + bottom: 174px; + left: 263px; + font-family: Gotham-Bold; + font-size: 16px; +} +.percent { + color: white; + position: absolute; + bottom: 174px; + left: 286px; + font-family: Gotham-Bold; + font-size: 16px; +} +.desc1 { + color: white; + position: absolute; + bottom: 175px; + left: 90px; + font-family: GothamHTF-Book; + font-size: 8px; +} +.desc2 { + color: white; + position: absolute; + bottom: 153px; + left: 112px; + font-family: GothamHTF-Book; + font-size: 8px; +} +.desc3 { + color: white; + position: absolute; + bottom: 131px; + left: 90px; + font-family: GothamHTF-Book; + font-size: 8px; +} +.desc4 { + color: white; + position: absolute; + bottom: 164px; + left: 186px; + font-family: GothamHTF-Book; + font-size: 8px; +} +.desc5 { + color: white; + position: absolute; + bottom: 147px; + left: 207px; + font-family: GothamHTF-Book; + font-size: 8px; +} +.desc6 { + color: white; + position: absolute; + bottom: 129px; + left: 183px; + font-family: GothamHTF-Book; + font-size: 8px; +} +.desc7 { + color: white; + position: absolute; + bottom: 141px; + left: 263px; + font-family: GothamHTF-Book; + font-size: 8px; + line-height: 1.35; +} +.pipeline { + color: white; + position: absolute; + font-family: GothamHTF-medium; + bottom: 183px; + font-size: 8px; + left: 170px; + letter-spacing: 0.35px; +} /*# sourceMappingURL=main.css.map */ \ No newline at end of file diff --git a/AccordHotel-p80/main.css.map b/AccordHotel-p80/main.css.map index c10e487..9cd319e 100644 --- a/AccordHotel-p80/main.css.map +++ b/AccordHotel-p80/main.css.map @@ -1 +1 @@ -{"version":3,"sources":["main.less"],"names":[],"mappings":"AAAA;AAAc;AAAc;AAAc;AAAc;AAAc;AAAc;AAAc;AAAW;AAAW;AAAW;EAClI,UAAA","file":"main.css"} \ No newline at end of file +{"version":3,"sources":["main.less"],"names":[],"mappings":"AAAA;EACE,aAAA;EACA,kBAAA;;AAEF;EACE,wBAAA;EACA,SAAS,mBAAT;;AAEF;EACE,2BAAA;EACA,SAAS,sBAAT;;AAEF;EACE,6BAAA;EACA,SAAS,yBAAT;;AAEF;AAAc;AAAc;AAAc;AAAc;AAAc;AAAc;AAAc;AAAW;EAC5G,UAAA;;AAED;EACC,sBAAA;EACA,uBAAA;EACA,UAAA;;AAED;EACG,sBAAA;EACA,uBAAA;EACA,UAAA;;AAEH;AAAU;AAAU;AAAU;AAAU;AAAU;AAAU;AAAU;EACpE,UAAA;;AAGF;EACE,UAAA;;AAEF;EACE,UAAA;;AAEF;EACE,YAAA;EACA,kBAAA;EACA,aAAA;EACA,aAAA;EACA,wBAAA;EACA,eAAA;;AAEF;EACE,YAAA;EACA,kBAAA;EACA,aAAA;EACA,UAAA;EACA,wBAAA;EACA,eAAA;;AAEF;EACE,YAAA;EACA,kBAAA;EACA,aAAA;EACA,UAAA;EACA,wBAAA;EACA,eAAA;;AAEF;EACE,YAAA;EACA,kBAAA;EACA,aAAA;EACA,WAAA;EACA,wBAAA;EACA,eAAA;;AAEF;EACE,YAAA;EACA,kBAAA;EACA,aAAA;EACA,WAAA;EACA,wBAAA;EACA,eAAA;;AAEF;EACE,YAAA;EACA,kBAAA;EACA,aAAA;EACA,aAAA;EACA,wBAAA;EACA,eAAA;;AAEF;EACE,YAAA;EACA,kBAAA;EACA,aAAA;EACA,WAAA;EACA,wBAAA;EACA,eAAA;;AAEF;EACE,YAAA;EACA,kBAAA;EACA,aAAA;EACA,WAAA;EACA,wBAAA;EACA,eAAA;;AAGF;EACE,YAAA;EACA,kBAAA;EACA,aAAA;EACA,UAAA;EACA,2BAAA;EACA,cAAA;;AAGF;EACE,YAAA;EACA,kBAAA;EACA,aAAA;EACA,WAAA;EACA,2BAAA;EACA,cAAA;;AAEF;EACE,YAAA;EACA,kBAAA;EACA,aAAA;EACA,UAAA;EACA,2BAAA;EACA,cAAA;;AAEF;EACE,YAAA;EACA,kBAAA;EACA,aAAA;EACA,WAAA;EACA,2BAAA;EACA,cAAA;;AAEF;EACE,YAAA;EACA,kBAAA;EACA,aAAA;EACA,WAAA;EACA,2BAAA;EACA,cAAA;;AAEF;EACE,YAAA;EACA,kBAAA;EACA,aAAA;EACA,WAAA;EACA,2BAAA;EACA,cAAA;;AAEF;EACE,YAAA;EACA,kBAAA;EACA,aAAA;EACA,WAAA;EACA,2BAAA;EACA,cAAA;EACA,iBAAA;;AAEF;EACE,YAAA;EACA,kBAAA;EACA,6BAAA;EACA,aAAA;EACA,cAAA;EACA,WAAA;EACA,sBAAA","file":"main.css"} \ No newline at end of file diff --git a/AccordHotel-p80/main.js b/AccordHotel-p80/main.js index a8ab317..a7eb6ad 100644 --- a/AccordHotel-p80/main.js +++ b/AccordHotel-p80/main.js @@ -3,18 +3,99 @@ $(function () { }); function start() { + var tl2 = new TimelineMax(); + tl2.to("#p82-e-81",2,{strokeDashoffset:0},'+=1'); + tl2.to("#p83-e-46",2,{strokeDashoffset:0},'-=2'); + tl2.to('.test',1,{opacity:1}); + var elements = { - '#p83-e-46,#p82-e-81,#p82-e-82,#p82-e-83': {delay: 0, animation: 'fade'}, - "#p83-image-2": {delay: 1, animation: 'fade'}, - "#p82-image-1": {delay: 2, animation: 'fade'}, - '#p82-image-2': {delay: 3, animation: 'fade'}, - '#p82-image-3': {delay: 4, animation: 'fade'}, - "#p83-image-1": {delay: 5, animation: 'fade'}, - "#p83-image-3": {delay: 6, animation: 'fade'}, - "#p83-image-4": {delay: 7, animation: 'fade'}, + '#p82-e-82,#p82-e-83': {delay: 0, animation: 'fade'}, + '#p83-e-46,#p82-e-81': {delay: 0, animation: 'fade'}, + "#p83-image-2": {delay: 5.5, animation: 'fade'}, + "#p82-image-1": {delay: 6.5, animation: 'fade'}, + '#p82-image-2': {delay: 7.5, animation: 'fade'}, + '#p82-image-3': {delay: 8.5, animation: 'fade'}, + "#p83-image-1": {delay: 9.5, animation: 'fade'}, + "#p83-image-3": {delay: 10.5, animation: 'fade'}, + "#p83-image-4": {delay: 11.5, animation: 'fade'}, }; + /**** svg element length ******/ + var shape = document.querySelector('#p83-e-46'); + var shapeLength = shape.getTotalLength(); + console.log(shapeLength); + /** end svg element length**/ + + /**** numbers animation ****/ + var tl3= new TimelineMax(); + tl3.to('.number-contain',1,{opacity:1},"+=11"); + tl3.to('#p83-e-47',0.5,{opacity:1},'-=0.5'); + tl3.to('#p83-e-48',0.5,{opacity:1},'-=1'); + tl3.to('#p83-e-49',0.5,{opacity:1},'-=1'); + tl3.to('#p83-e-50',0.5,{opacity:1},'-=1'); + tl3.to('#p83-e-51',0.5,{opacity:1},'-=1'); + tl3.to('#p83-e-52',0.5,{opacity:1},'-=1'); + tl3.to('#p83-e-53',0.5,{opacity:1},'-=1'); + tl3.to('#p83-e-54',0.5,{opacity:1},'-=1'); + var delay = 12; + + var id = document.getElementById("number"); + var id2 = document.getElementById("number2"); + var id3 = document.getElementById("number3"); + var id4 = document.getElementById("number4"); + var id5 = document.getElementById("number5"); + var id6 = document.getElementById("number6"); + var id7 = document.getElementById("number7"); + var hidden = 0; + var visible = 1; + var dureeOpacite = delay * 1000; + + var options = { + useEasing: true, + useGrouping: true, + separator: ',', + decimal: '.', + }; + var number = new CountUp('number', 0, 1, 0, 2.5, options); + var number2 = new CountUp('number2', 0, 126, 0, 2.5, options); + var number3 = new CountUp('number3', 0, 1, 0, 2.5, options); + var number4 = new CountUp('number4', 0, 5, 0, 2.5, options); + var number5 = new CountUp('number5', 0, 850, 0, 2.5, options); + var number6 = new CountUp('number6', 0, 1, 0, 2.5, options); + var number7 = new CountUp('number7', 0, 92, 0, 2.5, options); + if (delay > 0){ + id.style.opacity = hidden; + id2.style.opacity = hidden; + id3.style.opacity = hidden; + id4.style.opacity = hidden; + id5.style.opacity = hidden; + id6.style.opacity = hidden; + id7.style.opacity = hidden; + setTimeout(function () { + id.style.opacity = visible; + id2.style.opacity = visible; + id3.style.opacity = visible; + id4.style.opacity = visible; + id5.style.opacity = visible; + id6.style.opacity = visible; + id7.style.opacity = visible; + },dureeOpacite ); + } + function run() { + setTimeout(function () { + number.start(); + number2.start(); + number3.start(); + number4.start(); + number5.start(); + number6.start(); + number7.start(); + }, delay * 1000); + } + run(); + + /**** end numbers animation ****/ $.each(elements, function (id, infos) { var e = $(id); @@ -33,7 +114,6 @@ function start() { } tl.timeScale(0.9 + Math.random() * 0.2); }); - } function nToDelay(n) { diff --git a/AccordHotel-p80/main.less b/AccordHotel-p80/main.less index f83387f..b1d6918 100644 --- a/AccordHotel-p80/main.less +++ b/AccordHotel-p80/main.less @@ -1,3 +1,171 @@ -#p82-image-1, #p82-image-2, #p82-image-3, #p83-image-1, #p83-image-2, #p83-image-3, #p83-image-4, #p83-e-46, #p82-e-81, #p82-e-82, #p82-e-83 { +#canvas{ + display: none; + position: absolute; +} +@font-face { + font-family: Gotham-Bold; + src: url("gotham-bold.woff"); +} +@font-face { + font-family: GothamHTF-Book; + src: url("gothamhtf-book.woff"); +} +@font-face { + font-family: GothamHTF-medium; + src: url("gotham-htf-medium.woff"); +} +#p82-image-1, #p82-image-2, #p82-image-3, #p83-image-1, #p83-image-2, #p83-image-3, #p83-image-4, #p82-e-82, #p82-e-83 { opacity: 0; +} +#p83-e-46{ + stroke-dasharray: 3620; + stroke-dashoffset: 3620; + opacity: 0; +} +#p82-e-81{ + stroke-dasharray: 3620; + stroke-dashoffset: 3620; + opacity: 0; + } +#p83-e-47,#p83-e-48,#p83-e-49,#p83-e-50,#p83-e-51,#p83-e-52,#p83-e-53,#p83-e-54{ + opacity: 0; +} + +.test{ + opacity: 0; +} +.number-contain{ + opacity: 0; +} +.number1{ + color: white; + position: absolute; + bottom: 174px; + left: 76.25px; + font-family: Gotham-Bold; + font-size: 18px; +} +.number2{ + color: white; + position: absolute; + bottom: 151px; + left: 76px; + font-family: Gotham-Bold; + font-size: 18px; +} +.number3{ + color: white; + position: absolute; + bottom: 129px; + left: 76px; + font-family: Gotham-Bold; + font-size: 18px; +} +.number4{ + color: white; + position: absolute; + bottom: 163px; + left: 170px; + font-family: Gotham-Bold; + font-size: 16px; +} +.number5{ + color: white; + position: absolute; + bottom: 145px; + left: 170px; + font-family: Gotham-Bold; + font-size: 16px; +} +.number6{ + color: white; + position: absolute; + bottom: 127px; + left: 169.5px; + font-family: Gotham-Bold; + font-size: 16px; +} +.number7{ + color: white; + position: absolute; + bottom: 174px; + left: 263px; + font-family: Gotham-Bold; + font-size: 16px; +} +.percent{ + color: white; + position: absolute; + bottom: 174px; + left: 286px; + font-family: Gotham-Bold; + font-size: 16px; +} + +.desc1{ + color: white; + position: absolute; + bottom: 175px; + left: 90px; + font-family: GothamHTF-Book; + font-size: 8px; +} + +.desc2{ + color: white; + position: absolute; + bottom: 153px; + left: 112px; + font-family: GothamHTF-Book; + font-size: 8px; + } +.desc3{ + color: white; + position: absolute; + bottom: 131px; + left: 90px; + font-family: GothamHTF-Book; + font-size: 8px; +} +.desc4{ + color: white; + position: absolute; + bottom: 164px; + left: 186px; + font-family: GothamHTF-Book; + font-size: 8px; +} +.desc5{ + color: white; + position: absolute; + bottom: 147px; + left: 207px; + font-family: GothamHTF-Book; + font-size: 8px; +} +.desc6{ + color: white; + position: absolute; + bottom: 129px; + left: 183px; + font-family: GothamHTF-Book; + font-size: 8px; +} +.desc7{ + color: white; + position: absolute; + bottom: 141px; + left: 263px; + font-family: GothamHTF-Book; + font-size: 8px; + line-height: 1.35; +} +.pipeline{ + color: white; + position: absolute; + font-family: GothamHTF-medium; + bottom: 183px; + font-size: 8px; + left: 170px; + letter-spacing: 0.35px; } \ No newline at end of file