@asd20/ui 3.2.549 → 3.2.550

package/package.json

@@ -5,7 +5,7 @@
     "*.scss",
     "*.vue"
   ],
-  "version": "3.2.549",
+  "version": "3.2.550",
   "private": false,
   "license": "MIT",
   "repository": {

package/src/components/organisms/Asd20SchoolHomepageVideoHeader/index.vue

@@ -317,6 +317,17 @@ export default {
 
 $min: 3rem;
 $max: 4rem;
+
+@keyframes slide_left {
+  from {
+    opacity: 0;
+    margin-left: 100px;
+  }
+  to {
+    opacity: 1;
+    margin-left: 0;
+  }
+}
 @media (min-width: 667px) {
   .asd20-school-homepage-video-header {
     &__call-to-action {
@@ -436,6 +447,7 @@ $max: 4rem;
       border-radius: var(--website-shape__radius-m);
       border-left: space(0.5) solid var(--color__accent);
       border-top: space(0.5) solid var(--color__accent);
+      animation: slide_left 1s ease-in-out 0.5s both;
     }
 
     h1 {
@@ -474,7 +486,7 @@ $max: 4rem;
       height: auto;
       margin: 0;
       padding: 0;
-      transform: translate3d(0, calc(-10% * var(--scroll-progress)), 0);
+      transform: translate3d(0, calc(-20% * var(--scroll-progress)), 0);
       border-radius: var(--website-shape__radius-l);
       overflow: hidden;
 

package/src/components/organisms/Asd20VideoHeaderContent/index.vue

@@ -104,6 +104,17 @@ export default {
     }
   }
 }
+@keyframes slide_down {
+  from {
+    opacity: 0;
+    bottom: space(2);
+  }
+  to {
+    opacity: 1;
+    botom: space(-0.74);
+  }
+}
+
 @media (min-width: 667px) {
   .asd20-video-header-content {
     width: 100%;
@@ -170,6 +181,7 @@ export default {
         // );
         border-left: 20px solid var(--website-homepage-header__accent);
         border-bottom: 20px solid var(--website-homepage-header__accent);
+        animation: slide_down 1s ease-in-out 0.5s both;
       }
     }
     &::v-deep .asd20-messaging__button-group {

package/src/components/templates/Asd20DistrictVideoTemplate/index.vue

@@ -226,6 +226,17 @@ export default {
 //   }
 // }
 
+@keyframes slide_left {
+  from {
+    opacity: 0;
+    margin-left: 100px;
+  }
+  to {
+    opacity: 1;
+    margin-left: 0;
+  }
+}
+
 @media (min-width: 667px) {
   .asd20-district-video-template {
     .asd20-video-header-content {
@@ -255,6 +266,11 @@ export default {
     .asd20-video-header-content {
       position: absolute;
       bottom: 20%;
+      transform: translate3d(0, calc(-70% * var(--scroll-progress)), 0);
+      animation: slide_left 1s ease-in-out 0.5s both;
+
+      .lead {
+      }
     }
     .asd20-organization-picker {
       display: inherit !important;