add animation for img in CtaSectionWithShapedImage

milewskibogumil · Sep 25, 2024 · 06059eb · 06059eb
1 parent 602fdb7
commit 06059eb
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 7 deletions.
diff --git a/apps/astro/src/components/global/CtaSectionWithShapedImage.astro b/apps/astro/src/components/global/CtaSectionWithShapedImage.astro
@@ -79,26 +79,39 @@ const { index, heading, paragraph, description, cta, img } = Astro.props
     }
   }
   .img {
+    overflow: hidden;
     width: fit-content;
     max-width: 534px;
     position: relative;
+    img {
+      animation: CtaSectionWithShapedImage 800ms var(--easing) both;
+      transform-origin: top;
+      @keyframes CtaSectionWithShapedImage {
+        from {
+          transform: scale(1.1);
+        }
+        to {
+          transform: scale(1);
+        }
+      }
+    }
     div {
       z-index: 1;
       width: 10px;
       height: 100%;
       background: var(--background-100, #fffcf9);
       position: absolute;
       top: 0;
-      animation: CtaSectionWithShapedImage 500ms 200ms var(--easing) both;
+      animation: CtaSectionWithShapedImageShape 500ms 500ms var(--easing) both;
       transform-origin: left;
       &:nth-of-type(1) {
         left: 66%;
       }
       &:nth-of-type(2) {
         left: 87%;
-        animation-delay: 300ms;
+        animation-delay: 600ms;
       }
-      @keyframes CtaSectionWithShapedImage {
+      @keyframes CtaSectionWithShapedImageShape {
         0% {
           transform: scaleX(0);
         }

diff --git a/apps/astro/src/components/global/SimpleCtaSection.astro b/apps/astro/src/components/global/SimpleCtaSection.astro
@@ -32,7 +32,8 @@ const { index, name, text, cta } = Astro.props
 
 <style lang="scss">
   .SimpleCtaSection {
-    margin: clamp(calc(48rem / 16), calc(64vw / 7.68), calc(64rem / 16)) 0;
+    margin-top: clamp(calc(48rem / 16), calc(64vw / 7.68), calc(64rem / 16));
+    margin-bottom: clamp(calc(48rem / 16), calc(64vw / 7.68), calc(64rem / 16));
     padding: clamp(calc(32rem / 16), calc(80vw / 7.68), calc(144rem / 16)) 0;
     background: var(--primary-300, #f4efe8);
     .max-width {

diff --git a/apps/astro/src/components/global/SplitContentImageGrid.astro b/apps/astro/src/components/global/SplitContentImageGrid.astro
@@ -51,7 +51,8 @@ const { index, heading, paragraph, cta, images } = Astro.props
 
 <style lang="scss">
   .SplitContentImageGrid {
-    margin: clamp(calc(48rem / 16), calc(64vw / 7.68), calc(64rem / 16)) 0;
+    margin-top: clamp(calc(48rem / 16), calc(64vw / 7.68), calc(64rem / 16));
+    margin-bottom: clamp(calc(48rem / 16), calc(64vw / 7.68), calc(64rem / 16));
     background-color: var(--primary-300, #f4efe8);
   }
   header {

diff --git a/apps/astro/src/global/global.scss b/apps/astro/src/global/global.scss
@@ -218,9 +218,11 @@ h3,
 }
 
 .sec-wo-margin {
-  margin: 0 calc(var(--page-margin) * -1);
+  margin-left: calc(var(--page-margin) * -1);
+  margin-right: calc(var(--page-margin) * -1);
   @media (min-width: calc(1380rem / 16)) {
-    margin: 0 calc((100vw - calc(1300rem / 16)) / -2);
+    margin-left: calc((100vw - calc(1300rem / 16)) / -2);
+    margin-right: calc((100vw - calc(1300rem / 16)) / -2);
   }
 }