Add animation of the screens and fix transition of the step

brunoosella · Nov 14, 2023 · 9959bb0 · 9959bb0
1 parent 3c17b60
commit 9959bb0
Show file tree

Hide file tree

Showing 5 changed files with 107 additions and 2 deletions.
diff --git a/devias-web/src/Components/ItemStep/ItemStep.scss b/devias-web/src/Components/ItemStep/ItemStep.scss
@@ -57,7 +57,9 @@
     max-height: 0;
     border-top: 0;
     overflow: hidden;
-    transition: max-height .35s ease-in-out;
+    transition: 
+      max-height .35s ease-out,
+      border-top .35s ease;
 
     .step-description {
       color: #333;
@@ -66,7 +68,7 @@
     }
 
     &.show {
-      max-height: 500px;
+      max-height: 300px;
       border-top: 0.5px solid #9d9d9d40;
     }
   }

diff --git a/devias-web/src/Screens/AboutUs/AboutUs.scss b/devias-web/src/Screens/AboutUs/AboutUs.scss
@@ -9,6 +9,7 @@
           font-family: 'Ubuntu', sans-serif;
           font-weight: 300;
           color: #828282;
+          animation: slideRight 0.5s ease-in-out;
         }
         h1{
           font-size: 6rem;
@@ -18,6 +19,7 @@
           margin-bottom: 0.5rem;
           font-weight: 500;
           line-height: 1.2;
+          animation: slideRight 1s ease-in-out;
 
           @media (max-width: 991px) {
             font-size: 3rem;
@@ -33,6 +35,8 @@
     }
   }
   .section-info{
+    animation: slideDown 1.5s ease-in-out;
+
     .container{
       .container-card{
         width: 100%;
@@ -87,4 +91,26 @@
       }
     }
   }
+}
+
+@keyframes slideRight {
+  0% {
+    transform: translateX(100%);
+    opacity: 0;
+  }
+  100%{
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+
+@keyframes slideDown {
+  0% {
+    transform: translateY(100%);
+    opacity: 0;
+  }
+  100% {
+    transform: translateY(0);
+    opacity: 1;
+  }
 }
diff --git a/devias-web/src/Screens/ContactUs/ContactUs.scss b/devias-web/src/Screens/ContactUs/ContactUs.scss
@@ -13,6 +13,7 @@
         font-size: 6rem;
         font-weight: 500;
         margin: 0;
+        animation: slideRight 1s ease-in-out;
 
         @media (max-width: 991px) {
           font-size: 3rem;
@@ -28,6 +29,7 @@
           font-family: 'Ubuntu', sans-serif;
           font-weight: 300;
           color: #828282;
+          animation: slideRight 0.5s ease-in-out;
       }
 
       @media (max-width: 991px) {
@@ -46,9 +48,32 @@
     align-items: center;
     gap: 10px;
     flex-wrap: wrap;
+    animation: slideDown 1.5s ease-in-out;
 
     @media all and (max-width: 768px) {
       flex-direction: column;
     }
   }
 }
+
+@keyframes slideRight {
+  0% {
+    transform: translateX(100%);
+    opacity: 0;
+  }
+  100%{
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+
+@keyframes slideDown {
+  0% {
+    transform: translateY(100%);
+    opacity: 0;
+  }
+  100% {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
diff --git a/devias-web/src/Screens/OurCustomers/OurCustomers.scss b/devias-web/src/Screens/OurCustomers/OurCustomers.scss
@@ -5,12 +5,14 @@
     .container {
       .main-title {
         margin: 100px 0 64px 0;
+
 
         h5 {
           font-size: 1.5rem;
           font-family: 'Ubuntu', sans-serif;
           font-weight: 300;
           color: #828282;
+          animation: slideRight 0.5s ease-in-out;
         }
 
         h1 {
@@ -21,6 +23,7 @@
           margin-bottom: 0.5rem;
           font-weight: 500;
           line-height: 1.2;
+          animation: slideRight 1s ease-in-out;
 
           @media (max-width: 991px) {
             font-size: 3rem;
@@ -35,6 +38,8 @@
   }
 
   .info {
+    animation: slideDown 1.5s ease-in-out;
+
     .container {
       .container-card {
         width: 100%;
@@ -112,4 +117,26 @@
       }
     }
   }
+}
+
+@keyframes slideRight {
+  0% {
+    transform: translateX(100%);
+    opacity: 0;
+  }
+  100%{
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+
+@keyframes slideDown {
+  0% {
+    transform: translateY(100%);
+    opacity: 0;
+  }
+  100% {
+    transform: translateY(0);
+    opacity: 1;
+  }
 }
diff --git a/devias-web/src/Screens/OurWay/OurWay.scss b/devias-web/src/Screens/OurWay/OurWay.scss
@@ -13,6 +13,7 @@
           font-size: 6rem;
           font-weight: 500;
           margin: 0;
+          animation: slideRight 1s ease-in-out;
 
           @media (max-width: 991px) {
             font-size: 3rem;
@@ -28,6 +29,7 @@
           font-family: 'Ubuntu', sans-serif;
           font-weight: 300;
           color: #828282;
+          animation: slideRight 0.5s ease-in-out;
         }
 
         @media (max-width: 991px){
@@ -52,6 +54,7 @@
 
   .process-steps {
     margin: 95px 0px 115px 0px;
+    animation: slideDown 1.5s ease-in-out;
   }
 
   .services-cards {
@@ -199,4 +202,26 @@
       }
     }
   }
+}
+
+@keyframes slideRight {
+  0% {
+    transform: translateX(100%);
+    opacity: 0;
+  }
+  100%{
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+
+@keyframes slideDown {
+  0% {
+    transform: translateY(100%);
+    opacity: 0;
+  }
+  100% {
+    transform: translateY(0);
+    opacity: 1;
+  }
 }