From: nael <nael@cubedesigners.com>
Date: Wed, 19 Dec 2018 16:39:51 +0000 (+0100)
Subject: wait #2426 @1
X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=4df46cc92807e49ccccca4a4f4dfe4d9d26d993c;p=Animations.git

wait #2426 @1
---

diff --git a/AccordHotel-p42/main.js b/AccordHotel-p42/main.js
index a7e68e6..b41181d 100644
--- a/AccordHotel-p42/main.js
+++ b/AccordHotel-p42/main.js
@@ -1,5 +1,5 @@
 let tl = new TimelineMax();
 
-tl.from('.img1',1,{display: 'none',y: -300});
-tl.from('.img2',1,{display: 'none',y: -341},"-=0.5");
-tl.from('.img3',1,{display: 'none',y: -497},"-=0.5");
+tl.from('.img1',1.5,{display: 'none',y: -300});
+tl.from('.img2',1.5,{display: 'none',y: -341});
+tl.from('.img3',1.5,{display: 'none',y: -497});
diff --git a/AccordHotel-p42/p42-left/countUp.min.js b/AccordHotel-p42/p42-left/countUp.min.js
new file mode 100644
index 0000000..c17c47b
--- /dev/null
+++ b/AccordHotel-p42/p42-left/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=1<n.length?u.options.decimal+n[1]:"",u.options.useGrouping){for(i="",r=0,o=t.length;r<o;++r)0!==r&&r%3==0&&(i=u.options.separator+i),i=t[o-r-1]+i;t=i}return u.options.numerals.length&&(t=t.replace(/[0-9]/g,function(a){return u.options.numerals[+a]}),e=e.replace(/[0-9]/g,function(a){return u.options.numerals[+a]})),(s?"-":"")+u.options.prefix+t+e+u.options.suffix},prefix:"",suffix:"",numerals:[]},r&&"object"==typeof r)for(var o in u.options)r.hasOwnProperty(o)&&null!==r[o]&&(u.options[o]=r[o]);""===u.options.separator?u.options.useGrouping=!1:u.options.separator=""+u.options.separator;for(var s=0,l=["webkit","moz","ms","o"],m=0;m<l.length&&!window.requestAnimationFrame;++m)window.requestAnimationFrame=window[l[m]+"RequestAnimationFrame"],window.cancelAnimationFrame=window[l[m]+"CancelAnimationFrame"]||window[l[m]+"CancelRequestAnimationFrame"];function d(a){return"number"==typeof a&&!isNaN(a)}window.requestAnimationFrame||(window.requestAnimationFrame=function(a,n){var t=(new Date).getTime(),e=Math.max(0,16-(t-s)),i=window.setTimeout(function(){a(t+e)},e);return s=t+e,i}),window.cancelAnimationFrame||(window.cancelAnimationFrame=function(a){clearTimeout(a)}),u.initialize=function(){return!!u.initialized||(u.error="",u.d="string"==typeof a?document.getElementById(a):a,u.d?(u.startVal=Number(n),u.endVal=Number(t),d(u.startVal)&&d(u.endVal)?(u.decimals=Math.max(0,e||0),u.dec=Math.pow(10,u.decimals),u.duration=1e3*Number(i)||2e3,u.countDown=u.startVal>u.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.frameVal<u.endVal?u.endVal:u.frameVal:u.frameVal=u.frameVal>u.endVal?u.endVal:u.frameVal,u.frameVal=Math.round(u.frameVal*u.dec)/u.dec,u.printValue(u.frameVal),n<u.duration?u.rAF=requestAnimationFrame(u.count):u.callback&&u.callback()},u.start=function(a){u.initialize()&&(u.callback=a,u.rAF=requestAnimationFrame(u.count))},u.pauseResume=function(){u.paused?(u.paused=!1,delete u.startTime,u.duration=u.remaining,u.startVal=u.frameVal,requestAnimationFrame(u.count)):(u.paused=!0,cancelAnimationFrame(u.rAF))},u.reset=function(){u.paused=!1,delete u.startTime,u.initialized=!1,u.initialize()&&(cancelAnimationFrame(u.rAF),u.printValue(u.startVal))},u.update=function(a){u.initialize()&&(d(a=Number(a))?(u.error="",a!==u.frameVal&&(cancelAnimationFrame(u.rAF),u.paused=!1,delete u.startTime,u.startVal=u.frameVal,u.endVal=a,u.countDown=u.startVal>u.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-p42/p42-left/gotham-bold.woff b/AccordHotel-p42/p42-left/gotham-bold.woff
new file mode 100644
index 0000000..3ba9f64
Binary files /dev/null and b/AccordHotel-p42/p42-left/gotham-bold.woff differ
diff --git a/AccordHotel-p42/p42-left/gotham-htf-medium.woff b/AccordHotel-p42/p42-left/gotham-htf-medium.woff
new file mode 100644
index 0000000..213a928
Binary files /dev/null and b/AccordHotel-p42/p42-left/gotham-htf-medium.woff differ
diff --git a/AccordHotel-p42/p42-left/gothamhtf-book.woff b/AccordHotel-p42/p42-left/gothamhtf-book.woff
new file mode 100644
index 0000000..d028b51
Binary files /dev/null and b/AccordHotel-p42/p42-left/gothamhtf-book.woff differ
diff --git a/AccordHotel-p42/p42-left/index.html b/AccordHotel-p42/p42-left/index.html
index 7266060..2ce4e43 100644
--- a/AccordHotel-p42/p42-left/index.html
+++ b/AccordHotel-p42/p42-left/index.html
@@ -12,12 +12,40 @@
 
     <img class="img1" src="src/title.svg" alt="">
     <img class="img2" src="src/desc.svg" alt="">
-    <img class="img3" src="src/numbers.svg" alt="">
+    <!--<img class="img3" src="src/numbers.svg" alt="">-->
+
+    <div class="numbers">
+        <div class="line1"></div>
+        <div class="line2"></div>
+        <div class="line3"></div>
+        <div class="line4"></div>
+
+        <span id="number1" class="number1">28</span>
+        <span id="number2" class="number2">556</span>
+        <span id="number3" class="number3">11</span>
+        <span id="number4" class="number4">10</span>
+        <span id="number5" class="number5">260</span>
+        <span id="number6" class="number6">2</span>
+
+        <span class="title">PIPELINE</span>
+
+        <span class="txt1">hotels</span>
+        <span class="txt2">rooms</span>
+        <span class="txt3">countries</span>
+        <span class="txt4">hotels</span>
+        <span class="txt5">rooms</span>
+        <span class="txt6">countries</span>
+
+        <span class="txt7">Only hotel group with presence<br>on all</span>
+        <span class="txt8">7 CONTINENTS.</span>
+    </div>
+
 </div>
 
 <script src="jQuery.js"></script>
 <script src="TweenMax.min.js"></script>
 <script src="TimelineMax.min.js"></script>
+<script src="countUp.min.js"></script>
 <script src="main.js"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/AccordHotel-p42/p42-left/main.js b/AccordHotel-p42/p42-left/main.js
index 307c90a..345109b 100644
--- a/AccordHotel-p42/p42-left/main.js
+++ b/AccordHotel-p42/p42-left/main.js
@@ -1,5 +1,60 @@
 let tl = new TimelineMax();
 
-tl.from('.img1',1.5,{display: 'none',x: -150,opacity:0});
-tl.from('.img2',1.5,{display: 'none',x: -150,opacity:0},"-=0.9");
-tl.from('.img3',1.5,{display: 'none',x: -150,opacity:0},"-=0.9");
+tl.from('.img1',1.5,{display: 'none',x: -150,opacity:0},'+=4.5');
+tl.from('.img2',1.5,{display: 'none',x: -150,opacity:0},"+=0.3");
+tl.from('.numbers',1,{opacity:0});
+
+
+
+var delay = 8.3;
+
+var id1 = document.getElementById("number1");
+var id2 = document.getElementById("number2");
+var id3 = document.getElementById("number3");
+var id6 = document.getElementById("number6");
+var id4 = document.getElementById("number4");
+var id5 = document.getElementById("number5");
+
+var hidden = 0;
+var visible = 1;
+var dureeOpacite = delay * 1000;
+
+var options = {
+    useEasing: true,
+    useGrouping: true,
+    separator: ',',
+    decimal: '.',
+};
+var number1 = new CountUp('number1', 0, 28, 0, 2.5, options);
+var number2 = new CountUp('number2', 0, 556, 0, 2.5, options);
+var number6 = new CountUp('number6', 0, 2, 0, 2.5, options);
+var number4 = new CountUp('number4', 0, 10, 0, 2.5, options);
+var number5 = new CountUp('number5', 0, 260, 0, 2.5, options);
+var number3 = new CountUp('number3', 0, 11, 0, 2.5, options);
+if (delay > 0){
+    id1.style.opacity = hidden;
+    id2.style.opacity = hidden;
+    id6.style.opacity = hidden;
+    id4.style.opacity = hidden;
+    id5.style.opacity = hidden;
+    id3.style.opacity = hidden;
+    setTimeout(function () {
+        id1.style.opacity = visible;
+        id2.style.opacity = visible;
+        id6.style.opacity = visible;
+        id4.style.opacity = visible;
+        id5.style.opacity = visible;
+        id3.style.opacity = visible;
+    },dureeOpacite );
+}
+function run() {
+    setTimeout(function () {
+        number1.start();
+        number2.start();
+        number6.start();
+        number4.start();
+        number5.start();
+        number3.start();
+    }, delay * 1000);
+}
+run();
diff --git a/AccordHotel-p42/p42-left/style.css b/AccordHotel-p42/p42-left/style.css
index 1093071..80281e6 100644
--- a/AccordHotel-p42/p42-left/style.css
+++ b/AccordHotel-p42/p42-left/style.css
@@ -2,6 +2,15 @@
   margin: 0;
   padding: 0; }
 
+@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"); }
 #canvas {
   display: none;
   position: absolute; }
@@ -31,4 +40,168 @@
   top: 582px;
   left: 47px; }
 
+.numbers {
+  position: absolute;
+  top: 0; }
+
+.line1 {
+  width: 179px;
+  background: #D0906E;
+  height: 1px;
+  position: absolute;
+  top: 582px;
+  left: 47px; }
+
+.line2 {
+  width: 1px;
+  background: #D0906E;
+  height: 63px;
+  position: absolute;
+  top: 589px;
+  left: 133px; }
+
+.line3 {
+  width: 179px;
+  background: #D0906E;
+  height: 1px;
+  position: absolute;
+  top: 663px;
+  left: 47px; }
+
+.line4 {
+  width: 179px;
+  background: #D0906E;
+  height: 1px;
+  position: absolute;
+  top: 706px;
+  left: 47px; }
+
+.number1 {
+  font-family: Gotham-Bold;
+  color: #D0906E;
+  position: absolute;
+  top: 593px;
+  left: 55px;
+  font-size: 17px; }
+
+.txt1 {
+  font-family: GothamHTF-Book;
+  color: #D0906E;
+  position: absolute;
+  top: 601px;
+  left: 80px;
+  font-size: 8px; }
+
+/*********************** */
+.number2 {
+  font-family: Gotham-Bold;
+  color: #D0906E;
+  position: absolute;
+  top: 613px;
+  left: 54px;
+  font-size: 17px; }
+
+.txt2 {
+  font-family: GothamHTF-Book;
+  color: #D0906E;
+  position: absolute;
+  top: 621px;
+  left: 90px;
+  font-size: 8px; }
+
+/************************* */
+.number3 {
+  font-family: Gotham-Bold;
+  color: #D0906E;
+  position: absolute;
+  top: 633px;
+  left: 55px;
+  font-size: 17px; }
+
+.txt3 {
+  font-family: GothamHTF-Book;
+  color: #D0906E;
+  position: absolute;
+  top: 642px;
+  left: 74px;
+  font-size: 8px; }
+
+/*************************** */
+.title {
+  font-family: GothamHTF-medium;
+  color: #D0906E;
+  position: absolute;
+  top: 587px;
+  left: 151px;
+  font-size: 8px; }
+
+/**************************** */
+.number4 {
+  font-family: Gotham-Bold;
+  color: #D0906E;
+  position: absolute;
+  top: 599px;
+  left: 150px;
+  font-size: 17px; }
+
+.txt4 {
+  font-family: GothamHTF-Book;
+  color: #D0906E;
+  position: absolute;
+  top: 607px;
+  left: 174px;
+  font-size: 8px; }
+
+/***************************** */
+.number5 {
+  font-family: Gotham-Bold;
+  color: #D0906E;
+  position: absolute;
+  top: 619px;
+  left: 150px;
+  font-size: 17px; }
+
+.txt5 {
+  font-family: GothamHTF-Book;
+  color: #D0906E;
+  position: absolute;
+  top: 627px;
+  left: 187px;
+  font-size: 8px; }
+
+/******************************* */
+.number6 {
+  font-family: Gotham-Bold;
+  color: #D0906E;
+  position: absolute;
+  top: 639px;
+  left: 150px;
+  font-size: 17px; }
+
+.txt6 {
+  font-family: GothamHTF-Book;
+  color: #D0906E;
+  position: absolute;
+  top: 648px;
+  left: 166px;
+  font-size: 8px; }
+
+.txt7 {
+  font-family: GothamHTF-Book;
+  color: #D0906E;
+  position: absolute;
+  top: 676px;
+  left: 54px;
+  font-size: 8px;
+  width: 150px; }
+
+.txt8 {
+  font-family: Gotham-Bold;
+  color: #D0906E;
+  position: absolute;
+  top: 684.5px;
+  left: 78px;
+  font-size: 8px;
+  width: 150px; }
+
 /*# sourceMappingURL=style.css.map */
diff --git a/AccordHotel-p42/p42-left/style.css.map b/AccordHotel-p42/p42-left/style.css.map
index 53132f8..3e6788e 100644
--- a/AccordHotel-p42/p42-left/style.css.map
+++ b/AccordHotel-p42/p42-left/style.css.map
@@ -1,6 +1,6 @@
 {
 "version": 3,
-"mappings": "AAAA,CAAC;EACC,MAAM,EAAE,CAAC;EACT,OAAO,EAAE,CAAC;;AACZ,OAAO;EACL,OAAO,EAAE,IAAI;EACb,QAAQ,EAAE,QAAQ;;AACpB,UAAU;EACR,KAAK,EAAE,KAAK;EACZ,MAAM,EAAE,KAAK;;AACf,GAAG;EACD,QAAQ,EAAE,QAAQ;;AACpB,KAAK;EACH,QAAQ,EAAE,QAAQ;EAClB,KAAK,EAAE,KAAK;EACZ,GAAG,EAAE,KAAK;EACV,IAAI,EAAE,IAAI;;AACZ,KAAK;EACH,QAAQ,EAAE,QAAQ;EAClB,KAAK,EAAE,KAAK;EACZ,GAAG,EAAE,KAAK;EACV,IAAI,EAAE,IAAI;;AACZ,KAAK;EACH,QAAQ,EAAE,QAAQ;EAClB,KAAK,EAAE,KAAK;EACZ,GAAG,EAAE,KAAK;EACV,IAAI,EAAE,IAAI",
+"mappings": "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",
 "sources": ["style.sass"],
 "names": [],
 "file": "style.css"
diff --git a/AccordHotel-p42/p42-left/style.sass b/AccordHotel-p42/p42-left/style.sass
index 05e45e2..075b0ae 100644
--- a/AccordHotel-p42/p42-left/style.sass
+++ b/AccordHotel-p42/p42-left/style.sass
@@ -1,6 +1,16 @@
 *
   margin: 0
   padding: 0
+$color: #D0906E
+@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")
 #canvas
   display: none
   position: absolute
@@ -23,4 +33,148 @@
   position: absolute
   width: 179px
   top: 582px
-  left: 47px
\ No newline at end of file
+  left: 47px
+.numbers
+  position: absolute
+  top: 0
+.line1
+  width: 179px
+  background: #D0906E
+  height: 1px
+  position: absolute
+  top: 582px
+  left: 47px
+.line2
+  width: 1px
+  background: #D0906E
+  height: 63px
+  position: absolute
+  top: 589px
+  left: 133px
+.line3
+  width: 179px
+  background: #D0906E
+  height: 1px
+  position: absolute
+  top: 663px
+  left: 47px
+.line4
+  width: 179px
+  background: #D0906E
+  height: 1px
+  position: absolute
+  top: 706px
+  left: 47px
+.number1
+  font-family: Gotham-Bold
+  color: #D0906E
+  position: absolute
+  top: 593px
+  left: 55px
+  font-size: 17px
+.txt1
+  font-family: GothamHTF-Book
+  color: #D0906E
+  position: absolute
+  top: 601px
+  left: 80px
+  font-size: 8px
+/************************/
+.number2
+  font-family: Gotham-Bold
+  color: #D0906E
+  position: absolute
+  top: 613px
+  left: 54px
+  font-size: 17px
+.txt2
+  font-family: GothamHTF-Book
+  color: #D0906E
+  position: absolute
+  top: 621px
+  left: 90px
+  font-size: 8px
+/**************************/
+.number3
+  font-family: Gotham-Bold
+  color: #D0906E
+  position: absolute
+  top: 633px
+  left: 55px
+  font-size: 17px
+.txt3
+  font-family: GothamHTF-Book
+  color: #D0906E
+  position: absolute
+  top: 642px
+  left: 74px
+  font-size: 8px
+/****************************/
+.title
+  font-family: GothamHTF-medium
+  color: #D0906E
+  position: absolute
+  top: 587px
+  left: 151px
+  font-size: 8px
+/*****************************/
+.number4
+  font-family: Gotham-Bold
+  color: #D0906E
+  position: absolute
+  top: 599px
+  left: 150px
+  font-size: 17px
+.txt4
+  font-family: GothamHTF-Book
+  color: #D0906E
+  position: absolute
+  top: 607px
+  left: 174px
+  font-size: 8px
+/******************************/
+.number5
+  font-family: Gotham-Bold
+  color: #D0906E
+  position: absolute
+  top: 619px
+  left: 150px
+  font-size: 17px
+.txt5
+  font-family: GothamHTF-Book
+  color: #D0906E
+  position: absolute
+  top: 627px
+  left: 187px
+  font-size: 8px
+/********************************/
+.number6
+  font-family: Gotham-Bold
+  color: #D0906E
+  position: absolute
+  top: 639px
+  left: 150px
+  font-size: 17px
+.txt6
+  font-family: GothamHTF-Book
+  color: #D0906E
+  position: absolute
+  top: 648px
+  left: 166px
+  font-size: 8px
+.txt7
+  font-family: GothamHTF-Book
+  color: #D0906E
+  position: absolute
+  top: 676px
+  left: 54px
+  font-size: 8px
+  width: 150px
+.txt8
+  font-family: Gotham-Bold
+  color: #D0906E
+  position: absolute
+  top: 684.5px
+  left: 78px
+  font-size: 8px
+  width: 150px
\ No newline at end of file