@micromag/viewer 0.3.206 → 0.3.211

package/es/index.js

@@ -14,6 +14,7 @@ import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
 import classNames from 'classnames';
 import { Helmet } from 'react-helmet';
+import { animated } from '@react-spring/web';
 import EventEmitter from 'wolfy87-eventemitter';
 import { Label, ScreenPreview, Screen, Button as Button$1, Meta, FontFaces } from '@micromag/core/components';
 import { useDimensionObserver, useTrackEvent, useDragProgress, useMediaProgress, useParsedStory, useLoadedFonts, useTrackScreenView, useScreenSizeFromElement, useFullscreen } from '@micromag/core/hooks';
@@ -22,7 +23,6 @@ import { useIntl, FormattedMessage } from 'react-intl';
 import { faTimes } from '@fortawesome/free-solid-svg-icons/faTimes';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { useSpring } from '@react-spring/core';
-import { animated } from '@react-spring/web';
 import Scroll from '@micromag/element-scroll';
 import ShareOptions from '@micromag/element-share-options';
 import { useGesture } from '@use-gesture/react';
@@ -511,14 +511,14 @@ var styles$e = {"container":"micromag-viewer-buttons-toggle-button-container","n
 
 var propTypes$i = {
   className: PropTypes.string,
-  toggled: PropTypes.number,
+  progressSpring: PropTypes.number,
   button: PropTypes.node,
   toggledButton: PropTypes.node,
   toggledButtonClassName: PropTypes.string
 };
 var defaultProps$i = {
   className: null,
-  toggled: 0,
+  progressSpring: 0,
   button: null,
   toggledButton: null,
   toggledButtonClassName: null
@@ -526,26 +526,27 @@ var defaultProps$i = {
 
 var ToggleButton = function ToggleButton(_ref) {
   var className = _ref.className,
-      toggled = _ref.toggled,
+      progressSpring = _ref.progressSpring,
       button = _ref.button,
       toggledButton = _ref.toggledButton,
       toggledButtonClassName = _ref.toggledButtonClassName;
   if (button === null) return false;
-
-  var getToggleButtonStyles = function getToggleButtonStyles(t) {
-    return {
-      transform: "translateY(".concat(t * -100, "%)")
-    };
-  };
-
   return /*#__PURE__*/React.createElement("div", {
     className: classNames([styles$e.container, _defineProperty({}, className, className !== null)])
-  }, /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React.createElement(animated.div, {
     className: styles$e.normal,
-    style: getToggleButtonStyles(toggled)
-  }, button), /*#__PURE__*/React.createElement("div", {
+    style: {
+      transform: progressSpring.to(function (p) {
+        return "translateY(".concat(p * -100, "%)");
+      })
+    }
+  }, button), /*#__PURE__*/React.createElement(animated.div, {
     className: classNames([styles$e.toggled, _defineProperty({}, toggledButtonClassName, toggledButtonClassName !== null)]),
-    style: getToggleButtonStyles(toggled - 1)
+    style: {
+      transform: progressSpring.to(function (p) {
+        return "translateY(".concat((p - 1) * -100, "%)");
+      })
+    }
   }, toggledButton));
 };
 
@@ -556,20 +557,20 @@ var styles$d = {"backdrop":"micromag-viewer-menus-menu-container-backdrop","heig
 
 var propTypes$h = {
   className: PropTypes.string,
-  transitionProgress: PropTypes.number,
+  progressSpring: PropTypes.number,
   theme: PropTypes$1.viewerTheme,
   children: PropTypes.node
 };
 var defaultProps$h = {
   className: null,
-  transitionProgress: 0,
+  progressSpring: 0,
   theme: null,
   children: null
 };
 
 var ViewerMenuContainer = function ViewerMenuContainer(_ref) {
   var className = _ref.className,
-      transitionProgress = _ref.transitionProgress,
+      progressSpring = _ref.progressSpring,
       viewerTheme = _ref.theme,
       children = _ref.children;
 
@@ -587,17 +588,25 @@ var ViewerMenuContainer = function ViewerMenuContainer(_ref) {
     style: {
       pointerEvents: 'none'
     }
-  }, /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React.createElement(animated.div, {
     className: styles$d.heightContainer,
     style: _objectSpread({
-      height: "".concat(transitionProgress * 100, "%"),
-      pointerEvents: transitionProgress < 0.25 ? 'none' : 'auto',
-      zIndex: Math.round(2 + transitionProgress)
+      opacity: progressSpring,
+      // transform: progressSpring.to((p) => `translateY(${(1 - p) * -100}%)`),
+      // height: progressSpring.to((p) => `${p * 100}%`),
+      pointerEvents: progressSpring.to(function (p) {
+        return p < 0.25 ? 'none' : 'auto';
+      }),
+      zIndex: progressSpring.to(function (p) {
+        return Math.round(2 + p);
+      })
     }, backgroundColorStyle)
-  }, children), /*#__PURE__*/React.createElement("div", {
+  }, children), /*#__PURE__*/React.createElement(animated.div, {
     className: styles$d.backdrop,
     style: {
-      opacity: easings.easeOutQuint(transitionProgress)
+      opacity: progressSpring.to(function (p) {
+        return easings.easeOutQuint(p);
+      })
     }
   }));
 };
@@ -968,6 +977,7 @@ var propTypes$c = {
   onClickScreen: PropTypes.func,
   maxThumbsWidth: PropTypes.number,
   paddingTop: PropTypes.number,
+  scrollDisabled: PropTypes.bool,
   // @todo to reimplement:
   // shouldLoad: PropTypes.bool,
   // toggleFullscreen: PropTypes.func,
@@ -985,6 +995,7 @@ var defaultProps$c = {
   onClickScreen: null,
   maxThumbsWidth: 140,
   paddingTop: null,
+  scrollDisabled: false,
   // toggleFullscreen: null,
   // fullscreenActive: false,
   // fullscreenEnabled: false,
@@ -1000,6 +1011,7 @@ var ViewerMenuPreview = function ViewerMenuPreview(_ref) {
       onClickScreen = _ref.onClickScreen,
       maxThumbsWidth = _ref.maxThumbsWidth,
       paddingTop = _ref.paddingTop,
+      scrollDisabled = _ref.scrollDisabled,
       className = _ref.className;
 
   var _useDimensionObserver = useDimensionObserver(),
@@ -1042,7 +1054,8 @@ var ViewerMenuPreview = function ViewerMenuPreview(_ref) {
     className: styles$9.content,
     ref: containerRef
   }, /*#__PURE__*/React.createElement(Scroll, {
-    className: styles$9.scroll
+    className: styles$9.scroll,
+    disabled: scrollDisabled
   }, /*#__PURE__*/React.createElement("nav", {
     className: styles$9.nav,
     style: {
@@ -1533,6 +1546,7 @@ var ViewerMenu = function ViewerMenu(_ref) {
     springParams: springParams
   }),
       bindShareDrag = _useDragProgress.bind,
+      draggingShare = _useDragProgress.dragging,
       shareOpenedProgress = _useDragProgress.progress;
 
   var computeMenuProgress = useCallback(function (_ref9) {
@@ -1580,6 +1594,7 @@ var ViewerMenu = function ViewerMenu(_ref) {
     springParams: springParams
   }),
       bindMenuDrag = _useDragProgress2.bind,
+      draggingMenu = _useDragProgress2.dragging,
       menuOpenedProgress = _useDragProgress2.progress;
 
   var keyboardShortcuts = useMemo(function () {
@@ -1620,7 +1635,7 @@ var ViewerMenu = function ViewerMenu(_ref) {
       theme: menuTheme,
       iconPosition: "left"
     }),
-    toggled: shareOpenedProgress
+    progressSpring: shareOpenedProgress
   })) : null, !withoutScreensMenu ? /*#__PURE__*/React.createElement("div", Object.assign({
     className: classNames([styles$6.menuItem, styles$6.menuItemScreens])
   }, bindMenuDrag()), /*#__PURE__*/React.createElement(ToggleButton, {
@@ -1636,7 +1651,7 @@ var ViewerMenu = function ViewerMenu(_ref) {
       theme: menuTheme,
       iconPosition: "right"
     }),
-    toggled: menuOpenedProgress,
+    progressSpring: menuOpenedProgress,
     toggledButtonClassName: styles$6.screensMenuButtonToggled
   })) : null), /*#__PURE__*/React.createElement(ViewerMenuDots, Object.assign({}, menuTheme, {
     direction: "horizontal",
@@ -1656,9 +1671,9 @@ var ViewerMenu = function ViewerMenu(_ref) {
     }
   }))), /*#__PURE__*/React.createElement(ViewerMenuContainer, {
     className: styles$6.menuContainer,
-    transitionProgress: shareOpenedProgress,
+    progressSpring: shareOpenedProgress,
     theme: viewerTheme
-  }, shareOpenedProgress > 0 ? /*#__PURE__*/React.createElement(ViewerMenuShare, {
+  }, draggingShare || shareOpened ? /*#__PURE__*/React.createElement(ViewerMenuShare, {
     viewerTheme: viewerTheme,
     className: styles$6.menuShare,
     title: title,
@@ -1673,9 +1688,9 @@ var ViewerMenu = function ViewerMenu(_ref) {
     onClose: onCloseShare
   }) : null), /*#__PURE__*/React.createElement(ViewerMenuContainer, {
     className: styles$6.menuContainer,
-    transitionProgress: menuOpenedProgress,
+    progressSpring: menuOpenedProgress,
     theme: viewerTheme
-  }, menuOpenedProgress > 0 ? /*#__PURE__*/React.createElement(ViewerMenuPreview, {
+  }, draggingMenu || menuOpened ? /*#__PURE__*/React.createElement(ViewerMenuPreview, {
     viewerTheme: viewerTheme,
     className: styles$6.menuPreview,
     screenSize: screenSize,
@@ -1687,6 +1702,7 @@ var ViewerMenu = function ViewerMenu(_ref) {
     onShare: onShare,
     onClickScreen: onClickScreen,
     onClose: onCloseMenu,
+    scrollDisabled: draggingMenu,
     toggleFullscreen: toggleFullscreen,
     fullscreenActive: fullscreenActive,
     fullscreenEnabled: fullscreenEnabled
@@ -1695,6 +1711,7 @@ var ViewerMenu = function ViewerMenu(_ref) {
 
 ViewerMenu.propTypes = propTypes$9;
 ViewerMenu.defaultProps = defaultProps$9;
+var ViewerMenu$1 = /*#__PURE__*/React.memo(ViewerMenu);
 
 var styles$5 = {"container":"micromag-viewer-screen-container","navigationHint":"micromag-viewer-screen-navigationHint"};
 
@@ -2769,34 +2786,48 @@ var Viewer = function Viewer(_ref) {
     springParams: springParams
   }),
       isDragging = _useDragProgress.dragging,
-      screenIndexProgress = _useDragProgress.progress,
+      progressSpring = _useDragProgress.progress,
       dragContentBind = _useDragProgress.bind;
 
-  var getScreenStylesByIndex = function getScreenStylesByIndex(index, progress) {
+  var getScreenStylesByIndex = function getScreenStylesByIndex(index, spring) {
     if (transitionType === 'stack') {
-      var _t = index - progress;
-
-      var _clamped = Math.min(1, Math.max(0, _t));
-
-      var invert = Math.min(1, Math.max(0, -_t));
-      var opacity = Math.max(0, 1 - 0.75 * invert + (_t + 1)); // just hide other screens
-
-      if (Math.abs(_t) > neighborScreensActive) return {
-        opacity: 0
-      };
       return {
-        opacity: opacity,
-        transform: "translateX(".concat(_clamped * 100, "%) scale(").concat(1 - 0.2 * invert, ")"),
-        boxShadow: "0 0 ".concat(4 * (1 - _clamped), "rem ").concat(-0.5 * (1 - _clamped), "rem black"),
-        zIndex: index
+        zIndex: index,
+        opacity: spring.to(function (progress) {
+          var t = index - progress;
+          var invert = Math.min(1, Math.max(0, -t));
+          if (Math.abs(t) > neighborScreensActive) return 0;
+          return Math.max(0, 1 - 0.75 * invert + (t + 1));
+        }),
+        transform: spring.to(function (progress) {
+          var t = index - progress;
+          var clamped = Math.min(1, Math.max(0, t));
+          var invert = Math.min(1, Math.max(0, -t));
+          if (Math.abs(t) > neighborScreensActive) return 'translateX(100%)';
+          return "translateX(".concat(clamped * 100, "%) scale(").concat(1 - 0.2 * invert, ")");
+        }),
+        boxShadow: spring.to(function (progress) {
+          var t = index - progress;
+          if (Math.abs(t) > neighborScreensActive) return null;
+          var clamped = Math.min(1, Math.max(0, t));
+          return "0 0 ".concat(4 * (1 - clamped), "rem ").concat(-0.5 * (1 - clamped), "rem black");
+        })
       };
     }
 
-    var t = index - progress;
-    var clamped = Math.min(1, Math.max(0, Math.abs(t)));
     return {
-      opacity: 1 - 0.75 * clamped,
-      transform: "translateX(".concat(t * neighborScreenOffset, "%) scale(").concat(1 - (1 - neighborScreenScale) * clamped, ")"),
+      opacity: spring.to(function (progress) {
+        var t = index - progress;
+        if (Math.abs(t) > neighborScreensActive) return 0;
+        var clamped = Math.min(1, Math.max(0, Math.abs(t)));
+        return 1 - 0.75 * clamped;
+      }),
+      transform: spring.to(function (progress) {
+        var t = index - progress;
+        if (Math.abs(t) > neighborScreensActive) return "translate(100%)";
+        var clamped = Math.min(1, Math.max(0, Math.abs(t)));
+        return "translateX(".concat(t * neighborScreenOffset, "%) scale(").concat(1 - (1 - neighborScreenScale) * clamped, ")");
+      }),
       zIndex: screensCount - index
     };
   };
@@ -2882,7 +2913,7 @@ var Viewer = function Viewer(_ref) {
     }), (_ref15 = {}, _defineProperty(_ref15, styles$6.landscape, landscape), _defineProperty(_ref15, styles$6.withoutGestures, withoutGestures), _defineProperty(_ref15, styles$6.hideMenu, !menuVisible), _defineProperty(_ref15, styles$6.fadeMenu, playing && playbackControls && !playbackcontrolsVisible), _defineProperty(_ref15, styles$6.ready, ready || withoutScreensTransforms), _defineProperty(_ref15, styles$6.hasInteracted, hasInteracted), _defineProperty(_ref15, styles$6.isDragging, isDragging), _defineProperty(_ref15, className, className), _ref15)]),
     ref: containerRef,
     onContextMenu: onContextMenu
-  }, !withoutMenu ? /*#__PURE__*/React.createElement(ViewerMenu, {
+  }, !withoutMenu ? /*#__PURE__*/React.createElement(ViewerMenu$1, {
     story: parsedStory,
     currentScreenIndex: screenIndex,
     withShadow: menuOverScreen && !withoutMenuShadow,
@@ -2917,8 +2948,8 @@ var Viewer = function Viewer(_ref) {
   }, screens.map(function (screen, i) {
     var current = screenIndex === i;
     var active = i >= screenIndex - neighborScreensActive && i <= screenIndex + neighborScreensActive;
-    var screenStyles = getScreenStylesByIndex(i, screenIndexProgress);
-    return /*#__PURE__*/React.createElement("div", {
+    var screenStyles = getScreenStylesByIndex(i, progressSpring);
+    return /*#__PURE__*/React.createElement(animated.div, {
       key: "screen-viewer-".concat(screen.id || '', "-").concat(i + 1),
       style: screenStyles,
       className: classNames([styles$6.screenContainer, _defineProperty({}, styles$6.current, current)])

package/lib/index.js

@@ -18,6 +18,7 @@ var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
 var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
 var classNames = require('classnames');
 var reactHelmet = require('react-helmet');
+var web = require('@react-spring/web');
 var EventEmitter = require('wolfy87-eventemitter');
 var components = require('@micromag/core/components');
 var hooks = require('@micromag/core/hooks');
@@ -26,7 +27,6 @@ var reactIntl = require('react-intl');
 var faTimes = require('@fortawesome/free-solid-svg-icons/faTimes');
 var reactFontawesome = require('@fortawesome/react-fontawesome');
 var core$1 = require('@react-spring/core');
-var web = require('@react-spring/web');
 var Scroll = require('@micromag/element-scroll');
 var ShareOptions = require('@micromag/element-share-options');
 var react = require('@use-gesture/react');
@@ -531,14 +531,14 @@ var styles$e = {"container":"micromag-viewer-buttons-toggle-button-container","n
 
 var propTypes$i = {
   className: PropTypes__default["default"].string,
-  toggled: PropTypes__default["default"].number,
+  progressSpring: PropTypes__default["default"].number,
   button: PropTypes__default["default"].node,
   toggledButton: PropTypes__default["default"].node,
   toggledButtonClassName: PropTypes__default["default"].string
 };
 var defaultProps$i = {
   className: null,
-  toggled: 0,
+  progressSpring: 0,
   button: null,
   toggledButton: null,
   toggledButtonClassName: null
@@ -546,26 +546,27 @@ var defaultProps$i = {
 
 var ToggleButton = function ToggleButton(_ref) {
   var className = _ref.className,
-      toggled = _ref.toggled,
+      progressSpring = _ref.progressSpring,
       button = _ref.button,
       toggledButton = _ref.toggledButton,
       toggledButtonClassName = _ref.toggledButtonClassName;
   if (button === null) return false;
-
-  var getToggleButtonStyles = function getToggleButtonStyles(t) {
-    return {
-      transform: "translateY(".concat(t * -100, "%)")
-    };
-  };
-
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: classNames__default["default"]([styles$e.container, _defineProperty__default["default"]({}, className, className !== null)])
-  }, /*#__PURE__*/React__default["default"].createElement("div", {
+  }, /*#__PURE__*/React__default["default"].createElement(web.animated.div, {
     className: styles$e.normal,
-    style: getToggleButtonStyles(toggled)
-  }, button), /*#__PURE__*/React__default["default"].createElement("div", {
+    style: {
+      transform: progressSpring.to(function (p) {
+        return "translateY(".concat(p * -100, "%)");
+      })
+    }
+  }, button), /*#__PURE__*/React__default["default"].createElement(web.animated.div, {
     className: classNames__default["default"]([styles$e.toggled, _defineProperty__default["default"]({}, toggledButtonClassName, toggledButtonClassName !== null)]),
-    style: getToggleButtonStyles(toggled - 1)
+    style: {
+      transform: progressSpring.to(function (p) {
+        return "translateY(".concat((p - 1) * -100, "%)");
+      })
+    }
   }, toggledButton));
 };
 
@@ -576,20 +577,20 @@ var styles$d = {"backdrop":"micromag-viewer-menus-menu-container-backdrop","heig
 
 var propTypes$h = {
   className: PropTypes__default["default"].string,
-  transitionProgress: PropTypes__default["default"].number,
+  progressSpring: PropTypes__default["default"].number,
   theme: core.PropTypes.viewerTheme,
   children: PropTypes__default["default"].node
 };
 var defaultProps$h = {
   className: null,
-  transitionProgress: 0,
+  progressSpring: 0,
   theme: null,
   children: null
 };
 
 var ViewerMenuContainer = function ViewerMenuContainer(_ref) {
   var className = _ref.className,
-      transitionProgress = _ref.transitionProgress,
+      progressSpring = _ref.progressSpring,
       viewerTheme = _ref.theme,
       children = _ref.children;
 
@@ -607,17 +608,25 @@ var ViewerMenuContainer = function ViewerMenuContainer(_ref) {
     style: {
       pointerEvents: 'none'
     }
-  }, /*#__PURE__*/React__default["default"].createElement("div", {
+  }, /*#__PURE__*/React__default["default"].createElement(web.animated.div, {
     className: styles$d.heightContainer,
     style: _objectSpread__default["default"]({
-      height: "".concat(transitionProgress * 100, "%"),
-      pointerEvents: transitionProgress < 0.25 ? 'none' : 'auto',
-      zIndex: Math.round(2 + transitionProgress)
+      opacity: progressSpring,
+      // transform: progressSpring.to((p) => `translateY(${(1 - p) * -100}%)`),
+      // height: progressSpring.to((p) => `${p * 100}%`),
+      pointerEvents: progressSpring.to(function (p) {
+        return p < 0.25 ? 'none' : 'auto';
+      }),
+      zIndex: progressSpring.to(function (p) {
+        return Math.round(2 + p);
+      })
     }, backgroundColorStyle)
-  }, children), /*#__PURE__*/React__default["default"].createElement("div", {
+  }, children), /*#__PURE__*/React__default["default"].createElement(web.animated.div, {
     className: styles$d.backdrop,
     style: {
-      opacity: utils.easings.easeOutQuint(transitionProgress)
+      opacity: progressSpring.to(function (p) {
+        return utils.easings.easeOutQuint(p);
+      })
     }
   }));
 };
@@ -988,6 +997,7 @@ var propTypes$c = {
   onClickScreen: PropTypes__default["default"].func,
   maxThumbsWidth: PropTypes__default["default"].number,
   paddingTop: PropTypes__default["default"].number,
+  scrollDisabled: PropTypes__default["default"].bool,
   // @todo to reimplement:
   // shouldLoad: PropTypes.bool,
   // toggleFullscreen: PropTypes.func,
@@ -1005,6 +1015,7 @@ var defaultProps$c = {
   onClickScreen: null,
   maxThumbsWidth: 140,
   paddingTop: null,
+  scrollDisabled: false,
   // toggleFullscreen: null,
   // fullscreenActive: false,
   // fullscreenEnabled: false,
@@ -1020,6 +1031,7 @@ var ViewerMenuPreview = function ViewerMenuPreview(_ref) {
       onClickScreen = _ref.onClickScreen,
       maxThumbsWidth = _ref.maxThumbsWidth,
       paddingTop = _ref.paddingTop,
+      scrollDisabled = _ref.scrollDisabled,
       className = _ref.className;
 
   var _useDimensionObserver = hooks.useDimensionObserver(),
@@ -1062,7 +1074,8 @@ var ViewerMenuPreview = function ViewerMenuPreview(_ref) {
     className: styles$9.content,
     ref: containerRef
   }, /*#__PURE__*/React__default["default"].createElement(Scroll__default["default"], {
-    className: styles$9.scroll
+    className: styles$9.scroll,
+    disabled: scrollDisabled
   }, /*#__PURE__*/React__default["default"].createElement("nav", {
     className: styles$9.nav,
     style: {
@@ -1553,6 +1566,7 @@ var ViewerMenu = function ViewerMenu(_ref) {
     springParams: springParams
   }),
       bindShareDrag = _useDragProgress.bind,
+      draggingShare = _useDragProgress.dragging,
       shareOpenedProgress = _useDragProgress.progress;
 
   var computeMenuProgress = React.useCallback(function (_ref9) {
@@ -1600,6 +1614,7 @@ var ViewerMenu = function ViewerMenu(_ref) {
     springParams: springParams
   }),
       bindMenuDrag = _useDragProgress2.bind,
+      draggingMenu = _useDragProgress2.dragging,
       menuOpenedProgress = _useDragProgress2.progress;
 
   var keyboardShortcuts = React.useMemo(function () {
@@ -1640,7 +1655,7 @@ var ViewerMenu = function ViewerMenu(_ref) {
       theme: menuTheme,
       iconPosition: "left"
     }),
-    toggled: shareOpenedProgress
+    progressSpring: shareOpenedProgress
   })) : null, !withoutScreensMenu ? /*#__PURE__*/React__default["default"].createElement("div", Object.assign({
     className: classNames__default["default"]([styles$6.menuItem, styles$6.menuItemScreens])
   }, bindMenuDrag()), /*#__PURE__*/React__default["default"].createElement(ToggleButton, {
@@ -1656,7 +1671,7 @@ var ViewerMenu = function ViewerMenu(_ref) {
       theme: menuTheme,
       iconPosition: "right"
     }),
-    toggled: menuOpenedProgress,
+    progressSpring: menuOpenedProgress,
     toggledButtonClassName: styles$6.screensMenuButtonToggled
   })) : null), /*#__PURE__*/React__default["default"].createElement(ViewerMenuDots, Object.assign({}, menuTheme, {
     direction: "horizontal",
@@ -1676,9 +1691,9 @@ var ViewerMenu = function ViewerMenu(_ref) {
     }
   }))), /*#__PURE__*/React__default["default"].createElement(ViewerMenuContainer, {
     className: styles$6.menuContainer,
-    transitionProgress: shareOpenedProgress,
+    progressSpring: shareOpenedProgress,
     theme: viewerTheme
-  }, shareOpenedProgress > 0 ? /*#__PURE__*/React__default["default"].createElement(ViewerMenuShare, {
+  }, draggingShare || shareOpened ? /*#__PURE__*/React__default["default"].createElement(ViewerMenuShare, {
     viewerTheme: viewerTheme,
     className: styles$6.menuShare,
     title: title,
@@ -1693,9 +1708,9 @@ var ViewerMenu = function ViewerMenu(_ref) {
     onClose: onCloseShare
   }) : null), /*#__PURE__*/React__default["default"].createElement(ViewerMenuContainer, {
     className: styles$6.menuContainer,
-    transitionProgress: menuOpenedProgress,
+    progressSpring: menuOpenedProgress,
     theme: viewerTheme
-  }, menuOpenedProgress > 0 ? /*#__PURE__*/React__default["default"].createElement(ViewerMenuPreview, {
+  }, draggingMenu || menuOpened ? /*#__PURE__*/React__default["default"].createElement(ViewerMenuPreview, {
     viewerTheme: viewerTheme,
     className: styles$6.menuPreview,
     screenSize: screenSize,
@@ -1707,6 +1722,7 @@ var ViewerMenu = function ViewerMenu(_ref) {
     onShare: onShare,
     onClickScreen: onClickScreen,
     onClose: onCloseMenu,
+    scrollDisabled: draggingMenu,
     toggleFullscreen: toggleFullscreen,
     fullscreenActive: fullscreenActive,
     fullscreenEnabled: fullscreenEnabled
@@ -1715,6 +1731,7 @@ var ViewerMenu = function ViewerMenu(_ref) {
 
 ViewerMenu.propTypes = propTypes$9;
 ViewerMenu.defaultProps = defaultProps$9;
+var ViewerMenu$1 = /*#__PURE__*/React__default["default"].memo(ViewerMenu);
 
 var styles$5 = {"container":"micromag-viewer-screen-container","navigationHint":"micromag-viewer-screen-navigationHint"};
 
@@ -2789,34 +2806,48 @@ var Viewer = function Viewer(_ref) {
     springParams: springParams
   }),
       isDragging = _useDragProgress.dragging,
-      screenIndexProgress = _useDragProgress.progress,
+      progressSpring = _useDragProgress.progress,
       dragContentBind = _useDragProgress.bind;
 
-  var getScreenStylesByIndex = function getScreenStylesByIndex(index, progress) {
+  var getScreenStylesByIndex = function getScreenStylesByIndex(index, spring) {
     if (transitionType === 'stack') {
-      var _t = index - progress;
-
-      var _clamped = Math.min(1, Math.max(0, _t));
-
-      var invert = Math.min(1, Math.max(0, -_t));
-      var opacity = Math.max(0, 1 - 0.75 * invert + (_t + 1)); // just hide other screens
-
-      if (Math.abs(_t) > neighborScreensActive) return {
-        opacity: 0
-      };
       return {
-        opacity: opacity,
-        transform: "translateX(".concat(_clamped * 100, "%) scale(").concat(1 - 0.2 * invert, ")"),
-        boxShadow: "0 0 ".concat(4 * (1 - _clamped), "rem ").concat(-0.5 * (1 - _clamped), "rem black"),
-        zIndex: index
+        zIndex: index,
+        opacity: spring.to(function (progress) {
+          var t = index - progress;
+          var invert = Math.min(1, Math.max(0, -t));
+          if (Math.abs(t) > neighborScreensActive) return 0;
+          return Math.max(0, 1 - 0.75 * invert + (t + 1));
+        }),
+        transform: spring.to(function (progress) {
+          var t = index - progress;
+          var clamped = Math.min(1, Math.max(0, t));
+          var invert = Math.min(1, Math.max(0, -t));
+          if (Math.abs(t) > neighborScreensActive) return 'translateX(100%)';
+          return "translateX(".concat(clamped * 100, "%) scale(").concat(1 - 0.2 * invert, ")");
+        }),
+        boxShadow: spring.to(function (progress) {
+          var t = index - progress;
+          if (Math.abs(t) > neighborScreensActive) return null;
+          var clamped = Math.min(1, Math.max(0, t));
+          return "0 0 ".concat(4 * (1 - clamped), "rem ").concat(-0.5 * (1 - clamped), "rem black");
+        })
       };
     }
 
-    var t = index - progress;
-    var clamped = Math.min(1, Math.max(0, Math.abs(t)));
     return {
-      opacity: 1 - 0.75 * clamped,
-      transform: "translateX(".concat(t * neighborScreenOffset, "%) scale(").concat(1 - (1 - neighborScreenScale) * clamped, ")"),
+      opacity: spring.to(function (progress) {
+        var t = index - progress;
+        if (Math.abs(t) > neighborScreensActive) return 0;
+        var clamped = Math.min(1, Math.max(0, Math.abs(t)));
+        return 1 - 0.75 * clamped;
+      }),
+      transform: spring.to(function (progress) {
+        var t = index - progress;
+        if (Math.abs(t) > neighborScreensActive) return "translate(100%)";
+        var clamped = Math.min(1, Math.max(0, Math.abs(t)));
+        return "translateX(".concat(t * neighborScreenOffset, "%) scale(").concat(1 - (1 - neighborScreenScale) * clamped, ")");
+      }),
       zIndex: screensCount - index
     };
   };
@@ -2902,7 +2933,7 @@ var Viewer = function Viewer(_ref) {
     }), (_ref15 = {}, _defineProperty__default["default"](_ref15, styles$6.landscape, landscape), _defineProperty__default["default"](_ref15, styles$6.withoutGestures, withoutGestures), _defineProperty__default["default"](_ref15, styles$6.hideMenu, !menuVisible), _defineProperty__default["default"](_ref15, styles$6.fadeMenu, playing && playbackControls && !playbackcontrolsVisible), _defineProperty__default["default"](_ref15, styles$6.ready, ready || withoutScreensTransforms), _defineProperty__default["default"](_ref15, styles$6.hasInteracted, hasInteracted), _defineProperty__default["default"](_ref15, styles$6.isDragging, isDragging), _defineProperty__default["default"](_ref15, className, className), _ref15)]),
     ref: containerRef,
     onContextMenu: onContextMenu
-  }, !withoutMenu ? /*#__PURE__*/React__default["default"].createElement(ViewerMenu, {
+  }, !withoutMenu ? /*#__PURE__*/React__default["default"].createElement(ViewerMenu$1, {
     story: parsedStory,
     currentScreenIndex: screenIndex,
     withShadow: menuOverScreen && !withoutMenuShadow,
@@ -2937,8 +2968,8 @@ var Viewer = function Viewer(_ref) {
   }, screens.map(function (screen, i) {
     var current = screenIndex === i;
     var active = i >= screenIndex - neighborScreensActive && i <= screenIndex + neighborScreensActive;
-    var screenStyles = getScreenStylesByIndex(i, screenIndexProgress);
-    return /*#__PURE__*/React__default["default"].createElement("div", {
+    var screenStyles = getScreenStylesByIndex(i, progressSpring);
+    return /*#__PURE__*/React__default["default"].createElement(web.animated.div, {
       key: "screen-viewer-".concat(screen.id || '', "-").concat(i + 1),
       style: screenStyles,
       className: classNames__default["default"]([styles$6.screenContainer, _defineProperty__default["default"]({}, styles$6.current, current)])