start scene animation

css/main.css

@@ -130,7 +130,7 @@ main section h2 {
 
   position: absolute;
   width: 100vw;
-  min-height: 100vh;
+  height: 1300px;
   left: 1px;
   top: -2px;
 
@@ -184,6 +184,9 @@ main section h2 {
 #welcome img {
   position: absolute;
 }
+.phones-land{
+  z-index:-1;
+}
 
 #phone-watches-1 {
   width: 345px;

index.html

@@ -43,10 +43,12 @@
   </section>
   <section id="welcome">
 
-    <img src="/img/phone_watches.png" alt="phone watches" id="phone-watches-1">
-    <img src="/img/phone_watches.png" alt="phone watches" id="phone-watches-2">
-    <img src="/img/phone_watches.png" alt="phone watches" id="phone-watches-3">
-    <img src="/img/phone_watches.png" alt="phone watches" id="phone-watches-4">
+    <div class="phones-land">
+      <img src="/img/phone_watches.png" alt="phone watches" id="phone-watches-1">
+      <img src="/img/phone_watches.png" alt="phone watches" id="phone-watches-2">
+      <img src="/img/phone_watches.png" alt="phone watches" id="phone-watches-3">
+      <img src="/img/phone_watches.png" alt="phone watches" id="phone-watches-4">
+    </div>
     <h2 class="margin-auto container-text-lg">
       We come from
       <span class="color-emphasis">
@@ -144,8 +146,8 @@
       <img src="/img/phone_clothes.png" alt="phone">
     </div>
   </section>
-<!--  other section-->
-  <section id="popover" >
+  <!--  other section-->
+  <section id="popover">
     <div class="phone-container">
       <div class="top">
 
@@ -169,7 +171,7 @@
       </p>
     </div>
   </section>
-  <section id="portfolio" >
+  <section id="portfolio">
     <div class="phone-container"></div>
     <div id="text">
       <h2>

js/main.js

@@ -7,8 +7,7 @@ anime({
 
 anime({
   targets: '#hand',
-  backgroundPosition: ['50px', '0px'],
-  opacity: ['0.5', '1'],
+  top: ['0px', '100px'],
   easing: 'easeInOut'
 });
 
@@ -29,17 +28,13 @@ anime({
 let tl1 = anime.timeline({autoplay: false});
 
 let s1a2 = {
-  targets: '#cover',
-  backgroundColor: ['#000', '#ddd'],
-  borderRadius: function (el) {
-    return anime.random(2, 10);
-  },
-  delay: function (el) {
-    return anime.random(0, 800);
-  }
+  targets: '#hand',
+  top: ['0px', '100px'],
+  easing: 'easeInOut'
 };
+
 // Add children
-tl1.add(s1a2, '-=1300');
+tl1.add(s1a2, '-=10');
 
 let controller = new ScrollMagic.Controller();