@birdapi/velinstyle 1.2.1 → 1.3.0

package/src/utilities/scroll-animation.css

@@ -19,6 +19,24 @@
     animation-range: entry 0% entry 60%;
   }
 
+  .velin-animate-on-scroll--slide-down {
+    animation: velin-slide-down linear both;
+    animation-timeline: view();
+    animation-range: entry 0% entry 60%;
+  }
+
+  .velin-animate-on-scroll--slide-left {
+    animation: velin-slide-left linear both;
+    animation-timeline: view();
+    animation-range: entry 0% entry 60%;
+  }
+
+  .velin-animate-on-scroll--slide-right {
+    animation: velin-slide-right linear both;
+    animation-timeline: view();
+    animation-range: entry 0% entry 60%;
+  }
+
   .velin-animate-on-scroll--scale {
     animation: velin-scale-in linear both;
     animation-timeline: view();
@@ -59,6 +77,36 @@
     to { opacity: 1; transform: translateY(0); }
   }
 
+  @keyframes velin-slide-up {
+    from { opacity: 0; transform: translateY(2rem); }
+    to { opacity: 1; transform: translateY(0); }
+  }
+
+  @keyframes velin-slide-down {
+    from { opacity: 0; transform: translateY(-2rem); }
+    to { opacity: 1; transform: translateY(0); }
+  }
+
+  @keyframes velin-slide-left {
+    from { opacity: 0; transform: translateX(2rem); }
+    to { opacity: 1; transform: translateX(0); }
+  }
+
+  @keyframes velin-slide-right {
+    from { opacity: 0; transform: translateX(-2rem); }
+    to { opacity: 1; transform: translateX(0); }
+  }
+
+  @keyframes velin-fade-in {
+    from { opacity: 0; }
+    to { opacity: 1; }
+  }
+
+  @keyframes velin-scale-in {
+    from { opacity: 0; transform: scale(0.92); }
+    to { opacity: 1; transform: scale(1); }
+  }
+
   @keyframes velin-scroll-progress-grow {
     from { transform: scaleX(0); }
     to { transform: scaleX(1); }
@@ -88,6 +136,18 @@
       opacity: 0;
       transform: translateY(2rem);
     }
+    .velin-animate-on-scroll--slide-down:not(.velin-in-view) {
+      opacity: 0;
+      transform: translateY(-2rem);
+    }
+    .velin-animate-on-scroll--slide-left:not(.velin-in-view) {
+      opacity: 0;
+      transform: translateX(2rem);
+    }
+    .velin-animate-on-scroll--slide-right:not(.velin-in-view) {
+      opacity: 0;
+      transform: translateX(-2rem);
+    }
     .velin-animate-on-scroll--scale:not(.velin-in-view) {
       opacity: 0;
       transform: scale(0.92);
@@ -95,6 +155,9 @@
     .velin-animate-on-scroll.velin-in-view,
     .velin-animate-on-scroll--fade.velin-in-view,
     .velin-animate-on-scroll--slide-up.velin-in-view,
+    .velin-animate-on-scroll--slide-down.velin-in-view,
+    .velin-animate-on-scroll--slide-left.velin-in-view,
+    .velin-animate-on-scroll--slide-right.velin-in-view,
     .velin-animate-on-scroll--scale.velin-in-view {
       opacity: 1;
       transform: none;
@@ -112,6 +175,9 @@
     .velin-animate-on-scroll,
     .velin-animate-on-scroll--fade,
     .velin-animate-on-scroll--slide-up,
+    .velin-animate-on-scroll--slide-down,
+    .velin-animate-on-scroll--slide-left,
+    .velin-animate-on-scroll--slide-right,
     .velin-animate-on-scroll--scale,
     .velin-parallax,
     .velin-parallax--slow {

package/src/velinstyle.css

@@ -76,6 +76,7 @@
 @import "components/attributes.css";
 @import "components/highlight.css";
 @import "components/calendar-dropzone.css";
+@import "components/empty-auth.css";
 
 /* Utilities */
 @import "utilities/color.css";