framer-motion-ticker - npm Package Compare versions

Comparing version 1.0.17 to 1.0.18

dist/index.d.ts

 import React from 'react';
+declare const TICKER_DIRECTION_LEFT = -1;
+declare const TICKER_DIRECTION_RIGHT = 1;
 type TickerProps = {
     children: JSX.Element[];
     duration?: number;
+    onMouseEnter?: () => void;
+    onMouseLeave?: () => void;
+    isPlaying?: boolean;
+    direction?: number;
 };
 declare const Ticker: React.FunctionComponent<TickerProps>;
 export default Ticker;
+export { TICKER_DIRECTION_LEFT, TICKER_DIRECTION_RIGHT };

dist/index.js

 "use strict";
 
 exports.__esModule = true;
-exports["default"] = void 0;
+exports["default"] = exports.TICKER_DIRECTION_RIGHT = exports.TICKER_DIRECTION_LEFT = void 0;
 var _react = _interopRequireDefault(require("react"));
@@ -9,6 +9,19 @@ var _framerMotion = require("framer-motion");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-var Ticker = function Ticker(_ref) {
-  var children = _ref.children,
-    _ref$duration = _ref.duration,
-    duration = _ref$duration === void 0 ? 10 : _ref$duration;
+var TICKER_DIRECTION_LEFT = -1;
+exports.TICKER_DIRECTION_LEFT = TICKER_DIRECTION_LEFT;
+var TICKER_DIRECTION_RIGHT = 1;
+exports.TICKER_DIRECTION_RIGHT = TICKER_DIRECTION_RIGHT;
+var noop = function noop() {};
+var Ticker = function Ticker(props) {
+  var children = props.children,
+    _props$duration = props.duration,
+    duration = _props$duration === void 0 ? 10 : _props$duration,
+    _props$onMouseEnter = props.onMouseEnter,
+    onMouseEnter = _props$onMouseEnter === void 0 ? noop : _props$onMouseEnter,
+    _props$onMouseLeave = props.onMouseLeave,
+    onMouseLeave = _props$onMouseLeave === void 0 ? noop : _props$onMouseLeave,
+    _props$isPlaying = props.isPlaying,
+    isPlaying = _props$isPlaying === void 0 ? true : _props$isPlaying,
+    _props$direction = props.direction,
+    direction = _props$direction === void 0 ? TICKER_DIRECTION_LEFT : _props$direction;
   var tickerRef = _react["default"].useRef(null);
@@ -24,2 +37,9 @@ var _React$useState = _react["default"].useState(''),
     setNumDupes = _React$useState3[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 isInView = (0, _framerMotion.useInView)(scope);
   _react["default"].useEffect(function () {
@@ -44,2 +64,24 @@ setTickerUUID((0, _uuid.v4)());
   }, [tickerRef.current, tickerContentWidth]);
+  _react["default"].useEffect(function () {
+    if (isInView && !animationControls) {
+      var controls = animate(scope.current, {
+        x: tickerContentWidth * direction
+      }, {
+        ease: 'linear',
+        duration: duration,
+        repeat: Infinity
+      });
+      controls.play();
+      setAnimationControls(controls);
+    }
+  }, [isInView]);
+  _react["default"].useEffect(function () {
+    if (animationControls) {
+      if (!isInView || !isPlaying) {
+        animationControls.pause();
+      } else {
+        animationControls.play();
+      }
+    }
+  }, [isInView, isPlaying]);
   return /*#__PURE__*/_react["default"].createElement("div", {
@@ -52,14 +94,12 @@ className: "FMT__container",
       overflow: 'hidden'
-    }
-  }, /*#__PURE__*/_react["default"].createElement(_framerMotion.motion.div, {
-    className: "FMT__container__contents",
-    initial: false,
-    animate: {
-      x: -tickerContentWidth
     },
-    transition: {
-      ease: 'linear',
-      duration: duration,
-      repeat: Infinity
-    },
+    onMouseEnter: onMouseEnter,
+    onMouseLeave: onMouseLeave
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    ref: scope,
+    className: "FMT__container__contents"
+    // initial={false}
+    // animate={{ x: tickerContentWidth * direction }}
+    // transition={{ ease: 'linear', duration, repeat: Infinity }}
+    ,
     style: {
@@ -66,0 +106,0 @@ display: 'flex'

package.json

 {
   "name": "framer-motion-ticker",
-  "version": "1.0.17",
+  "version": "1.0.18",
   "description": "A React component that acts like a ticker, or marquee.",
@@ -5,0 +5,0 @@ "author": "Andres Movilla <[e-mail]>",

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

13022

increased by30.23%

Lines of code

223

increased by53.79%

No dependency changes