@bendyline/squisq-react 2.11.10 → 2.11.12

package/dist/styles/index.css

@@ -7383,6 +7383,157 @@
     transform: translateY(0);
   }
 }
+@keyframes layerSlideInLeft {
+  from {
+    opacity: 0;
+    transform: translateX(-40px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+@keyframes layerSlideInRight {
+  from {
+    opacity: 0;
+    transform: translateX(40px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+@keyframes layerSlideInTop {
+  from {
+    opacity: 0;
+    transform: translateY(-40px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+@keyframes layerSlideInBottom {
+  from {
+    opacity: 0;
+    transform: translateY(40px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+@keyframes growIn {
+  from {
+    opacity: 0;
+    transform: scale(0.6);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+@keyframes growX {
+  from {
+    transform: scaleX(0);
+  }
+  to {
+    transform: scaleX(1);
+  }
+}
+@keyframes growY {
+  from {
+    transform: scaleY(0);
+  }
+  to {
+    transform: scaleY(1);
+  }
+}
+@keyframes drawOn {
+  from {
+    stroke-dashoffset: 1;
+  }
+  to {
+    stroke-dashoffset: 0;
+  }
+}
+@keyframes drawOnMarkers {
+  0%, 82% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+@keyframes revealFromLeft {
+  from {
+    clip-path: inset(0 100% 0 0);
+  }
+  to {
+    clip-path: inset(0 0 0 0);
+  }
+}
+@keyframes revealFromRight {
+  from {
+    clip-path: inset(0 0 0 100%);
+  }
+  to {
+    clip-path: inset(0 0 0 0);
+  }
+}
+@keyframes revealFromTop {
+  from {
+    clip-path: inset(0 0 100% 0);
+  }
+  to {
+    clip-path: inset(0 0 0 0);
+  }
+}
+@keyframes revealFromBottom {
+  from {
+    clip-path: inset(100% 0 0 0);
+  }
+  to {
+    clip-path: inset(0 0 0 0);
+  }
+}
+@keyframes revealIris {
+  from {
+    clip-path: circle(0% at 50% 50%);
+  }
+  to {
+    clip-path: circle(75% at 50% 50%);
+  }
+}
+@keyframes wordIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@keyframes drift {
+  0% {
+    transform: translate(0, 0);
+  }
+  50% {
+    transform: translate(var(--drift-x, 12px), var(--drift-y, -10px));
+  }
+  100% {
+    transform: translate(0, 0);
+  }
+}
+@keyframes tween {
+  from {
+    opacity: var(--tween-from-opacity, 1);
+    transform: var(--tween-from-transform, none);
+  }
+  to {
+    opacity: var(--tween-to-opacity, 1);
+    transform: var(--tween-to-transform, none);
+  }
+}
 @keyframes zoomIn {
   from {
     transform: scale(0.9);
@@ -9205,48 +9356,119 @@
   animation: none;
 }
 .anim-fadeIn {
-  animation: fadeIn var(--anim-duration, 1s) var(--anim-easing, ease-out) var(--anim-delay, 0s) forwards;
+  animation: fadeIn var(--anim-duration, 1s) var(--anim-easing, ease-out) var(--anim-delay, 0s) both;
 }
 .anim-fadeOut {
-  animation: fadeOut var(--anim-duration, 1s) var(--anim-easing, ease-out) var(--anim-delay, 0s) forwards;
+  animation: fadeOut var(--anim-duration, 1s) var(--anim-easing, ease-out) var(--anim-delay, 0s) both;
 }
 .anim-fadeInUp {
-  animation: fadeInUp var(--anim-duration, 0.6s) var(--anim-easing, ease-out) var(--anim-delay, 0s) forwards;
+  animation: fadeInUp var(--anim-duration, 0.6s) var(--anim-easing, ease-out) var(--anim-delay, 0s) both;
 }
 .anim-slowZoom-in {
-  animation: slowZoomIn var(--anim-duration, 8s) var(--anim-easing, linear) var(--anim-delay, 0s) forwards;
+  animation: slowZoomIn var(--anim-duration, 8s) var(--anim-easing, linear) var(--anim-delay, 0s) both;
 }
 .anim-slowZoom-out {
-  animation: slowZoomOut var(--anim-duration, 8s) var(--anim-easing, linear) var(--anim-delay, 0s) forwards;
+  animation: slowZoomOut var(--anim-duration, 8s) var(--anim-easing, linear) var(--anim-delay, 0s) both;
 }
 .anim-slowZoom-panLeft {
-  animation: slowZoomCombinedPanLeft var(--anim-duration, 8s) var(--anim-easing, linear) var(--anim-delay, 0s) forwards;
+  animation: slowZoomCombinedPanLeft var(--anim-duration, 8s) var(--anim-easing, linear) var(--anim-delay, 0s) both;
 }
 .anim-slowZoom-panRight {
-  animation: slowZoomCombinedPanRight var(--anim-duration, 8s) var(--anim-easing, linear) var(--anim-delay, 0s) forwards;
+  animation: slowZoomCombinedPanRight var(--anim-duration, 8s) var(--anim-easing, linear) var(--anim-delay, 0s) both;
 }
 .anim-zoomIn {
-  animation: zoomIn var(--anim-duration, 0.5s) var(--anim-easing, ease-out) var(--anim-delay, 0s) forwards;
+  animation: zoomIn var(--anim-duration, 0.5s) var(--anim-easing, ease-out) var(--anim-delay, 0s) both;
 }
 .anim-zoomOut {
-  animation: zoomOut var(--anim-duration, 0.5s) var(--anim-easing, ease-out) var(--anim-delay, 0s) forwards;
+  animation: zoomOut var(--anim-duration, 0.5s) var(--anim-easing, ease-out) var(--anim-delay, 0s) both;
 }
 .anim-panLeft {
-  animation: panLeft var(--anim-duration, 8s) var(--anim-easing, linear) var(--anim-delay, 0s) forwards;
+  animation: panLeft var(--anim-duration, 8s) var(--anim-easing, linear) var(--anim-delay, 0s) both;
 }
 .anim-panRight {
-  animation: panRight var(--anim-duration, 8s) var(--anim-easing, linear) var(--anim-delay, 0s) forwards;
+  animation: panRight var(--anim-duration, 8s) var(--anim-easing, linear) var(--anim-delay, 0s) both;
 }
 .squisq-image--portrait-pan-right {
-  animation: portraitCoverPanRight var(--portrait-pan-duration, 12s) var(--portrait-pan-easing, ease-in-out) var(--portrait-pan-delay, 0s) forwards;
+  animation: portraitCoverPanRight var(--portrait-pan-duration, 12s) var(--portrait-pan-easing, ease-in-out) var(--portrait-pan-delay, 0s) both;
   will-change: object-position;
 }
 .squisq-image--portrait-pan-left {
-  animation: portraitCoverPanLeft var(--portrait-pan-duration, 12s) var(--portrait-pan-easing, ease-in-out) var(--portrait-pan-delay, 0s) forwards;
+  animation: portraitCoverPanLeft var(--portrait-pan-duration, 12s) var(--portrait-pan-easing, ease-in-out) var(--portrait-pan-delay, 0s) both;
   will-change: object-position;
 }
 .anim-typewriter {
-  animation: typewriter var(--anim-duration, 2s) var(--anim-easing, steps(40, end)) var(--anim-delay, 0s) forwards;
+  animation: typewriter var(--anim-duration, 2s) var(--anim-easing, steps(40, end)) var(--anim-delay, 0s) both;
+}
+.block-layer.anim-zoomIn,
+.block-layer.anim-zoomOut,
+.block-layer.anim-grow,
+.block-layer.anim-grow-x,
+.block-layer.anim-grow-y,
+.block-layer.anim-tween,
+.block-layer.anim-drift {
+  transform-box: fill-box;
+  transform-origin: var(--anim-origin, center center);
+}
+.anim-slideIn-left {
+  animation: layerSlideInLeft var(--anim-duration, 0.7s) var(--anim-easing, cubic-bezier(0.22, 1, 0.36, 1)) var(--anim-delay, 0s) both;
+}
+.anim-slideIn-right {
+  animation: layerSlideInRight var(--anim-duration, 0.7s) var(--anim-easing, cubic-bezier(0.22, 1, 0.36, 1)) var(--anim-delay, 0s) both;
+}
+.anim-slideIn-top {
+  animation: layerSlideInTop var(--anim-duration, 0.7s) var(--anim-easing, cubic-bezier(0.22, 1, 0.36, 1)) var(--anim-delay, 0s) both;
+}
+.anim-slideIn-bottom {
+  animation: layerSlideInBottom var(--anim-duration, 0.7s) var(--anim-easing, cubic-bezier(0.22, 1, 0.36, 1)) var(--anim-delay, 0s) both;
+}
+.anim-grow {
+  animation: growIn var(--anim-duration, 1s) var(--anim-easing, cubic-bezier(0.22, 1, 0.36, 1)) var(--anim-delay, 0s) both;
+}
+.anim-grow-x {
+  animation: growX var(--anim-duration, 1s) var(--anim-easing, cubic-bezier(0.22, 1, 0.36, 1)) var(--anim-delay, 0s) both;
+}
+.anim-grow-y {
+  animation: growY var(--anim-duration, 1s) var(--anim-easing, cubic-bezier(0.22, 1, 0.36, 1)) var(--anim-delay, 0s) both;
+}
+.anim-drawOn [data-squisq-draw=stroke] {
+  stroke-dasharray: 1;
+  animation: drawOn var(--anim-duration, 1s) var(--anim-easing, ease-in-out) var(--anim-delay, 0s) both;
+}
+.anim-drawOn [data-squisq-draw=markers] {
+  animation: drawOnMarkers var(--anim-duration, 1s) linear var(--anim-delay, 0s) both;
+}
+.anim-reveal-left {
+  animation: revealFromLeft var(--anim-duration, 0.7s) var(--anim-easing, cubic-bezier(0.22, 1, 0.36, 1)) var(--anim-delay, 0s) both;
+}
+.anim-reveal-right {
+  animation: revealFromRight var(--anim-duration, 0.7s) var(--anim-easing, cubic-bezier(0.22, 1, 0.36, 1)) var(--anim-delay, 0s) both;
+}
+.anim-reveal-top {
+  animation: revealFromTop var(--anim-duration, 0.7s) var(--anim-easing, cubic-bezier(0.22, 1, 0.36, 1)) var(--anim-delay, 0s) both;
+}
+.anim-reveal-bottom {
+  animation: revealFromBottom var(--anim-duration, 0.7s) var(--anim-easing, cubic-bezier(0.22, 1, 0.36, 1)) var(--anim-delay, 0s) both;
+}
+.anim-reveal-iris {
+  animation: revealIris var(--anim-duration, 0.9s) var(--anim-easing, cubic-bezier(0.22, 1, 0.36, 1)) var(--anim-delay, 0s) both;
+}
+.anim-wordReveal .anim-word {
+  animation: wordIn var(--anim-duration, 0.4s) var(--anim-easing, ease-out) var(--anim-delay, 0s) both;
+}
+.anim-countUp {
+  animation: fadeIn 0.3s ease-out var(--anim-delay, 0s) both;
+}
+.anim-drift {
+  animation: drift var(--anim-duration, 12s) ease-in-out var(--anim-delay, 0s) infinite;
+}
+.anim-tween {
+  animation: tween var(--anim-duration, 1s) var(--anim-easing, ease-in-out) var(--anim-delay, 0s) both;
+}
+.doc-player--render-mode,
+.doc-player--render-mode *,
+.doc-player--render-mode *::before,
+.doc-player--render-mode *::after {
+  transition: none !important;
 }
 .doc-player {
   position: relative;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bendyline/squisq-react",
-  "version": "2.11.10",
+  "version": "2.11.12",
   "description": "React component library for doc playback, block rendering, and media layers",
   "license": "MIT",
   "author": "Bendyline",
@@ -91,7 +91,7 @@
     "react-dom": "^18.0.0 || ^19.0.0"
   },
   "dependencies": {
-    "@bendyline/squisq": "2.11.9",
+    "@bendyline/squisq": "2.11.10",
     "@fortawesome/fontawesome-free": "7.2.0",
     "mermaid": "11.16.1"
   },