@semcore/animation - npm Package Compare versions

Comparing version 1.8.11 to 1.9.0

CHANGELOG.md

@@ -5,2 +5,10 @@ # Changelog
 
+## [1.9.0] - 2023-02-20
+
+### Added
+
+- Added prop `animationsDisabled` to disable components' animation.
+- Added prop `timingFunction` to control animation easing.
+- Added `<Scale />` and `<Slide />` animation components.
+
 ## [1.8.11] - 2023-02-09
@@ -10,3 +18,3 @@
 
-- Version patch update due to children dependencies update (`@semcore/utils` [3.46.0 ~> 3.46.1]).
+- Version patch update due to children dependencies update (`@semcore/utils` [3.45.0 ~> 3.46.0]).
 
@@ -13,0 +21,0 @@ ## [1.8.8] - 2023-01-11

lib/cjs/Animation.js

@@ -49,15 +49,16 @@ "use strict";
 /*__inner_css_start__*/
-".___SAnimation_1byqm_gg_{animation-fill-mode:both;animation-timing-function:ease-out;animation-duration:var(--durationFinalize_1byqm);animation-delay:var(--delayFinalize_1byqm);animation-name:var(--keyframesFinalize_1byqm)}.___SAnimation_1byqm_gg_.__visible_1byqm_gg_{animation-duration:var(--durationInitialize_1byqm);animation-delay:var(--delayInitialize_1byqm);animation-name:var(--keyframesInitialize_1byqm)}@media (prefers-reduced-motion){.___SAnimation_1byqm_gg_{animation-timing-function:step-end;animation-iteration-count:1}.___SAnimation_1byqm_gg_.__visible_1byqm_gg_{animation-timing-function:step-end;animation-iteration-count:1}}"
+".___SAnimation_1d77j_gg_{animation-fill-mode:both;animation-timing-function:var(--timingFunction_1d77j);animation-duration:var(--durationFinalize_1d77j);animation-delay:var(--delayFinalize_1d77j);animation-name:var(--keyframesFinalize_1d77j)}.___SAnimation_1d77j_gg_.__visible_1d77j_gg_{animation-duration:var(--durationInitialize_1d77j);animation-delay:var(--delayInitialize_1d77j);animation-name:var(--keyframesInitialize_1d77j)}@media (prefers-reduced-motion){.___SAnimation_1d77j_gg_,.___SAnimation_1d77j_gg_.__visible_1d77j_gg_{animation-timing-function:step-end;animation-iteration-count:1}}"
 /*__inner_css_end__*/
-, "1byqm_gg_")
+, "1d77j_gg_")
 /*__reshadow_css_end__*/
 , {
-  "__SAnimation": "___SAnimation_1byqm_gg_",
-  "--durationFinalize": "--durationFinalize_1byqm",
-  "--delayFinalize": "--delayFinalize_1byqm",
-  "--keyframesFinalize": "--keyframesFinalize_1byqm",
-  "_visible": "__visible_1byqm_gg_",
-  "--durationInitialize": "--durationInitialize_1byqm",
-  "--delayInitialize": "--delayInitialize_1byqm",
-  "--keyframesInitialize": "--keyframesInitialize_1byqm"
+  "__SAnimation": "___SAnimation_1d77j_gg_",
+  "--timingFunction": "--timingFunction_1d77j",
+  "--durationFinalize": "--durationFinalize_1d77j",
+  "--delayFinalize": "--delayFinalize_1d77j",
+  "--keyframesFinalize": "--keyframesFinalize_1d77j",
+  "_visible": "__visible_1d77j_gg_",
+  "--durationInitialize": "--durationInitialize_1d77j",
+  "--delayInitialize": "--delayInitialize_1d77j",
+  "--keyframesInitialize": "--keyframesInitialize_1d77j"
 });
@@ -110,5 +111,7 @@
           keyframes = _this$asProps.keyframes,
-          initialAnimation = _this$asProps.initialAnimation;
-      var duration = propToArray(this.asProps.duration);
-      var delay = propToArray(this.asProps.delay);
+          initialAnimation = _this$asProps.initialAnimation,
+          timingFunction = _this$asProps.timingFunction,
+          animationsDisabled = _this$asProps.animationsDisabled;
+      var duration = animationsDisabled ? [0, 0] : propToArray(this.asProps.duration);
+      var delay = animationsDisabled ? [0, 0] : propToArray(this.asProps.delay);
       var _this$state = this.state,
@@ -124,2 +127,3 @@ render = _this$state.render,
         "delayFinalize": "".concat(delay[1], "ms"),
+        "timingFunction": timingFunction,
         "keyframesInitialize": wasInvisible || initialAnimation ? keyframes[0] : undefined,
@@ -154,3 +158,5 @@ "keyframesFinalize": keyframes[1]
   keyframes: [],
-  initialAnimation: false
+  initialAnimation: false,
+  timingFunction: 'ease-out',
+  animationsDisabled: false
 });
@@ -157,0 +163,0 @@

lib/cjs/Collapse.js

@@ -18,6 +18,6 @@ "use strict";
 
+var _core = require("@semcore/core");
+
 var _react = _interopRequireWildcard(require("react"));
 
-var _core = require("@semcore/core");
-
 var _Animation = _interopRequireDefault(require("./Animation"));
@@ -35,2 +35,3 @@
 
+/*__reshadow-styles__:"./style/keyframes.shadow.css"*/
 var style = (
@@ -40,10 +41,34 @@ /*__reshadow_css_start__*/
 /*__inner_css_start__*/
-"@keyframes enter_vntdf{0%{overflow:hidden;height:0}to{height:var(--height_vntdf)}}@keyframes exit_vntdf{0%{height:var(--height_vntdf)}to{height:0}}"
+"@keyframes collapse-enter_16ydq{0%{overflow:hidden;height:0}to{height:var(--height_16ydq)}}@keyframes collapse-exit_16ydq{0%{height:var(--height_16ydq)}to{height:0}}@keyframes fade-in-out-enter_16ydq{0%{opacity:0}to{opacity:1}}@keyframes fade-in-out-exit_16ydq{0%{opacity:1}to{opacity:0}}@keyframes opacity-in_16ydq{0%{opacity:0}to{opacity:1}}@keyframes opacity-out_16ydq{0%{opacity:1}to{opacity:0}}@keyframes scale-left-in_16ydq{0%{opacity:0;transform:translateX(20px) scaleX(.9)}to{opacity:1;transform:translateX(0) scaleX(1)}}@keyframes scale-right-in_16ydq{0%{opacity:0;transform:translateX(-20px) scaleX(.9)}to{opacity:1;transform:translateX(0) scaleX(1)}}@keyframes scale-top-in_16ydq{0%{opacity:0;transform:translateY(20px) scaleY(.9)}to{opacity:1;transform:translateY(0) scaleY(1)}}@keyframes scale-bottom-in_16ydq{0%{opacity:0;transform:translateY(-20px) scaleY(.9)}to{opacity:1;transform:translateY(0) scaleY(1)}}@keyframes scale-left-out_16ydq{to{opacity:0;transform:translateX(20px) scaleX(.9)}0%{opacity:1;transform:translateX(0) scaleX(1)}}@keyframes scale-right-out_16ydq{to{opacity:0;transform:translateX(-20px) scaleX(.9)}0%{opacity:1;transform:translateX(0) scaleX(1)}}@keyframes scale-top-out_16ydq{to{opacity:0;transform:translateY(20px) scaleY(.9)}0%{opacity:1;transform:translateY(0) scaleY(1)}}@keyframes scale-bottom-out_16ydq{to{opacity:0;transform:translateY(-20px) scaleY(.9)}0%{opacity:1;transform:translateY(0) scaleY(1)}}@keyframes slide-top-in_16ydq{0%{opacity:0;transform:translateY(-100px)}to{opacity:1;transform:translateY(0)}}@keyframes slide-top-out_16ydq{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-100px)}}@keyframes slide-bottom-in_16ydq{0%{opacity:0;transform:translateY(100px)}to{opacity:1;transform:translateY(0)}}@keyframes slide-bottom-out_16ydq{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(100px)}}@keyframes slide-left-in_16ydq{0%{opacity:0;transform:translateX(-100px)}to{opacity:1;transform:translateX(0)}}@keyframes slide-left-out_16ydq{0%{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(-100px)}}@keyframes slide-right-in_16ydq{0%{opacity:0;transform:translateX(100px)}to{opacity:1;transform:translateX(0)}}@keyframes slide-right-out_16ydq{0%{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(100px)}}@keyframes transform-enter_16ydq{0%{transform:var(--transformStart_16ydq)}to{transform:var(--transformEnd_16ydq)}}@keyframes transform-exit_16ydq{0%{transform:var(--transformEnd_16ydq)}to{transform:var(--transformStart_16ydq)}}"
 /*__inner_css_end__*/
-, "vntdf_gg_")
+, "16ydq_gg_")
 /*__reshadow_css_end__*/
 , {
-  "@enter": "enter_vntdf",
-  "--height": "--height_vntdf",
-  "@exit": "exit_vntdf"
+  "@collapse-enter": "collapse-enter_16ydq",
+  "--height": "--height_16ydq",
+  "@collapse-exit": "collapse-exit_16ydq",
+  "@fade-in-out-enter": "fade-in-out-enter_16ydq",
+  "@fade-in-out-exit": "fade-in-out-exit_16ydq",
+  "@opacity-in": "opacity-in_16ydq",
+  "@opacity-out": "opacity-out_16ydq",
+  "@scale-left-in": "scale-left-in_16ydq",
+  "@scale-right-in": "scale-right-in_16ydq",
+  "@scale-top-in": "scale-top-in_16ydq",
+  "@scale-bottom-in": "scale-bottom-in_16ydq",
+  "@scale-left-out": "scale-left-out_16ydq",
+  "@scale-right-out": "scale-right-out_16ydq",
+  "@scale-top-out": "scale-top-out_16ydq",
+  "@scale-bottom-out": "scale-bottom-out_16ydq",
+  "@slide-top-in": "slide-top-in_16ydq",
+  "@slide-top-out": "slide-top-out_16ydq",
+  "@slide-bottom-in": "slide-bottom-in_16ydq",
+  "@slide-bottom-out": "slide-bottom-out_16ydq",
+  "@slide-left-in": "slide-left-in_16ydq",
+  "@slide-left-out": "slide-left-out_16ydq",
+  "@slide-right-in": "slide-right-in_16ydq",
+  "@slide-right-out": "slide-right-out_16ydq",
+  "@transform-enter": "transform-enter_16ydq",
+  "--transformStart": "--transformStart_16ydq",
+  "--transformEnd": "--transformEnd_16ydq",
+  "@transform-exit": "transform-exit_16ydq"
 });
@@ -100,3 +125,3 @@
     "height": height,
-    "keyframes": [style['@enter'], style['@exit']]
+    "keyframes": [style['@collapse-enter'], style['@collapse-exit']]
   })));
@@ -103,0 +128,0 @@ }

lib/cjs/FadeInOut.js

@@ -12,6 +12,6 @@ "use strict";
 
+var _core = require("@semcore/core");
+
 var _react = _interopRequireDefault(require("react"));
 
-var _core = require("@semcore/core");
-
 var _Animation = _interopRequireDefault(require("./Animation"));
@@ -23,2 +23,3 @@
 
+/*__reshadow-styles__:"./style/keyframes.shadow.css"*/
 var style = (
@@ -28,9 +29,34 @@ /*__reshadow_css_start__*/
 /*__inner_css_start__*/
-"@keyframes enter_9039p{0%{opacity:0}to{opacity:1}}@keyframes exit_9039p{0%{opacity:1}to{opacity:0}}"
+"@keyframes collapse-enter_16ydq{0%{overflow:hidden;height:0}to{height:var(--height_16ydq)}}@keyframes collapse-exit_16ydq{0%{height:var(--height_16ydq)}to{height:0}}@keyframes fade-in-out-enter_16ydq{0%{opacity:0}to{opacity:1}}@keyframes fade-in-out-exit_16ydq{0%{opacity:1}to{opacity:0}}@keyframes opacity-in_16ydq{0%{opacity:0}to{opacity:1}}@keyframes opacity-out_16ydq{0%{opacity:1}to{opacity:0}}@keyframes scale-left-in_16ydq{0%{opacity:0;transform:translateX(20px) scaleX(.9)}to{opacity:1;transform:translateX(0) scaleX(1)}}@keyframes scale-right-in_16ydq{0%{opacity:0;transform:translateX(-20px) scaleX(.9)}to{opacity:1;transform:translateX(0) scaleX(1)}}@keyframes scale-top-in_16ydq{0%{opacity:0;transform:translateY(20px) scaleY(.9)}to{opacity:1;transform:translateY(0) scaleY(1)}}@keyframes scale-bottom-in_16ydq{0%{opacity:0;transform:translateY(-20px) scaleY(.9)}to{opacity:1;transform:translateY(0) scaleY(1)}}@keyframes scale-left-out_16ydq{to{opacity:0;transform:translateX(20px) scaleX(.9)}0%{opacity:1;transform:translateX(0) scaleX(1)}}@keyframes scale-right-out_16ydq{to{opacity:0;transform:translateX(-20px) scaleX(.9)}0%{opacity:1;transform:translateX(0) scaleX(1)}}@keyframes scale-top-out_16ydq{to{opacity:0;transform:translateY(20px) scaleY(.9)}0%{opacity:1;transform:translateY(0) scaleY(1)}}@keyframes scale-bottom-out_16ydq{to{opacity:0;transform:translateY(-20px) scaleY(.9)}0%{opacity:1;transform:translateY(0) scaleY(1)}}@keyframes slide-top-in_16ydq{0%{opacity:0;transform:translateY(-100px)}to{opacity:1;transform:translateY(0)}}@keyframes slide-top-out_16ydq{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-100px)}}@keyframes slide-bottom-in_16ydq{0%{opacity:0;transform:translateY(100px)}to{opacity:1;transform:translateY(0)}}@keyframes slide-bottom-out_16ydq{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(100px)}}@keyframes slide-left-in_16ydq{0%{opacity:0;transform:translateX(-100px)}to{opacity:1;transform:translateX(0)}}@keyframes slide-left-out_16ydq{0%{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(-100px)}}@keyframes slide-right-in_16ydq{0%{opacity:0;transform:translateX(100px)}to{opacity:1;transform:translateX(0)}}@keyframes slide-right-out_16ydq{0%{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(100px)}}@keyframes transform-enter_16ydq{0%{transform:var(--transformStart_16ydq)}to{transform:var(--transformEnd_16ydq)}}@keyframes transform-exit_16ydq{0%{transform:var(--transformEnd_16ydq)}to{transform:var(--transformStart_16ydq)}}"
 /*__inner_css_end__*/
-, "9039p_gg_")
+, "16ydq_gg_")
 /*__reshadow_css_end__*/
 , {
-  "@enter": "enter_9039p",
-  "@exit": "exit_9039p"
+  "@collapse-enter": "collapse-enter_16ydq",
+  "--height": "--height_16ydq",
+  "@collapse-exit": "collapse-exit_16ydq",
+  "@fade-in-out-enter": "fade-in-out-enter_16ydq",
+  "@fade-in-out-exit": "fade-in-out-exit_16ydq",
+  "@opacity-in": "opacity-in_16ydq",
+  "@opacity-out": "opacity-out_16ydq",
+  "@scale-left-in": "scale-left-in_16ydq",
+  "@scale-right-in": "scale-right-in_16ydq",
+  "@scale-top-in": "scale-top-in_16ydq",
+  "@scale-bottom-in": "scale-bottom-in_16ydq",
+  "@scale-left-out": "scale-left-out_16ydq",
+  "@scale-right-out": "scale-right-out_16ydq",
+  "@scale-top-out": "scale-top-out_16ydq",
+  "@scale-bottom-out": "scale-bottom-out_16ydq",
+  "@slide-top-in": "slide-top-in_16ydq",
+  "@slide-top-out": "slide-top-out_16ydq",
+  "@slide-bottom-in": "slide-bottom-in_16ydq",
+  "@slide-bottom-out": "slide-bottom-out_16ydq",
+  "@slide-left-in": "slide-left-in_16ydq",
+  "@slide-left-out": "slide-left-out_16ydq",
+  "@slide-right-in": "slide-right-in_16ydq",
+  "@slide-right-out": "slide-right-out_16ydq",
+  "@transform-enter": "transform-enter_16ydq",
+  "--transformStart": "--transformStart_16ydq",
+  "--transformEnd": "--transformEnd_16ydq",
+  "@transform-exit": "transform-exit_16ydq"
 });
@@ -44,3 +70,3 @@
   }, props), {}, {
-    "keyframes": [style['@enter'], style['@exit']]
+    "keyframes": [style['@fade-in-out-enter'], style['@fade-in-out-exit']]
   })));
@@ -47,0 +73,0 @@ }

lib/cjs/index.js

@@ -26,2 +26,14 @@ "use strict";
 });
+Object.defineProperty(exports, "Scale", {
+  enumerable: true,
+  get: function get() {
+    return _Scale["default"];
+  }
+});
+Object.defineProperty(exports, "Slide", {
+  enumerable: true,
+  get: function get() {
+    return _Slide["default"];
+  }
+});
 Object.defineProperty(exports, "Transform", {
@@ -41,2 +53,6 @@ enumerable: true,
 var _Collapse = _interopRequireDefault(require("./Collapse"));
+
+var _Scale = _interopRequireDefault(require("./Scale"));
+
+var _Slide = _interopRequireDefault(require("./Slide"));
 //# sourceMappingURL=index.js.map

lib/cjs/Transform.js

@@ -14,6 +14,6 @@ "use strict";
 
+var _core = require("@semcore/core");
+
 var _react = _interopRequireDefault(require("react"));
 
-var _core = require("@semcore/core");
-
 var _Animation = _interopRequireDefault(require("./Animation"));
@@ -27,2 +27,3 @@
 
+/*__reshadow-styles__:"./style/keyframes.shadow.css"*/
 var style = (
@@ -32,11 +33,34 @@ /*__reshadow_css_start__*/
 /*__inner_css_start__*/
-"@keyframes enter_1dvqe{0%{transform:var(--transformStart_1dvqe)}to{transform:var(--transformEnd_1dvqe)}}@keyframes exit_1dvqe{0%{transform:var(--transformEnd_1dvqe)}to{transform:var(--transformStart_1dvqe)}}"
+"@keyframes collapse-enter_16ydq{0%{overflow:hidden;height:0}to{height:var(--height_16ydq)}}@keyframes collapse-exit_16ydq{0%{height:var(--height_16ydq)}to{height:0}}@keyframes fade-in-out-enter_16ydq{0%{opacity:0}to{opacity:1}}@keyframes fade-in-out-exit_16ydq{0%{opacity:1}to{opacity:0}}@keyframes opacity-in_16ydq{0%{opacity:0}to{opacity:1}}@keyframes opacity-out_16ydq{0%{opacity:1}to{opacity:0}}@keyframes scale-left-in_16ydq{0%{opacity:0;transform:translateX(20px) scaleX(.9)}to{opacity:1;transform:translateX(0) scaleX(1)}}@keyframes scale-right-in_16ydq{0%{opacity:0;transform:translateX(-20px) scaleX(.9)}to{opacity:1;transform:translateX(0) scaleX(1)}}@keyframes scale-top-in_16ydq{0%{opacity:0;transform:translateY(20px) scaleY(.9)}to{opacity:1;transform:translateY(0) scaleY(1)}}@keyframes scale-bottom-in_16ydq{0%{opacity:0;transform:translateY(-20px) scaleY(.9)}to{opacity:1;transform:translateY(0) scaleY(1)}}@keyframes scale-left-out_16ydq{to{opacity:0;transform:translateX(20px) scaleX(.9)}0%{opacity:1;transform:translateX(0) scaleX(1)}}@keyframes scale-right-out_16ydq{to{opacity:0;transform:translateX(-20px) scaleX(.9)}0%{opacity:1;transform:translateX(0) scaleX(1)}}@keyframes scale-top-out_16ydq{to{opacity:0;transform:translateY(20px) scaleY(.9)}0%{opacity:1;transform:translateY(0) scaleY(1)}}@keyframes scale-bottom-out_16ydq{to{opacity:0;transform:translateY(-20px) scaleY(.9)}0%{opacity:1;transform:translateY(0) scaleY(1)}}@keyframes slide-top-in_16ydq{0%{opacity:0;transform:translateY(-100px)}to{opacity:1;transform:translateY(0)}}@keyframes slide-top-out_16ydq{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-100px)}}@keyframes slide-bottom-in_16ydq{0%{opacity:0;transform:translateY(100px)}to{opacity:1;transform:translateY(0)}}@keyframes slide-bottom-out_16ydq{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(100px)}}@keyframes slide-left-in_16ydq{0%{opacity:0;transform:translateX(-100px)}to{opacity:1;transform:translateX(0)}}@keyframes slide-left-out_16ydq{0%{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(-100px)}}@keyframes slide-right-in_16ydq{0%{opacity:0;transform:translateX(100px)}to{opacity:1;transform:translateX(0)}}@keyframes slide-right-out_16ydq{0%{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(100px)}}@keyframes transform-enter_16ydq{0%{transform:var(--transformStart_16ydq)}to{transform:var(--transformEnd_16ydq)}}@keyframes transform-exit_16ydq{0%{transform:var(--transformEnd_16ydq)}to{transform:var(--transformStart_16ydq)}}"
 /*__inner_css_end__*/
-, "1dvqe_gg_")
+, "16ydq_gg_")
 /*__reshadow_css_end__*/
 , {
-  "@enter": "enter_1dvqe",
-  "--transformStart": "--transformStart_1dvqe",
-  "--transformEnd": "--transformEnd_1dvqe",
-  "@exit": "exit_1dvqe"
+  "@collapse-enter": "collapse-enter_16ydq",
+  "--height": "--height_16ydq",
+  "@collapse-exit": "collapse-exit_16ydq",
+  "@fade-in-out-enter": "fade-in-out-enter_16ydq",
+  "@fade-in-out-exit": "fade-in-out-exit_16ydq",
+  "@opacity-in": "opacity-in_16ydq",
+  "@opacity-out": "opacity-out_16ydq",
+  "@scale-left-in": "scale-left-in_16ydq",
+  "@scale-right-in": "scale-right-in_16ydq",
+  "@scale-top-in": "scale-top-in_16ydq",
+  "@scale-bottom-in": "scale-bottom-in_16ydq",
+  "@scale-left-out": "scale-left-out_16ydq",
+  "@scale-right-out": "scale-right-out_16ydq",
+  "@scale-top-out": "scale-top-out_16ydq",
+  "@scale-bottom-out": "scale-bottom-out_16ydq",
+  "@slide-top-in": "slide-top-in_16ydq",
+  "@slide-top-out": "slide-top-out_16ydq",
+  "@slide-bottom-in": "slide-bottom-in_16ydq",
+  "@slide-bottom-out": "slide-bottom-out_16ydq",
+  "@slide-left-in": "slide-left-in_16ydq",
+  "@slide-left-out": "slide-left-out_16ydq",
+  "@slide-right-in": "slide-right-in_16ydq",
+  "@slide-right-out": "slide-right-out_16ydq",
+  "@transform-enter": "transform-enter_16ydq",
+  "--transformStart": "--transformStart_16ydq",
+  "--transformEnd": "--transformEnd_16ydq",
+  "@transform-exit": "transform-exit_16ydq"
 });
@@ -55,3 +79,3 @@
     "transformEnd": transform[1],
-    "keyframes": [style['@enter'], style['@exit']]
+    "keyframes": [style['@transform-enter'], style['@transform-exit']]
   })));
@@ -58,0 +82,0 @@ }

lib/es6/Animation.js

@@ -28,15 +28,16 @@ import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 /*__inner_css_start__*/
-".___SAnimation_1byqm_gg_{animation-fill-mode:both;animation-timing-function:ease-out;animation-duration:var(--durationFinalize_1byqm);animation-delay:var(--delayFinalize_1byqm);animation-name:var(--keyframesFinalize_1byqm)}.___SAnimation_1byqm_gg_.__visible_1byqm_gg_{animation-duration:var(--durationInitialize_1byqm);animation-delay:var(--delayInitialize_1byqm);animation-name:var(--keyframesInitialize_1byqm)}@media (prefers-reduced-motion){.___SAnimation_1byqm_gg_{animation-timing-function:step-end;animation-iteration-count:1}.___SAnimation_1byqm_gg_.__visible_1byqm_gg_{animation-timing-function:step-end;animation-iteration-count:1}}"
+".___SAnimation_1d77j_gg_{animation-fill-mode:both;animation-timing-function:var(--timingFunction_1d77j);animation-duration:var(--durationFinalize_1d77j);animation-delay:var(--delayFinalize_1d77j);animation-name:var(--keyframesFinalize_1d77j)}.___SAnimation_1d77j_gg_.__visible_1d77j_gg_{animation-duration:var(--durationInitialize_1d77j);animation-delay:var(--delayInitialize_1d77j);animation-name:var(--keyframesInitialize_1d77j)}@media (prefers-reduced-motion){.___SAnimation_1d77j_gg_,.___SAnimation_1d77j_gg_.__visible_1d77j_gg_{animation-timing-function:step-end;animation-iteration-count:1}}"
 /*__inner_css_end__*/
-, "1byqm_gg_")
+, "1d77j_gg_")
 /*__reshadow_css_end__*/
 , {
-  "__SAnimation": "___SAnimation_1byqm_gg_",
-  "--durationFinalize": "--durationFinalize_1byqm",
-  "--delayFinalize": "--delayFinalize_1byqm",
-  "--keyframesFinalize": "--keyframesFinalize_1byqm",
-  "_visible": "__visible_1byqm_gg_",
-  "--durationInitialize": "--durationInitialize_1byqm",
-  "--delayInitialize": "--delayInitialize_1byqm",
-  "--keyframesInitialize": "--keyframesInitialize_1byqm"
+  "__SAnimation": "___SAnimation_1d77j_gg_",
+  "--timingFunction": "--timingFunction_1d77j",
+  "--durationFinalize": "--durationFinalize_1d77j",
+  "--delayFinalize": "--delayFinalize_1d77j",
+  "--keyframesFinalize": "--keyframesFinalize_1d77j",
+  "_visible": "__visible_1d77j_gg_",
+  "--durationInitialize": "--durationInitialize_1d77j",
+  "--delayInitialize": "--delayInitialize_1d77j",
+  "--keyframesInitialize": "--keyframesInitialize_1d77j"
 });
@@ -92,5 +93,7 @@
           keyframes = _this$asProps.keyframes,
-          initialAnimation = _this$asProps.initialAnimation;
-      var duration = propToArray(this.asProps.duration);
-      var delay = propToArray(this.asProps.delay);
+          initialAnimation = _this$asProps.initialAnimation,
+          timingFunction = _this$asProps.timingFunction,
+          animationsDisabled = _this$asProps.animationsDisabled;
+      var duration = animationsDisabled ? [0, 0] : propToArray(this.asProps.duration);
+      var delay = animationsDisabled ? [0, 0] : propToArray(this.asProps.delay);
       var _this$state = this.state,
@@ -106,2 +109,3 @@ render = _this$state.render,
         "delayFinalize": "".concat(delay[1], "ms"),
+        "timingFunction": timingFunction,
         "keyframesInitialize": wasInvisible || initialAnimation ? keyframes[0] : undefined,
@@ -139,3 +143,5 @@ "keyframesFinalize": keyframes[1]
   keyframes: [],
-  initialAnimation: false
+  initialAnimation: false,
+  timingFunction: 'ease-out',
+  animationsDisabled: false
 });
@@ -142,0 +148,0 @@

lib/es6/Collapse.js

 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import { sstyled as _sstyled } from "@semcore/core";
 var _excluded = ["onAnimationStart", "onAnimationEnd", "overflowHidden"];
@@ -13,14 +14,40 @@
 import Animation from './Animation';
+
+/*__reshadow-styles__:"./style/keyframes.shadow.css"*/
 var style = (
 /*__reshadow_css_start__*/
-sstyled.insert(
+_sstyled.insert(
 /*__inner_css_start__*/
-"@keyframes enter_vntdf{0%{overflow:hidden;height:0}to{height:var(--height_vntdf)}}@keyframes exit_vntdf{0%{height:var(--height_vntdf)}to{height:0}}"
+"@keyframes collapse-enter_16ydq{0%{overflow:hidden;height:0}to{height:var(--height_16ydq)}}@keyframes collapse-exit_16ydq{0%{height:var(--height_16ydq)}to{height:0}}@keyframes fade-in-out-enter_16ydq{0%{opacity:0}to{opacity:1}}@keyframes fade-in-out-exit_16ydq{0%{opacity:1}to{opacity:0}}@keyframes opacity-in_16ydq{0%{opacity:0}to{opacity:1}}@keyframes opacity-out_16ydq{0%{opacity:1}to{opacity:0}}@keyframes scale-left-in_16ydq{0%{opacity:0;transform:translateX(20px) scaleX(.9)}to{opacity:1;transform:translateX(0) scaleX(1)}}@keyframes scale-right-in_16ydq{0%{opacity:0;transform:translateX(-20px) scaleX(.9)}to{opacity:1;transform:translateX(0) scaleX(1)}}@keyframes scale-top-in_16ydq{0%{opacity:0;transform:translateY(20px) scaleY(.9)}to{opacity:1;transform:translateY(0) scaleY(1)}}@keyframes scale-bottom-in_16ydq{0%{opacity:0;transform:translateY(-20px) scaleY(.9)}to{opacity:1;transform:translateY(0) scaleY(1)}}@keyframes scale-left-out_16ydq{to{opacity:0;transform:translateX(20px) scaleX(.9)}0%{opacity:1;transform:translateX(0) scaleX(1)}}@keyframes scale-right-out_16ydq{to{opacity:0;transform:translateX(-20px) scaleX(.9)}0%{opacity:1;transform:translateX(0) scaleX(1)}}@keyframes scale-top-out_16ydq{to{opacity:0;transform:translateY(20px) scaleY(.9)}0%{opacity:1;transform:translateY(0) scaleY(1)}}@keyframes scale-bottom-out_16ydq{to{opacity:0;transform:translateY(-20px) scaleY(.9)}0%{opacity:1;transform:translateY(0) scaleY(1)}}@keyframes slide-top-in_16ydq{0%{opacity:0;transform:translateY(-100px)}to{opacity:1;transform:translateY(0)}}@keyframes slide-top-out_16ydq{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-100px)}}@keyframes slide-bottom-in_16ydq{0%{opacity:0;transform:translateY(100px)}to{opacity:1;transform:translateY(0)}}@keyframes slide-bottom-out_16ydq{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(100px)}}@keyframes slide-left-in_16ydq{0%{opacity:0;transform:translateX(-100px)}to{opacity:1;transform:translateX(0)}}@keyframes slide-left-out_16ydq{0%{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(-100px)}}@keyframes slide-right-in_16ydq{0%{opacity:0;transform:translateX(100px)}to{opacity:1;transform:translateX(0)}}@keyframes slide-right-out_16ydq{0%{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(100px)}}@keyframes transform-enter_16ydq{0%{transform:var(--transformStart_16ydq)}to{transform:var(--transformEnd_16ydq)}}@keyframes transform-exit_16ydq{0%{transform:var(--transformEnd_16ydq)}to{transform:var(--transformStart_16ydq)}}"
 /*__inner_css_end__*/
-, "vntdf_gg_")
+, "16ydq_gg_")
 /*__reshadow_css_end__*/
 , {
-  "@enter": "enter_vntdf",
-  "--height": "--height_vntdf",
-  "@exit": "exit_vntdf"
+  "@collapse-enter": "collapse-enter_16ydq",
+  "--height": "--height_16ydq",
+  "@collapse-exit": "collapse-exit_16ydq",
+  "@fade-in-out-enter": "fade-in-out-enter_16ydq",
+  "@fade-in-out-exit": "fade-in-out-exit_16ydq",
+  "@opacity-in": "opacity-in_16ydq",
+  "@opacity-out": "opacity-out_16ydq",
+  "@scale-left-in": "scale-left-in_16ydq",
+  "@scale-right-in": "scale-right-in_16ydq",
+  "@scale-top-in": "scale-top-in_16ydq",
+  "@scale-bottom-in": "scale-bottom-in_16ydq",
+  "@scale-left-out": "scale-left-out_16ydq",
+  "@scale-right-out": "scale-right-out_16ydq",
+  "@scale-top-out": "scale-top-out_16ydq",
+  "@scale-bottom-out": "scale-bottom-out_16ydq",
+  "@slide-top-in": "slide-top-in_16ydq",
+  "@slide-top-out": "slide-top-out_16ydq",
+  "@slide-bottom-in": "slide-bottom-in_16ydq",
+  "@slide-bottom-out": "slide-bottom-out_16ydq",
+  "@slide-left-in": "slide-left-in_16ydq",
+  "@slide-left-out": "slide-left-out_16ydq",
+  "@slide-right-in": "slide-right-in_16ydq",
+  "@slide-right-out": "slide-right-out_16ydq",
+  "@transform-enter": "transform-enter_16ydq",
+  "--transformStart": "--transformStart_16ydq",
+  "--transformEnd": "--transformEnd_16ydq",
+  "@transform-exit": "transform-exit_16ydq"
 });
@@ -78,3 +105,3 @@
     "height": height,
-    "keyframes": [style['@enter'], style['@exit']]
+    "keyframes": [style['@collapse-enter'], style['@collapse-exit']]
   })));
@@ -81,0 +108,0 @@ }

lib/es6/FadeInOut.js

 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import { sstyled as _sstyled } from "@semcore/core";
 
@@ -10,13 +11,40 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 import Animation from './Animation';
+
+/*__reshadow-styles__:"./style/keyframes.shadow.css"*/
 var style = (
 /*__reshadow_css_start__*/
-sstyled.insert(
+_sstyled.insert(
 /*__inner_css_start__*/
-"@keyframes enter_9039p{0%{opacity:0}to{opacity:1}}@keyframes exit_9039p{0%{opacity:1}to{opacity:0}}"
+"@keyframes collapse-enter_16ydq{0%{overflow:hidden;height:0}to{height:var(--height_16ydq)}}@keyframes collapse-exit_16ydq{0%{height:var(--height_16ydq)}to{height:0}}@keyframes fade-in-out-enter_16ydq{0%{opacity:0}to{opacity:1}}@keyframes fade-in-out-exit_16ydq{0%{opacity:1}to{opacity:0}}@keyframes opacity-in_16ydq{0%{opacity:0}to{opacity:1}}@keyframes opacity-out_16ydq{0%{opacity:1}to{opacity:0}}@keyframes scale-left-in_16ydq{0%{opacity:0;transform:translateX(20px) scaleX(.9)}to{opacity:1;transform:translateX(0) scaleX(1)}}@keyframes scale-right-in_16ydq{0%{opacity:0;transform:translateX(-20px) scaleX(.9)}to{opacity:1;transform:translateX(0) scaleX(1)}}@keyframes scale-top-in_16ydq{0%{opacity:0;transform:translateY(20px) scaleY(.9)}to{opacity:1;transform:translateY(0) scaleY(1)}}@keyframes scale-bottom-in_16ydq{0%{opacity:0;transform:translateY(-20px) scaleY(.9)}to{opacity:1;transform:translateY(0) scaleY(1)}}@keyframes scale-left-out_16ydq{to{opacity:0;transform:translateX(20px) scaleX(.9)}0%{opacity:1;transform:translateX(0) scaleX(1)}}@keyframes scale-right-out_16ydq{to{opacity:0;transform:translateX(-20px) scaleX(.9)}0%{opacity:1;transform:translateX(0) scaleX(1)}}@keyframes scale-top-out_16ydq{to{opacity:0;transform:translateY(20px) scaleY(.9)}0%{opacity:1;transform:translateY(0) scaleY(1)}}@keyframes scale-bottom-out_16ydq{to{opacity:0;transform:translateY(-20px) scaleY(.9)}0%{opacity:1;transform:translateY(0) scaleY(1)}}@keyframes slide-top-in_16ydq{0%{opacity:0;transform:translateY(-100px)}to{opacity:1;transform:translateY(0)}}@keyframes slide-top-out_16ydq{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-100px)}}@keyframes slide-bottom-in_16ydq{0%{opacity:0;transform:translateY(100px)}to{opacity:1;transform:translateY(0)}}@keyframes slide-bottom-out_16ydq{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(100px)}}@keyframes slide-left-in_16ydq{0%{opacity:0;transform:translateX(-100px)}to{opacity:1;transform:translateX(0)}}@keyframes slide-left-out_16ydq{0%{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(-100px)}}@keyframes slide-right-in_16ydq{0%{opacity:0;transform:translateX(100px)}to{opacity:1;transform:translateX(0)}}@keyframes slide-right-out_16ydq{0%{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(100px)}}@keyframes transform-enter_16ydq{0%{transform:var(--transformStart_16ydq)}to{transform:var(--transformEnd_16ydq)}}@keyframes transform-exit_16ydq{0%{transform:var(--transformEnd_16ydq)}to{transform:var(--transformStart_16ydq)}}"
 /*__inner_css_end__*/
-, "9039p_gg_")
+, "16ydq_gg_")
 /*__reshadow_css_end__*/
 , {
-  "@enter": "enter_9039p",
-  "@exit": "exit_9039p"
+  "@collapse-enter": "collapse-enter_16ydq",
+  "--height": "--height_16ydq",
+  "@collapse-exit": "collapse-exit_16ydq",
+  "@fade-in-out-enter": "fade-in-out-enter_16ydq",
+  "@fade-in-out-exit": "fade-in-out-exit_16ydq",
+  "@opacity-in": "opacity-in_16ydq",
+  "@opacity-out": "opacity-out_16ydq",
+  "@scale-left-in": "scale-left-in_16ydq",
+  "@scale-right-in": "scale-right-in_16ydq",
+  "@scale-top-in": "scale-top-in_16ydq",
+  "@scale-bottom-in": "scale-bottom-in_16ydq",
+  "@scale-left-out": "scale-left-out_16ydq",
+  "@scale-right-out": "scale-right-out_16ydq",
+  "@scale-top-out": "scale-top-out_16ydq",
+  "@scale-bottom-out": "scale-bottom-out_16ydq",
+  "@slide-top-in": "slide-top-in_16ydq",
+  "@slide-top-out": "slide-top-out_16ydq",
+  "@slide-bottom-in": "slide-bottom-in_16ydq",
+  "@slide-bottom-out": "slide-bottom-out_16ydq",
+  "@slide-left-in": "slide-left-in_16ydq",
+  "@slide-left-out": "slide-left-out_16ydq",
+  "@slide-right-in": "slide-right-in_16ydq",
+  "@slide-right-out": "slide-right-out_16ydq",
+  "@transform-enter": "transform-enter_16ydq",
+  "--transformStart": "--transformStart_16ydq",
+  "--transformEnd": "--transformEnd_16ydq",
+  "@transform-exit": "transform-exit_16ydq"
 });
@@ -30,3 +58,3 @@
   }, props), {}, {
-    "keyframes": [style['@enter'], style['@exit']]
+    "keyframes": [style['@fade-in-out-enter'], style['@fade-in-out-exit']]
   })));
@@ -33,0 +61,0 @@ }

lib/es6/index.js

@@ -5,2 +5,4 @@ export { default as Animation } from './Animation';
 export { default as Collapse } from './Collapse';
+export { default as Scale } from './Scale';
+export { default as Slide } from './Slide';
 //# sourceMappingURL=index.js.map

lib/es6/Transform.js

 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import { sstyled as _sstyled } from "@semcore/core";
 var _excluded = ["transform"];
@@ -12,15 +13,40 @@
 import Animation from './Animation';
+
+/*__reshadow-styles__:"./style/keyframes.shadow.css"*/
 var style = (
 /*__reshadow_css_start__*/
-sstyled.insert(
+_sstyled.insert(
 /*__inner_css_start__*/
-"@keyframes enter_1dvqe{0%{transform:var(--transformStart_1dvqe)}to{transform:var(--transformEnd_1dvqe)}}@keyframes exit_1dvqe{0%{transform:var(--transformEnd_1dvqe)}to{transform:var(--transformStart_1dvqe)}}"
+"@keyframes collapse-enter_16ydq{0%{overflow:hidden;height:0}to{height:var(--height_16ydq)}}@keyframes collapse-exit_16ydq{0%{height:var(--height_16ydq)}to{height:0}}@keyframes fade-in-out-enter_16ydq{0%{opacity:0}to{opacity:1}}@keyframes fade-in-out-exit_16ydq{0%{opacity:1}to{opacity:0}}@keyframes opacity-in_16ydq{0%{opacity:0}to{opacity:1}}@keyframes opacity-out_16ydq{0%{opacity:1}to{opacity:0}}@keyframes scale-left-in_16ydq{0%{opacity:0;transform:translateX(20px) scaleX(.9)}to{opacity:1;transform:translateX(0) scaleX(1)}}@keyframes scale-right-in_16ydq{0%{opacity:0;transform:translateX(-20px) scaleX(.9)}to{opacity:1;transform:translateX(0) scaleX(1)}}@keyframes scale-top-in_16ydq{0%{opacity:0;transform:translateY(20px) scaleY(.9)}to{opacity:1;transform:translateY(0) scaleY(1)}}@keyframes scale-bottom-in_16ydq{0%{opacity:0;transform:translateY(-20px) scaleY(.9)}to{opacity:1;transform:translateY(0) scaleY(1)}}@keyframes scale-left-out_16ydq{to{opacity:0;transform:translateX(20px) scaleX(.9)}0%{opacity:1;transform:translateX(0) scaleX(1)}}@keyframes scale-right-out_16ydq{to{opacity:0;transform:translateX(-20px) scaleX(.9)}0%{opacity:1;transform:translateX(0) scaleX(1)}}@keyframes scale-top-out_16ydq{to{opacity:0;transform:translateY(20px) scaleY(.9)}0%{opacity:1;transform:translateY(0) scaleY(1)}}@keyframes scale-bottom-out_16ydq{to{opacity:0;transform:translateY(-20px) scaleY(.9)}0%{opacity:1;transform:translateY(0) scaleY(1)}}@keyframes slide-top-in_16ydq{0%{opacity:0;transform:translateY(-100px)}to{opacity:1;transform:translateY(0)}}@keyframes slide-top-out_16ydq{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-100px)}}@keyframes slide-bottom-in_16ydq{0%{opacity:0;transform:translateY(100px)}to{opacity:1;transform:translateY(0)}}@keyframes slide-bottom-out_16ydq{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(100px)}}@keyframes slide-left-in_16ydq{0%{opacity:0;transform:translateX(-100px)}to{opacity:1;transform:translateX(0)}}@keyframes slide-left-out_16ydq{0%{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(-100px)}}@keyframes slide-right-in_16ydq{0%{opacity:0;transform:translateX(100px)}to{opacity:1;transform:translateX(0)}}@keyframes slide-right-out_16ydq{0%{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(100px)}}@keyframes transform-enter_16ydq{0%{transform:var(--transformStart_16ydq)}to{transform:var(--transformEnd_16ydq)}}@keyframes transform-exit_16ydq{0%{transform:var(--transformEnd_16ydq)}to{transform:var(--transformStart_16ydq)}}"
 /*__inner_css_end__*/
-, "1dvqe_gg_")
+, "16ydq_gg_")
 /*__reshadow_css_end__*/
 , {
-  "@enter": "enter_1dvqe",
-  "--transformStart": "--transformStart_1dvqe",
-  "--transformEnd": "--transformEnd_1dvqe",
-  "@exit": "exit_1dvqe"
+  "@collapse-enter": "collapse-enter_16ydq",
+  "--height": "--height_16ydq",
+  "@collapse-exit": "collapse-exit_16ydq",
+  "@fade-in-out-enter": "fade-in-out-enter_16ydq",
+  "@fade-in-out-exit": "fade-in-out-exit_16ydq",
+  "@opacity-in": "opacity-in_16ydq",
+  "@opacity-out": "opacity-out_16ydq",
+  "@scale-left-in": "scale-left-in_16ydq",
+  "@scale-right-in": "scale-right-in_16ydq",
+  "@scale-top-in": "scale-top-in_16ydq",
+  "@scale-bottom-in": "scale-bottom-in_16ydq",
+  "@scale-left-out": "scale-left-out_16ydq",
+  "@scale-right-out": "scale-right-out_16ydq",
+  "@scale-top-out": "scale-top-out_16ydq",
+  "@scale-bottom-out": "scale-bottom-out_16ydq",
+  "@slide-top-in": "slide-top-in_16ydq",
+  "@slide-top-out": "slide-top-out_16ydq",
+  "@slide-bottom-in": "slide-bottom-in_16ydq",
+  "@slide-bottom-out": "slide-bottom-out_16ydq",
+  "@slide-left-in": "slide-left-in_16ydq",
+  "@slide-left-out": "slide-left-out_16ydq",
+  "@slide-right-in": "slide-right-in_16ydq",
+  "@slide-right-out": "slide-right-out_16ydq",
+  "@transform-enter": "transform-enter_16ydq",
+  "--transformStart": "--transformStart_16ydq",
+  "--transformEnd": "--transformEnd_16ydq",
+  "@transform-exit": "transform-exit_16ydq"
 });
@@ -40,3 +66,3 @@
     "transformEnd": transform[1],
-    "keyframes": [style['@enter'], style['@exit']]
+    "keyframes": [style['@transform-enter'], style['@transform-exit']]
   })));
@@ -43,0 +69,0 @@ }

lib/types/index.d.ts

 import { CProps, ReturnEl } from '@semcore/core';
 import { IBoxProps } from '@semcore/flex-box';
 
+type CssTimingFunction =
+  | 'ease'
+  | 'ease-in'
+  | 'ease-out'
+  | 'ease-in-out'
+  | 'linear'
+  | 'step-start'
+  | 'step-end';
+
 export interface IAnimationProps extends IBoxProps {
@@ -23,2 +32,10 @@ /** The property is responsible for the visibility of the element */
   initialAnimation?: boolean;
+  /**
+   * @default ease-out
+   */
+  timingFunction?: CssTimingFunction;
+  /**
+   * @default false
+   */
+  animationsDisabled?: boolean;
 }
@@ -43,2 +60,30 @@
 
+export interface IScaleProps extends IAnimationProps {
+  /** Placement of appearing block
+   */
+  placement:
+    | 'top-start'
+    | 'top-end'
+    | 'bottom-start'
+    | 'bottom-end'
+    | 'right-start'
+    | 'right-end'
+    | 'left-start'
+    | 'left-end';
+}
+
+export interface ISlideProps extends IAnimationProps {
+  /** Placement of appearing block
+   */
+  placement:
+    | 'top-start'
+    | 'top-end'
+    | 'bottom-start'
+    | 'bottom-end'
+    | 'right-start'
+    | 'right-end'
+    | 'left-start'
+    | 'left-end';
+}
+
 declare const Animation: <T>(props: CProps<IAnimationProps & T>) => ReturnEl;
@@ -48,3 +93,5 @@ declare const Collapse: <T>(props: CProps<ICollapseProps & T>) => ReturnEl;
 declare const Transform: <T>(props: CProps<ITransformProps & T>) => ReturnEl;
+declare const Scale: <T>(props: CProps<IScaleProps & T>) => ReturnEl;
+declare const Slide: <T>(props: CProps<ISlideProps & T>) => ReturnEl;
 
-export { Animation, Collapse, FadeInOut, Transform };
+export { Animation, Collapse, FadeInOut, Transform, Scale, Slide };

package.json

 {
   "name": "@semcore/animation",
   "description": "Semrush Animation Component",
-  "version": "1.8.11",
+  "version": "1.9.0",
   "main": "lib/cjs/index.js",
@@ -6,0 +6,0 @@ "module": "lib/es6/index.js",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

136768

increased by93.65%

Number of package files

41

increased by32.26%

Lines of code

1737

increased by155.44%

Worsened metrics

Number of low supply chain risk alerts

10

increased byInfinity%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes