framer-motion-ticker - npm Package Compare versions

Comparing version 1.0.18 to 1.0.19

dist/index.js

@@ -7,3 +7,2 @@ "use strict";
 var _framerMotion = require("framer-motion");
-var _uuid = require("uuid");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -28,38 +27,24 @@ var TICKER_DIRECTION_LEFT = -1;
   var tickerRef = _react["default"].useRef(null);
-  var _React$useState = _react["default"].useState(''),
-    tickerUUID = _React$useState[0],
-    setTickerUUID = _React$useState[1];
-  var _React$useState2 = _react["default"].useState(2),
-    tickerContentWidth = _React$useState2[0],
-    setTickerContentWidth = _React$useState2[1];
-  var _React$useState3 = _react["default"].useState(1),
-    numDupes = _React$useState3[0],
-    setNumDupes = _React$useState3[1];
+  var tickerContentsRef = _react["default"].useRef(null);
+  var _React$useState = _react["default"].useState(2),
+    tickerContentWidth = _React$useState[0],
+    setTickerContentWidth = _React$useState[1];
+  var _React$useState2 = _react["default"].useState(1),
+    numDupes = _React$useState2[0],
+    setNumDupes = _React$useState2[1];
   var _useAnimate = (0, _framerMotion.useAnimate)(),
     scope = _useAnimate[0],
     animate = _useAnimate[1];
-  var _React$useState4 = _react["default"].useState(undefined),
-    animationControls = _React$useState4[0],
-    setAnimationControls = _React$useState4[1];
+  var _React$useState3 = _react["default"].useState(undefined),
+    animationControls = _React$useState3[0],
+    setAnimationControls = _React$useState3[1];
   var isInView = (0, _framerMotion.useInView)(scope);
   _react["default"].useEffect(function () {
-    setTickerUUID((0, _uuid.v4)());
-  }, []);
-  _react["default"].useEffect(function () {
-    var contentWidth = 0;
-    for (var index = 0; index < children.length; index++) {
-      var _document$getElementB;
-      var element = (_document$getElementB = document.getElementById(tickerUUID + '_' + index)) == null ? void 0 : _document$getElementB.clientWidth;
-      if (element) {
-        contentWidth += element;
-      }
+    if (tickerRef.current && tickerContentsRef.current) {
+      var contentWidth = tickerContentsRef.current.getBoundingClientRect().width;
+      setTickerContentWidth(contentWidth);
+      setNumDupes(Math.max(Math.ceil(2 * tickerRef.current.clientWidth / contentWidth), 1));
     }
-    setTickerContentWidth(contentWidth);
-  });
+  }, [tickerRef.current, tickerContentsRef.current]);
   _react["default"].useEffect(function () {
-    if (tickerRef.current && tickerContentWidth) {
-      setNumDupes(Math.max(Math.ceil(2 * tickerRef.current.clientWidth / tickerContentWidth), 1));
-    }
-  }, [tickerRef.current, tickerContentWidth]);
-  _react["default"].useEffect(function () {
     if (isInView && !animationControls) {
@@ -98,24 +83,40 @@ var controls = animate(scope.current, {
     ref: scope,
-    className: "FMT__container__contents"
-    // initial={false}
-    // animate={{ x: tickerContentWidth * direction }}
-    // transition={{ ease: 'linear', duration, repeat: Infinity }}
-    ,
+    className: "FMT__container__contents",
     style: {
+      display: 'flex',
+      width: 'max-content',
+      marginLeft: "-" + tickerContentWidth * numDupes + "px"
+    }
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
       display: 'flex'
     }
+  }, [].concat(Array(numDupes)).map(function (_) {
+    return children.map(function (item, index) {
+      return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, {
+        key: index
+      }, item);
+    });
+  })), /*#__PURE__*/_react["default"].createElement("div", {
+    ref: tickerContentsRef,
+    style: {
+      display: 'flex'
+    }
   }, children.map(function (item, index) {
-    return /*#__PURE__*/_react["default"].createElement("div", {
-      key: index,
-      id: tickerUUID + "_" + index
+    return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, {
+      key: index
     }, item);
-  }), [].concat(Array(numDupes)).map(function (_) {
+  })), /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      display: 'flex'
+    }
+  }, [].concat(Array(numDupes)).map(function (_) {
     return children.map(function (item, index) {
-      return /*#__PURE__*/_react["default"].createElement("div", {
+      return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, {
         key: index
       }, item);
     });
-  })));
+  }))));
 };
 var _default = Ticker;
 exports["default"] = _default;

package.json

 {
   "name": "framer-motion-ticker",
-  "version": "1.0.18",
+  "version": "1.0.19",
   "description": "A React component that acts like a ticker, or marquee.",
@@ -25,4 +25,3 @@ "author": "Andres Movilla <[e-mail]>",
   "dependencies": {
-    "framer-motion": "^10.9.1",
-    "uuid": "^9.0.0"
+    "framer-motion": "^10.9.1"
   },
@@ -38,3 +37,2 @@ "devDependencies": {
     "@types/react-dom": "^18.0.11",
-    "@types/uuid": "^9.0.1",
     "@typescript-eslint/eslint-plugin": "^5.56.0",
@@ -41,0 +39,0 @@ "@typescript-eslint/parser": "^5.56.0",

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

Dependency count

1

decreased by-50%

Dev dependency count

19

decreased by-5%

Worsened metrics

Total package byte prevSize

12958

decreased by-0.49%

Dependency changes

• - Removeduuid@^9.0.0

• - Removeduuid@9.0.1(transitive)