feat: change animated props

Author: ogonkov

src/components/Toaster/ToastList/ToastAnimation.scss

@@ -1,7 +1,9 @@
 @use '../../variables';
+@use './variables' as toastList;
 
 $transition-distance: 10px;
 $animation-duration: 0.6s;
+$animation-diration-alternate: 0.75s;
 
 @mixin hidden-toast-height {
     margin-block-end: 0;
@@ -42,6 +44,11 @@ $animation-duration: 0.6s;
             position: absolute;
         }
 
+        &_enter#{&}_feature_alternate-animation-timing-fn {
+            opacity: 0.5;
+            transform: translateX(calc(100% + #{toastList.$list-inset-end-position * 2}));
+        }
+
         &_enter_active {
             animation: #{variables.$ns}toast-enter-#{$platform}
                 $animation-duration
@@ -54,50 +61,57 @@ $animation-duration: 0.6s;
             }
         }
 
+        // Alternative animation timing function
+        &_enter_active#{&}_feature_alternate-animation-timing-fn {
+            animation: #{variables.$ns}toast-enter-alternate-#{$platform}
+                $animation-diration-alternate
+                linear(
+                    0,
+                    0.002 0.3%,
+                    0.007 0.6%,
+                    0.033 1.3%,
+                    0.073 2%,
+                    0.125 2.7%,
+                    0.254 4.1%,
+                    0.683 8.3%,
+                    0.803 9.7%,
+                    0.897 11%,
+                    0.977 12.4%,
+                    1.036 13.8%,
+                    1.058 14.5%,
+                    1.078 15.3%,
+                    1.091 16%,
+                    1.101 16.8%,
+                    1.106 17.5%,
+                    1.108 18.3%,
+                    1.107 19.2%,
+                    1.103 20.1%,
+                    1.089 21.8%,
+                    1.038 26.5%,
+                    1.014 29.1%,
+                    1.005 30.5%,
+                    0.997 32%,
+                    0.992 33.5%,
+                    0.989 35.1%,
+                    0.989 38.6%,
+                    0.998 47.4%,
+                    1.001 53.2%,
+                    1
+                )
+                forwards;
+
+            @media (prefers-reduced-motion: reduce) {
+                animation-name: #{variables.$ns}toast-enter-reduced-motion;
+            }
+        }
+
         &_exit_active {
             animation: #{variables.$ns}toast-exit-#{$platform} $animation-duration ease-in forwards;
 
             @media (prefers-reduced-motion: reduce) {
                 animation-name: #{variables.$ns}toast-exit-reduced-motion;
             }
         }
-
-        // Alternative animation timing function
-        &_feature_alternate-animation-timing-fn {
-            animation-timing-function: linear(
-                0,
-                0.002 0.3%,
-                0.007 0.6%,
-                0.033 1.3%,
-                0.073 2%,
-                0.125 2.7%,
-                0.254 4.1%,
-                0.683 8.3%,
-                0.803 9.7%,
-                0.897 11%,
-                0.977 12.4%,
-                1.036 13.8%,
-                1.058 14.5%,
-                1.078 15.3%,
-                1.091 16%,
-                1.101 16.8%,
-                1.106 17.5%,
-                1.108 18.3%,
-                1.107 19.2%,
-                1.103 20.1%,
-                1.089 21.8%,
-                1.038 26.5%,
-                1.014 29.1%,
-                1.005 30.5%,
-                0.997 32%,
-                0.992 33.5%,
-                0.989 35.1%,
-                0.989 38.6%,
-                0.998 47.4%,
-                1.001 53.2%,
-                1
-            );
-        }
     }
 
     @keyframes #{variables.$ns}toast-enter-#{$platform} {
@@ -136,6 +150,17 @@ $animation-duration: 0.6s;
         }
     }
 
+    @keyframes #{variables.$ns}toast-enter-alternate-#{$platform} {
+        0% {
+            opacity: 0.5;
+            transform: translateX(calc(100% + #{toastList.$list-inset-end-position * 2}));
+        }
+        100% {
+            opacity: 1;
+            transform: translateX(0);
+        }
+    }
+
     @keyframes #{variables.$ns}toast-enter-reduced-motion {
         0% {
             @include hidden-toast-opacity;