Replace swiper with div for pure css animation

canopas · Sep 13, 2023 · e91e591 · e91e591
1 parent 823d86a
commit e91e591
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 64 deletions.
diff --git a/vue-frontend/src/components/ios-app-development/BlogSection.vue b/vue-frontend/src/components/ios-app-development/BlogSection.vue
@@ -6,57 +6,44 @@
       <span>Our Blogs</span>
     </div>
     <!-- Mobile UI start -->
-    <div class="tw-mt-8 tw-block md:tw-hidden card-container">
-      <swiper
-        :slidesPerView="1"
-        :spaceBetween="10"
-        :centeredSlides="true"
-        :modules="modules"
-        :speed="3000"
-        :breakpoints="{
-          '470': {
-            slidesPerView: 1.2,
-          },
-          '520': {
-            slidesPerView: 1.4,
-          },
-        }"
-        class="!tw-p-8 md:tw-p-4 card"
+    <div
+      class="tw-mt-8 tw-block md:tw-hidden tw-relative tw-w-full tw-h-[370px]"
+    >
+      <div
+        class="card tw-absolute tw-h-full tw-top-0 tw-left-[20%] sm:tw-left-[30%] tw-flex tw-flex-row tw-items-center tw-justify-center"
       >
-        <swiper-slide v-for="(blog, index) in blogs" :key="index">
+        <div
+          v-for="(blog, index) in blogs"
+          :key="index"
+          class="tw-w-80 tw-h-[299px] tw-drop-shadow-md tw-text-left tw-cursor-pointer"
+          :class="blog.className"
+        >
+          <img
+            @click="openBlog(blog.link, 'tap_ios_blog_section')"
+            :src="blog.image"
+            :srcset="`${blog.image} 400w`"
+            :alt="blog.title"
+            class="tw-h-44 tw-w-80 tw-object-cover"
+            loading="lazy"
+          />
           <div
-            class="tw-w-80 tw-h-[299px] tw-drop-shadow-md tw-text-left tw-cursor-pointer"
-            :style="blog.style"
-            :class="blog.className"
-            style="animation-delay: 1s"
+            @click="openBlog(blog.link, 'tap_ios_blog_section')"
+            class="tw-w-80 tw-bg-white tw-h-28 tw-flex tw-flex-col tw-justify-center tw-px-8"
           >
-            <img
-              @click="openBlog(blog.link, 'tap_ios_blog_section')"
-              :src="blog.image"
-              :srcset="`${blog.image} 400w`"
-              :alt="blog.title"
-              class="tw-h-44 tw-w-80 tw-object-cover"
-              loading="lazy"
-            />
-            <div
-              @click="openBlog(blog.link, 'tap_ios_blog_section')"
-              class="tw-w-80 tw-bg-white tw-h-28 tw-flex tw-flex-col tw-justify-center tw-px-8"
+            <h2
+              class="tw-font-inter-medium tw-text-basetw-leading-6 tw-tracking-[-4%] tw-text-black-core/[0.87]"
             >
-              <h2
-                class="tw-font-inter-medium tw-text-basetw-leading-6 tw-tracking-[-4%] tw-text-black-core/[0.87]"
-              >
-                {{ blog.title }}
-              </h2>
+              {{ blog.title }}
+            </h2>
 
-              <span
-                class="tw-mt-2 tw-font-inter-regular tw-text-sm tw-tracking-[-0.72px] lg:tw-leading-[1.3125rem] v2-canopas-gradient-text"
-              >
-                {{ blog.readTime }}
-              </span>
-            </div>
+            <span
+              class="tw-mt-2 tw-font-inter-regular tw-text-sm tw-tracking-[-0.72px] lg:tw-leading-[1.3125rem] v2-canopas-gradient-text"
+            >
+              {{ blog.readTime }}
+            </span>
           </div>
-        </swiper-slide>
-      </swiper>
+        </div>
+      </div>
     </div>
 
     <!-- Mobile UI End -->
@@ -158,39 +145,38 @@ export default {
           readTime: "5 min read",
           deskImage: [dektop_blog1_800w, dektop_blog1_1200w],
           link: "https://blog.canopas.com/the-ultimate-guide-to-ios-unit-testing-with-best-practices-part-2-f2eacbf3d8d4",
-          className: "",
         },
         {
           title: "SwiftUI Performance Tuning: Tips and Tricks",
           image: mobile_blog2_400w,
           readTime: "8 min read",
           deskImage: [dektop_blog2_800w, dektop_blog2_1200w],
           link: "https://blog.canopas.com/swiftui-performance-tuning-tips-and-tricks-a8f9eeb23ec4",
-          className: "-tw-rotate-6 tw-animate-slideLeft ",
+          className: "tw-animate-slideLeft ",
         },
         {
           title: "Designing Data Layer For Offline-first Apps",
           image: mobile_blog3_400w,
           readTime: "7 min read",
           deskImage: [dektop_blog3_800w, dektop_blog3_1200w],
           link: "https://blog.canopas.com/ios-designing-data-layer-for-offline-first-apps-f929c83bb195",
-          className: "tw-rotate-6 tw-animate-slideLeft ",
+          className: "tw-animate-slideLeftOdd !tw-delay-300",
         },
         {
           title: "SwiftUI — Complex navigation made easier with UIPilot",
           image: mobile_blog4_400w,
           readTime: "5 min read",
           deskImage: [dektop_blog4_800w, dektop_blog4_1200w],
           link: "https://blog.canopas.com/swiftui-complex-navigation-made-easier-with-uipilot-5b33279f3476",
-          className: "-tw-rotate-6 tw-animate-slideLeft ",
+          className: "tw-animate-slideLeft !tw-delay-500",
         },
         {
           title: "A Complete Guide to iOS App Auto Deployment with CI-CD",
           image: mobile_blog5_400w,
           readTime: "7 min read",
           deskImage: [dektop_blog5_800w, dektop_blog5_1200w],
           link: "https://blog.canopas.com/a-complete-guide-to-ios-app-auto-deployment-with-ci-cd-b5dc516ba41d",
-          className: "tw-rotate-6 tw-animate-slideLeft",
+          className: "tw-animate-slideLeftOdd !tw-delay-700",
         },
       ],
     };
@@ -210,17 +196,4 @@ export default {
 </script>
 <style lang="postcss" scoped>
 @import "swiper/css";
-.card-container {
-  position: relative;
-  width: 100%;
-  height: 370px;
-  perspective: 1000px;
-}
-.card {
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  top: 0;
-  left: 0;
-}
 </style>
diff --git a/vue-frontend/tailwind.config.cjs b/vue-frontend/tailwind.config.cjs
@@ -154,7 +154,17 @@ module.exports = {
           },
           "100%": {
             opacity: "1",
-            transform: "translateX(-100%)",
+            transform: "rotate(2deg) translateX(-110%)",
+          },
+        },
+        slideLeftOdd: {
+          "0%": {
+            opacity: "0",
+            transform: "translateX(0) ",
+          },
+          "100%": {
+            opacity: "1",
+            transform: "rotate(-2deg) translateX(-110%)",
           },
         },
       },
@@ -172,6 +182,7 @@ module.exports = {
         slideDown: "slideDown 7s infinite",
         slideRight: "slideRight 7s infinite",
         slideLeft: "slideLeft 3s forwards",
+        slideLeftOdd: "slideLeftOdd 3s forwards",
         fadeUp: "fadeUp 4s ease-in",
         fadeSlide: "fadeIn 4s ease-in-out",
         fadeSlideOut: "fadeOut 2.5s ease-in-out",