@semcore/animation - npm Package Compare versions

Comparing version 1.7.3 to 1.8.0

CHANGELOG.md

@@ -5,2 +5,8 @@ # Changelog
 
+## [1.8.0] - 2022-12-05
+
+### Added
+
+- Added prop `initialAnimation` to run animation on the first rendering
+
 ## [1.7.3] - 2022-11-30
@@ -7,0 +13,0 @@

lib/cjs/Animation.js

@@ -49,15 +49,15 @@ "use strict";
 /*__inner_css_start__*/
-".___SAnimation_dmusw_gg_{animation-fill-mode:both;animation-timing-function:ease-out;animation-duration:var(--durationFinalize_dmusw);animation-delay:var(--delayFinalize_dmusw);animation-name:var(--keyframesFinalize_dmusw)}.___SAnimation_dmusw_gg_.__visible_dmusw_gg_{animation-duration:var(--durationInitialize_dmusw);animation-delay:var(--delayInitialize_dmusw);animation-name:var(--keyframesInitialize_dmusw)}@media (prefers-reduced-motion){.___SAnimation_dmusw_gg_{animation-timing-function:step-end;animation-iteration-count:1}.___SAnimation_dmusw_gg_.__visible_dmusw_gg_{animation-timing-function:step-end;animation-iteration-count:1}}"
+".___SAnimation_1o15z_gg_{animation-fill-mode:both;animation-timing-function:ease-out;animation-duration:var(--durationFinalize_1o15z);animation-delay:var(--delayFinalize_1o15z);animation-name:var(--keyframesFinalize_1o15z)}.___SAnimation_1o15z_gg_.__visible_1o15z_gg_{animation-duration:var(--durationInitialize_1o15z);animation-delay:var(--delayInitialize_1o15z);animation-name:var(--keyframesInitialize_1o15z)}@media (prefers-reduced-motion){.___SAnimation_1o15z_gg_{animation-timing-function:step-end;animation-iteration-count:1}.___SAnimation_1o15z_gg_.__visible_1o15z_gg_{animation-timing-function:step-end;animation-iteration-count:1}}"
 /*__inner_css_end__*/
-, "dmusw_gg_")
+, "1o15z_gg_")
 /*__reshadow_css_end__*/
 , {
-  "__SAnimation": "___SAnimation_dmusw_gg_",
-  "--durationFinalize": "--durationFinalize_dmusw",
-  "--delayFinalize": "--delayFinalize_dmusw",
-  "--keyframesFinalize": "--keyframesFinalize_dmusw",
-  "_visible": "__visible_dmusw_gg_",
-  "--durationInitialize": "--durationInitialize_dmusw",
-  "--delayInitialize": "--delayInitialize_dmusw",
-  "--keyframesInitialize": "--keyframesInitialize_dmusw"
+  "__SAnimation": "___SAnimation_1o15z_gg_",
+  "--durationFinalize": "--durationFinalize_1o15z",
+  "--delayFinalize": "--delayFinalize_1o15z",
+  "--keyframesFinalize": "--keyframesFinalize_1o15z",
+  "_visible": "__visible_1o15z_gg_",
+  "--durationInitialize": "--durationInitialize_1o15z",
+  "--delayInitialize": "--delayInitialize_1o15z",
+  "--keyframesInitialize": "--keyframesInitialize_1o15z"
 });
@@ -109,3 +109,4 @@
           styles = _this$asProps.styles,
-          keyframes = _this$asProps.keyframes;
+          keyframes = _this$asProps.keyframes,
+          initialAnimation = _this$asProps.initialAnimation;
       var duration = propToArray(this.asProps.duration);
@@ -123,3 +124,3 @@ var delay = propToArray(this.asProps.delay);
         "delayFinalize": "".concat(delay[1], "ms"),
-        "keyframesInitialize": wasInvisible ? keyframes[0] : undefined,
+        "keyframesInitialize": wasInvisible || initialAnimation ? keyframes[0] : undefined,
         "keyframesFinalize": keyframes[1]
@@ -133,3 +134,3 @@ }, _ref))));
 
-      if (props.visible || props.preserveNode) {
+      if (props.visible || props.preserveNode || state.wasInvisible !== wasInvisible) {
         return {
@@ -141,9 +142,2 @@ render: true,
 
-      if (state.wasInvisible !== wasInvisible) {
-        return {
-          render: true,
-          wasInvisible: wasInvisible
-        };
-      }
-
       return state;
@@ -161,3 +155,4 @@ }
   delay: 0,
-  keyframes: []
+  keyframes: [],
+  initialAnimation: false
 });
@@ -164,0 +159,0 @@

lib/cjs/Collapse.js

@@ -38,10 +38,10 @@ "use strict";
 /*__inner_css_start__*/
-"@keyframes enter_w4i4q{0%{overflow:hidden;height:0}to{height:var(--height_w4i4q)}}@keyframes exit_w4i4q{0%{height:var(--height_w4i4q)}to{height:0}}"
+"@keyframes enter_1ed54{0%{overflow:hidden;height:0}to{height:var(--height_1ed54)}}@keyframes exit_1ed54{0%{height:var(--height_1ed54)}to{height:0}}"
 /*__inner_css_end__*/
-, "w4i4q_gg_")
+, "1ed54_gg_")
 /*__reshadow_css_end__*/
 , {
-  "@enter": "enter_w4i4q",
-  "--height": "--height_w4i4q",
-  "@exit": "exit_w4i4q"
+  "@enter": "enter_1ed54",
+  "--height": "--height_1ed54",
+  "@exit": "exit_1ed54"
 });
@@ -48,0 +48,0 @@

lib/cjs/FadeInOut.js

@@ -26,9 +26,9 @@ "use strict";
 /*__inner_css_start__*/
-"@keyframes enter_x6whg{0%{opacity:0}to{opacity:1}}@keyframes exit_x6whg{0%{opacity:1}to{opacity:0}}"
+"@keyframes enter_kowct{0%{opacity:0}to{opacity:1}}@keyframes exit_kowct{0%{opacity:1}to{opacity:0}}"
 /*__inner_css_end__*/
-, "x6whg_gg_")
+, "kowct_gg_")
 /*__reshadow_css_end__*/
 , {
-  "@enter": "enter_x6whg",
-  "@exit": "exit_x6whg"
+  "@enter": "enter_kowct",
+  "@exit": "exit_kowct"
 });
@@ -35,0 +35,0 @@

lib/cjs/Transform.js

@@ -30,11 +30,11 @@ "use strict";
 /*__inner_css_start__*/
-"@keyframes enter_14h9q{0%{transform:var(--transformStart_14h9q)}to{transform:var(--transformEnd_14h9q)}}@keyframes exit_14h9q{0%{transform:var(--transformEnd_14h9q)}to{transform:var(--transformStart_14h9q)}}"
+"@keyframes enter_1kezj{0%{transform:var(--transformStart_1kezj)}to{transform:var(--transformEnd_1kezj)}}@keyframes exit_1kezj{0%{transform:var(--transformEnd_1kezj)}to{transform:var(--transformStart_1kezj)}}"
 /*__inner_css_end__*/
-, "14h9q_gg_")
+, "1kezj_gg_")
 /*__reshadow_css_end__*/
 , {
-  "@enter": "enter_14h9q",
-  "--transformStart": "--transformStart_14h9q",
-  "--transformEnd": "--transformEnd_14h9q",
-  "@exit": "exit_14h9q"
+  "@enter": "enter_1kezj",
+  "--transformStart": "--transformStart_1kezj",
+  "--transformEnd": "--transformEnd_1kezj",
+  "@exit": "exit_1kezj"
 });
@@ -41,0 +41,0 @@

lib/es6/Animation.js

@@ -28,15 +28,15 @@ import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 /*__inner_css_start__*/
-".___SAnimation_dmusw_gg_{animation-fill-mode:both;animation-timing-function:ease-out;animation-duration:var(--durationFinalize_dmusw);animation-delay:var(--delayFinalize_dmusw);animation-name:var(--keyframesFinalize_dmusw)}.___SAnimation_dmusw_gg_.__visible_dmusw_gg_{animation-duration:var(--durationInitialize_dmusw);animation-delay:var(--delayInitialize_dmusw);animation-name:var(--keyframesInitialize_dmusw)}@media (prefers-reduced-motion){.___SAnimation_dmusw_gg_{animation-timing-function:step-end;animation-iteration-count:1}.___SAnimation_dmusw_gg_.__visible_dmusw_gg_{animation-timing-function:step-end;animation-iteration-count:1}}"
+".___SAnimation_1o15z_gg_{animation-fill-mode:both;animation-timing-function:ease-out;animation-duration:var(--durationFinalize_1o15z);animation-delay:var(--delayFinalize_1o15z);animation-name:var(--keyframesFinalize_1o15z)}.___SAnimation_1o15z_gg_.__visible_1o15z_gg_{animation-duration:var(--durationInitialize_1o15z);animation-delay:var(--delayInitialize_1o15z);animation-name:var(--keyframesInitialize_1o15z)}@media (prefers-reduced-motion){.___SAnimation_1o15z_gg_{animation-timing-function:step-end;animation-iteration-count:1}.___SAnimation_1o15z_gg_.__visible_1o15z_gg_{animation-timing-function:step-end;animation-iteration-count:1}}"
 /*__inner_css_end__*/
-, "dmusw_gg_")
+, "1o15z_gg_")
 /*__reshadow_css_end__*/
 , {
-  "__SAnimation": "___SAnimation_dmusw_gg_",
-  "--durationFinalize": "--durationFinalize_dmusw",
-  "--delayFinalize": "--delayFinalize_dmusw",
-  "--keyframesFinalize": "--keyframesFinalize_dmusw",
-  "_visible": "__visible_dmusw_gg_",
-  "--durationInitialize": "--durationInitialize_dmusw",
-  "--delayInitialize": "--delayInitialize_dmusw",
-  "--keyframesInitialize": "--keyframesInitialize_dmusw"
+  "__SAnimation": "___SAnimation_1o15z_gg_",
+  "--durationFinalize": "--durationFinalize_1o15z",
+  "--delayFinalize": "--delayFinalize_1o15z",
+  "--keyframesFinalize": "--keyframesFinalize_1o15z",
+  "_visible": "__visible_1o15z_gg_",
+  "--durationInitialize": "--durationInitialize_1o15z",
+  "--delayInitialize": "--delayInitialize_1o15z",
+  "--keyframesInitialize": "--keyframesInitialize_1o15z"
 });
@@ -91,3 +91,4 @@
           styles = _this$asProps.styles,
-          keyframes = _this$asProps.keyframes;
+          keyframes = _this$asProps.keyframes,
+          initialAnimation = _this$asProps.initialAnimation;
       var duration = propToArray(this.asProps.duration);
@@ -105,3 +106,3 @@ var delay = propToArray(this.asProps.delay);
         "delayFinalize": "".concat(delay[1], "ms"),
-        "keyframesInitialize": wasInvisible ? keyframes[0] : undefined,
+        "keyframesInitialize": wasInvisible || initialAnimation ? keyframes[0] : undefined,
         "keyframesFinalize": keyframes[1]
@@ -115,3 +116,3 @@ }, _ref))));
 
-      if (props.visible || props.preserveNode) {
+      if (props.visible || props.preserveNode || state.wasInvisible !== wasInvisible) {
         return {
@@ -123,9 +124,2 @@ render: true,
 
-      if (state.wasInvisible !== wasInvisible) {
-        return {
-          render: true,
-          wasInvisible: wasInvisible
-        };
-      }
-
       return state;
@@ -146,3 +140,4 @@ }
   delay: 0,
-  keyframes: []
+  keyframes: [],
+  initialAnimation: false
 });
@@ -149,0 +144,0 @@

lib/es6/Collapse.js

@@ -17,10 +17,10 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 /*__inner_css_start__*/
-"@keyframes enter_w4i4q{0%{overflow:hidden;height:0}to{height:var(--height_w4i4q)}}@keyframes exit_w4i4q{0%{height:var(--height_w4i4q)}to{height:0}}"
+"@keyframes enter_1ed54{0%{overflow:hidden;height:0}to{height:var(--height_1ed54)}}@keyframes exit_1ed54{0%{height:var(--height_1ed54)}to{height:0}}"
 /*__inner_css_end__*/
-, "w4i4q_gg_")
+, "1ed54_gg_")
 /*__reshadow_css_end__*/
 , {
-  "@enter": "enter_w4i4q",
-  "--height": "--height_w4i4q",
-  "@exit": "exit_w4i4q"
+  "@enter": "enter_1ed54",
+  "--height": "--height_1ed54",
+  "@exit": "exit_1ed54"
 });
@@ -27,0 +27,0 @@

lib/es6/FadeInOut.js

@@ -14,9 +14,9 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 /*__inner_css_start__*/
-"@keyframes enter_x6whg{0%{opacity:0}to{opacity:1}}@keyframes exit_x6whg{0%{opacity:1}to{opacity:0}}"
+"@keyframes enter_kowct{0%{opacity:0}to{opacity:1}}@keyframes exit_kowct{0%{opacity:1}to{opacity:0}}"
 /*__inner_css_end__*/
-, "x6whg_gg_")
+, "kowct_gg_")
 /*__reshadow_css_end__*/
 , {
-  "@enter": "enter_x6whg",
-  "@exit": "exit_x6whg"
+  "@enter": "enter_kowct",
+  "@exit": "exit_kowct"
 });
@@ -23,0 +23,0 @@

lib/es6/Transform.js

@@ -16,11 +16,11 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 /*__inner_css_start__*/
-"@keyframes enter_14h9q{0%{transform:var(--transformStart_14h9q)}to{transform:var(--transformEnd_14h9q)}}@keyframes exit_14h9q{0%{transform:var(--transformEnd_14h9q)}to{transform:var(--transformStart_14h9q)}}"
+"@keyframes enter_1kezj{0%{transform:var(--transformStart_1kezj)}to{transform:var(--transformEnd_1kezj)}}@keyframes exit_1kezj{0%{transform:var(--transformEnd_1kezj)}to{transform:var(--transformStart_1kezj)}}"
 /*__inner_css_end__*/
-, "14h9q_gg_")
+, "1kezj_gg_")
 /*__reshadow_css_end__*/
 , {
-  "@enter": "enter_14h9q",
-  "--transformStart": "--transformStart_14h9q",
-  "--transformEnd": "--transformEnd_14h9q",
-  "@exit": "exit_14h9q"
+  "@enter": "enter_1kezj",
+  "--transformStart": "--transformStart_1kezj",
+  "--transformEnd": "--transformEnd_1kezj",
+  "@exit": "exit_1kezj"
 });
@@ -27,0 +27,0 @@

lib/types/index.d.ts

@@ -19,2 +19,6 @@ import { CProps, ReturnEl } from '@semcore/core';
   preserveNode?: boolean;
+  /** Enables animation on first rendering
+   * @default false
+   */
+  initialAnimation: boolean;
 }
@@ -21,0 +25,0 @@

package.json

 {
   "name": "@semcore/animation",
   "description": "Semrush Animation Component",
-  "version": "1.7.3",
+  "version": "1.8.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

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

68682

increased by0.67%

Worsened metrics

Lines of code

668

decreased by-0.6%

No dependency changes