add gsap animation

SvitlanaTsupryk-jul18 · Mar 17, 2019 · 1addfd7 · 1addfd7
1 parent feeb7e6
commit 1addfd7
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 32 deletions.
diff --git a/index.html b/index.html
@@ -16,7 +16,7 @@
 
 <body>
 
-    <header>
+    <header class="header">
         <div class="logo">
             <img src="./images/logo.png" alt="Yacht Marine">
         </div>
@@ -80,13 +80,13 @@
         </nav>
     </header>
     <section class="hero mycontainer">
-        <div>
-            <h1 class="hero__title">Luxury crewed catamaran fllet</h1>
+        <div class="hero__main">
+            <h1 class="hero__title anim">Luxury crewed catamaran fllet</h1>
             <span class="anchor"><img src="./images/icon/fa-anchor.svg" alt="anchor icon"></span>
-            <div class="hero__text">Yacht charter and yacht investments in Spain. Luxury crewed and bareboat catamarans. Charter in Spain. Lagoon catamarans. Bali catamarans. Monofleet More 55 ft.</div>
-            <button type="button" class="details-btn">details</button>
+            <div class="hero__text anim">Yacht charter and yacht investments in Spain. Luxury crewed and bareboat catamarans. Charter in Spain. Lagoon catamarans. Bali catamarans. Monofleet More 55 ft.</div>
+            <button type="button" class="details-btn anim">details</button>
         </div>
-        <div class="search">
+        <div class="search anim">
             <div class="search__wrap">
                 <select class="search__name">
                     <option selecteded>YACHT NAME</option>
@@ -110,7 +110,7 @@ <h1 class="hero__title">Luxury crewed catamaran fllet</h1>
                 <button type="button" class="search__detailed">DETAILED SEARCH &nbsp;&nbsp;<img src="./images/icon/Shape 1.svg"></button>
             </div>
         </div>
-        <div class="hero__adapt">
+        <div class="hero__adapt anim">
             <button type="button" class="hero__adapt-btn" data-toggle="modal" data-target="#exampleModal3">YACHT SEARCH</button>
             <!-- Button trigger modal -->
             <!-- <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal3">
@@ -142,6 +142,7 @@ <h5 class="modal-title" id="exampleModal3Label">Modal title</h5>
         </div>
     </section>
 
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenMax.min.js"></script>
     <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
     <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

diff --git a/multirange.js b/multirange.js
@@ -13,7 +13,7 @@
         var value = input.getAttribute("value");
         var values = value === null ? [] : value.split(",");
         var min = +(input.min || 0);
-        var max = +(input.max || 300);
+        var max = +(input.max || 200);
         var ghost = input.cloneNode();
 
         input.classList.add("multirange", "original");
@@ -62,7 +62,7 @@
         }
 
         function update() {
-            ghost.style.setProperty("--low", 100 * ((input.valueLow - min) / (max - min)) + 1 + "%");
+            ghost.style.setProperty("--low", 100 * ((input.valueLow - min) / (max - min)) / 3 + 1 + "%");
             ghost.style.setProperty("--high", 100 * ((input.valueHigh - min) / (max - min)) - 1 + "%");
             price.innerHTML = "$ " + parseFloat(input.value) + "M - $" + parseFloat(ghost.value) + "M";
         }

diff --git a/sass/multirange.css b/sass/multirange.css
@@ -1,7 +1,7 @@
 @supports (--css: variables) {
     input[type="range"].multirange {
         padding: 0;
-        margin: 5px;
+        /* margin: 5px; */
         display: inline-block;
         vertical-align: top;
         -webkit-appearance: none;

diff --git a/script.js b/script.js
@@ -6,7 +6,7 @@
 
     //preloader();
     burgerCloseIcon();
-
+    animation();
 
     //change burger close icon
 
@@ -34,31 +34,21 @@
 
 
     //show text in example of portfolio
-    function showTitle() {
+    function animation() {
 
         let tl = new TimelineMax();
         tl
-            .from(".navbar-brand", .5, {
-                x: '-300%',
-
-            }, delay = .5)
-            .staggerFrom(".nav-link", .5, {
-                y: '-50',
+            .from(".header", 1, {
+                y: '-300%'
+            }, )
+            .staggerFrom(".anim", .5, {
+                y: '150',
                 opacity: 0
-            }, 0.1, "-=0.20")
-            .from('#title', 2, {
-                y: '-300%',
-                ease: Bounce.easeOut
-            })
-            .from('.hero__subtitle', .5, {
-                y: '100',
-                opacity: 0
-            }, "-=1")
-            .from('.hero__toscroll', 1, {
-                backgroundColor: "rgba(52, 58, 64)",
-                opacity: .8,
-                borderRadius: "5px"
-            }, "-=2")
+            }, 0.2)
+            .from(".anchor", 0.1, {
+                scale: 0
+            }, "-=0.8")
+
 
     }
 })();