@breadstone/mosaik-elements-foundation 0.0.231 → 0.0.233

package/Animations/Presets/ElasticSnap.js

@@ -0,0 +1,738 @@
+// #region Imports
+import { animation } from '../animation';
+// #endregion
+// -----------------------------------------------------------------------
+// Elastic Snap presets - TypeScript equivalents of all Joy theme
+// @keyframes animations. Asymmetric timing: slow tension build
+// (55-65%), fast snap to rest (18-25%), dead time / settle (15-20%).
+// One overshoot max. Material decelerate easing.
+// Use the AnimationView playground to preview.
+// -----------------------------------------------------------------------
+/**
+ * Material Decelerate easing - used by all Elastic Snap presets.
+ *
+ * @internal
+ */
+const ELASTIC_EASING = 'cubic-bezier(0.4, 0, 0.2, 1)';
+// -----------------------------------------------------------------------
+// 1. Elastic Enter - element appears with tension build → snap to final
+// -----------------------------------------------------------------------
+/**
+ * Elastic enter - element scales in with slow tension build then fast
+ * snap to rest. One slight overshoot, then settle.
+ */
+const elasticEnter = animation([
+    {
+        offset: 0,
+        transform: 'scale(0.2)',
+        opacity: '0'
+    },
+    {
+        offset: 0.12,
+        transform: 'scale(0.35)',
+        opacity: '0.6'
+    },
+    {
+        offset: 0.25,
+        transform: 'scale(0.55)',
+        opacity: '0.85'
+    },
+    {
+        offset: 0.40,
+        transform: 'scale(0.75)',
+        opacity: '0.95'
+    },
+    {
+        offset: 0.55,
+        transform: 'scale(0.90)',
+        opacity: '1'
+    },
+    {
+        offset: 0.65,
+        transform: 'scale(1.06)'
+    },
+    {
+        offset: 0.75,
+        transform: 'scale(0.98)'
+    },
+    {
+        offset: 0.85,
+        transform: 'scale(1)'
+    },
+    {
+        offset: 1,
+        transform: 'scale(1)',
+        opacity: '1'
+    }
+], {
+    duration: 600,
+    easing: ELASTIC_EASING,
+    fill: 'forwards'
+});
+// -----------------------------------------------------------------------
+// 2. Elastic Exit - element scales out with tension → snap away
+// -----------------------------------------------------------------------
+/**
+ * Elastic exit - slow scale-up tension then fast snap to invisible.
+ */
+const elasticExit = animation([
+    {
+        offset: 0,
+        transform: 'scale(1)',
+        opacity: '1'
+    },
+    {
+        offset: 0.15,
+        transform: 'scale(1.04)',
+        opacity: '1'
+    },
+    {
+        offset: 0.35,
+        transform: 'scale(1.10)',
+        opacity: '0.9'
+    },
+    {
+        offset: 0.55,
+        transform: 'scale(1.12)',
+        opacity: '0.8'
+    },
+    {
+        offset: 0.68,
+        transform: 'scale(0.6)',
+        opacity: '0.3'
+    },
+    {
+        offset: 0.78,
+        transform: 'scale(0.2)',
+        opacity: '0'
+    },
+    {
+        offset: 1,
+        transform: 'scale(0.2)',
+        opacity: '0'
+    }
+], {
+    duration: 600,
+    easing: ELASTIC_EASING,
+    fill: 'forwards'
+});
+// -----------------------------------------------------------------------
+// 3. Elastic Toggle - switch/knob snap-back from deformed state
+// -----------------------------------------------------------------------
+/**
+ * Elastic toggle - starts at peak deformation, fast snap to rest,
+ * one tiny overshoot. Mirrors: `elastic-switch-snap` (CheckmarkElement).
+ */
+const elasticToggle = animation([
+    {
+        offset: 0,
+        transform: 'scaleX(1.30) scaleY(0.78)'
+    },
+    {
+        offset: 0.20,
+        transform: 'scaleX(1.05) scaleY(0.96)'
+    },
+    {
+        offset: 0.35,
+        transform: 'scaleX(0.97) scaleY(1.02)'
+    },
+    {
+        offset: 0.50,
+        transform: 'scaleX(1.01) scaleY(0.99)'
+    },
+    {
+        offset: 0.65,
+        transform: 'scale(1)'
+    },
+    {
+        offset: 1,
+        transform: 'scale(1)'
+    }
+], {
+    duration: 600,
+    easing: ELASTIC_EASING,
+    fill: 'forwards'
+});
+// -----------------------------------------------------------------------
+// 4. Elastic Press - tactile :active feedback with tension
+// -----------------------------------------------------------------------
+/**
+ * Elastic press - slow stretch then fast snap back.
+ */
+const elasticPress = animation([
+    {
+        offset: 0,
+        transform: 'scale(1)'
+    },
+    {
+        offset: 0.15,
+        transform: 'scaleX(1.08) scaleY(0.94)'
+    },
+    {
+        offset: 0.35,
+        transform: 'scaleX(1.18) scaleY(0.86)'
+    },
+    {
+        offset: 0.55,
+        transform: 'scaleX(1.22) scaleY(0.83)'
+    },
+    {
+        offset: 0.68,
+        transform: 'scaleX(1.02) scaleY(0.99)'
+    },
+    {
+        offset: 0.78,
+        transform: 'scaleX(0.98) scaleY(1.01)'
+    },
+    {
+        offset: 0.88,
+        transform: 'scale(1)'
+    },
+    {
+        offset: 1,
+        transform: 'scale(1)'
+    }
+], {
+    duration: 200,
+    easing: ELASTIC_EASING,
+    fill: 'forwards'
+});
+/**
+ * Elastic press vertical - slow vertical stretch then fast snap back.
+ */
+const elasticPressVertical = animation([
+    {
+        offset: 0,
+        transform: 'scale(1)'
+    },
+    {
+        offset: 0.15,
+        transform: 'scaleX(0.94) scaleY(1.08)'
+    },
+    {
+        offset: 0.35,
+        transform: 'scaleX(0.86) scaleY(1.18)'
+    },
+    {
+        offset: 0.55,
+        transform: 'scaleX(0.83) scaleY(1.22)'
+    },
+    {
+        offset: 0.68,
+        transform: 'scaleX(0.99) scaleY(1.02)'
+    },
+    {
+        offset: 0.78,
+        transform: 'scaleX(1.01) scaleY(0.98)'
+    },
+    {
+        offset: 0.88,
+        transform: 'scale(1)'
+    },
+    {
+        offset: 1,
+        transform: 'scale(1)'
+    }
+], {
+    duration: 200,
+    easing: ELASTIC_EASING,
+    fill: 'forwards'
+});
+// -----------------------------------------------------------------------
+// 5. Elastic Digit Up/Down - per-digit counter with tension
+// -----------------------------------------------------------------------
+/**
+ * Elastic digit up - slow stretch tall (tension), fast snap back.
+ * Mirrors: `elastic-digit-up` (NumberCounterElement).
+ */
+const elasticDigitUp = animation([
+    {
+        offset: 0,
+        transform: 'scaleX(1) scaleY(1)'
+    },
+    {
+        offset: 0.15,
+        transform: 'scaleX(0.92) scaleY(1.08)'
+    },
+    {
+        offset: 0.30,
+        transform: 'scaleX(0.85) scaleY(1.18)'
+    },
+    {
+        offset: 0.45,
+        transform: 'scaleX(0.80) scaleY(1.25)'
+    },
+    {
+        offset: 0.55,
+        transform: 'scaleX(0.95) scaleY(1.05)'
+    },
+    {
+        offset: 0.65,
+        transform: 'scaleX(1.02) scaleY(0.98)'
+    },
+    {
+        offset: 0.78,
+        transform: 'scaleX(1) scaleY(1)'
+    },
+    {
+        offset: 1,
+        transform: 'scaleX(1) scaleY(1)'
+    }
+], {
+    duration: 200,
+    easing: ELASTIC_EASING,
+    fill: 'forwards'
+});
+/**
+ * Elastic digit down - slow stretch wide (tension), fast snap back.
+ * Mirrors: `elastic-digit-down` (NumberCounterElement).
+ */
+const elasticDigitDown = animation([
+    {
+        offset: 0,
+        transform: 'scaleX(1) scaleY(1)'
+    },
+    {
+        offset: 0.15,
+        transform: 'scaleX(1.08) scaleY(0.92)'
+    },
+    {
+        offset: 0.30,
+        transform: 'scaleX(1.18) scaleY(0.85)'
+    },
+    {
+        offset: 0.45,
+        transform: 'scaleX(1.25) scaleY(0.80)'
+    },
+    {
+        offset: 0.55,
+        transform: 'scaleX(1.05) scaleY(0.95)'
+    },
+    {
+        offset: 0.65,
+        transform: 'scaleX(0.98) scaleY(1.02)'
+    },
+    {
+        offset: 0.78,
+        transform: 'scaleX(1) scaleY(1)'
+    },
+    {
+        offset: 1,
+        transform: 'scaleX(1) scaleY(1)'
+    }
+], {
+    duration: 200,
+    easing: ELASTIC_EASING,
+    fill: 'forwards'
+});
+// -----------------------------------------------------------------------
+// 6. Elastic Sweep - indeterminate progress bar
+// -----------------------------------------------------------------------
+/**
+ * Elastic sweep - fill stretches wide as it enters (slow tension),
+ * snaps narrow as it exits (fast snap), then dead time.
+ * Mirrors: `elastic-indeterminate` (ProgressBarElement).
+ */
+const elasticSweep = animation([
+    {
+        offset: 0,
+        transform: 'translateX(-100%) scaleX(0.02)'
+    },
+    {
+        offset: 0.08,
+        transform: 'translateX(-72%) scaleX(0.08)'
+    },
+    {
+        offset: 0.16,
+        transform: 'translateX(-38%) scaleX(0.22)'
+    },
+    {
+        offset: 0.24,
+        transform: 'translateX(-10%) scaleX(0.42)'
+    },
+    {
+        offset: 0.28,
+        transform: 'translateX(-2%) scaleX(0.50)'
+    },
+    {
+        offset: 0.32,
+        transform: 'translateX(4%) scaleX(0.54)'
+    },
+    {
+        offset: 0.40,
+        transform: 'translateX(16%) scaleX(0.46)'
+    },
+    {
+        offset: 0.48,
+        transform: 'translateX(28%) scaleX(0.30)'
+    },
+    {
+        offset: 0.56,
+        transform: 'translateX(42%) scaleX(0.16)'
+    },
+    {
+        offset: 0.64,
+        transform: 'translateX(58%) scaleX(0.09)'
+    },
+    {
+        offset: 0.72,
+        transform: 'translateX(74%) scaleX(0.05)'
+    },
+    {
+        offset: 0.80,
+        transform: 'translateX(90%) scaleX(0.03)'
+    },
+    {
+        offset: 0.88,
+        transform: 'translateX(102%) scaleX(0.02)'
+    },
+    {
+        offset: 1,
+        transform: 'translateX(105%) scaleX(0.02)'
+    }
+], {
+    duration: 1500,
+    easing: ELASTIC_EASING,
+    fill: 'forwards'
+});
+// -----------------------------------------------------------------------
+// 7. Elastic Shimmer - skeleton loading sweep
+// -----------------------------------------------------------------------
+/**
+ * Elastic shimmer - slow stretch across, fast narrow exit.
+ * Mirrors: `elastic-shimmer` (SkeletonElement).
+ */
+const elasticShimmer = animation([
+    {
+        offset: 0,
+        transform: 'translateX(-50%) scaleX(0.8)'
+    },
+    {
+        offset: 0.12,
+        transform: 'translateX(-40%) scaleX(0.9)'
+    },
+    {
+        offset: 0.25,
+        transform: 'translateX(-28%) scaleX(1.0)'
+    },
+    {
+        offset: 0.38,
+        transform: 'translateX(-15%) scaleX(1.10)'
+    },
+    {
+        offset: 0.48,
+        transform: 'translateX(-5%) scaleX(1.15)'
+    },
+    {
+        offset: 0.55,
+        transform: 'translateX(5%) scaleX(1.12)'
+    },
+    {
+        offset: 0.62,
+        transform: 'translateX(18%) scaleX(1.0)'
+    },
+    {
+        offset: 0.70,
+        transform: 'translateX(30%) scaleX(0.85)'
+    },
+    {
+        offset: 0.78,
+        transform: 'translateX(42%) scaleX(0.8)'
+    },
+    {
+        offset: 0.85,
+        transform: 'translateX(50%) scaleX(0.8)'
+    },
+    {
+        offset: 1,
+        transform: 'translateX(50%) scaleX(0.8)'
+    }
+], {
+    duration: 1800,
+    easing: ELASTIC_EASING,
+    fill: 'forwards'
+});
+// -----------------------------------------------------------------------
+// 8. Elastic Breathe - idle tension pulse
+// -----------------------------------------------------------------------
+/**
+ * Elastic breathe - gentle scale cycle: slow grow (tension),
+ * fast shrink (snap), settle. For typing indicators, idle states.
+ */
+const elasticBreathe = animation([
+    {
+        offset: 0,
+        transform: 'translateY(0) scale(1)'
+    },
+    {
+        offset: 0.15,
+        transform: 'translateY(-1px) scaleX(0.92) scaleY(1.08)'
+    },
+    {
+        offset: 0.30,
+        transform: 'translateY(-3px) scaleX(0.85) scaleY(1.18)'
+    },
+    {
+        offset: 0.45,
+        transform: 'translateY(-5px) scaleX(0.82) scaleY(1.22)'
+    },
+    {
+        offset: 0.55,
+        transform: 'translateY(-6px) scaleX(0.80) scaleY(1.25)'
+    },
+    {
+        offset: 0.68,
+        transform: 'translateY(-1px) scaleX(0.98) scaleY(1.02)'
+    },
+    {
+        offset: 0.78,
+        transform: 'translateY(0) scaleX(1.02) scaleY(0.98)'
+    },
+    {
+        offset: 0.88,
+        transform: 'translateY(0) scale(1)'
+    },
+    {
+        offset: 1,
+        transform: 'translateY(0) scale(1)'
+    }
+], {
+    duration: 1800,
+    easing: ELASTIC_EASING,
+    fill: 'forwards'
+});
+// -----------------------------------------------------------------------
+// 9. Elastic Tile Expand / Contract - tile management
+// -----------------------------------------------------------------------
+/**
+ * Elastic tile expand - slow scale-up with tension, fast settle.
+ * Mirrors: tile maximize animation.
+ */
+const elasticTileExpand = animation([
+    {
+        offset: 0,
+        transform: 'scale(0.15)',
+        opacity: '0'
+    },
+    {
+        offset: 0.12,
+        transform: 'scale(0.30)',
+        opacity: '0.5'
+    },
+    {
+        offset: 0.25,
+        transform: 'scale(0.50)',
+        opacity: '0.75'
+    },
+    {
+        offset: 0.40,
+        transform: 'scale(0.72)',
+        opacity: '0.9'
+    },
+    {
+        offset: 0.55,
+        transform: 'scale(0.90)',
+        opacity: '1'
+    },
+    {
+        offset: 0.65,
+        transform: 'scale(1.05)'
+    },
+    {
+        offset: 0.75,
+        transform: 'scale(0.98)'
+    },
+    {
+        offset: 0.85,
+        transform: 'scale(1)'
+    },
+    {
+        offset: 1,
+        transform: 'scale(1)',
+        opacity: '1'
+    }
+], {
+    duration: 600,
+    easing: ELASTIC_EASING,
+    fill: 'forwards'
+});
+/**
+ * Elastic tile contract - slow tension pull then fast snap down.
+ */
+const elasticTileContract = animation([
+    {
+        offset: 0,
+        transform: 'scale(1.5)',
+        opacity: '0'
+    },
+    {
+        offset: 0.12,
+        transform: 'scale(1.35)',
+        opacity: '0.5'
+    },
+    {
+        offset: 0.25,
+        transform: 'scale(1.20)',
+        opacity: '0.75'
+    },
+    {
+        offset: 0.40,
+        transform: 'scale(1.10)',
+        opacity: '0.9'
+    },
+    {
+        offset: 0.55,
+        transform: 'scale(1.04)',
+        opacity: '1'
+    },
+    {
+        offset: 0.65,
+        transform: 'scale(0.97)'
+    },
+    {
+        offset: 0.75,
+        transform: 'scale(1.01)'
+    },
+    {
+        offset: 0.85,
+        transform: 'scale(1)'
+    },
+    {
+        offset: 1,
+        transform: 'scale(1)',
+        opacity: '1'
+    }
+], {
+    duration: 600,
+    easing: ELASTIC_EASING,
+    fill: 'forwards'
+});
+// -----------------------------------------------------------------------
+// 10. Elastic Focus Grow / Shrink - focus ring
+// -----------------------------------------------------------------------
+/**
+ * Elastic focus grow - slow outline build with overshoot, fast snap
+ * to final width. Mirrors: `elastic-outward-grow` (FocusRingElement).
+ */
+const elasticFocusGrow = animation([
+    {
+        offset: 0,
+        outlineWidth: '0px'
+    },
+    {
+        offset: 0.20,
+        outlineWidth: '1.2px'
+    },
+    {
+        offset: 0.40,
+        outlineWidth: '2.4px'
+    },
+    {
+        offset: 0.55,
+        outlineWidth: '3.4px'
+    },
+    {
+        offset: 0.65,
+        outlineWidth: '4.4px'
+    },
+    {
+        offset: 0.75,
+        outlineWidth: '3.8px'
+    },
+    {
+        offset: 0.85,
+        outlineWidth: '4px'
+    },
+    {
+        offset: 1,
+        outlineWidth: '4px'
+    }
+], {
+    duration: 400,
+    easing: ELASTIC_EASING,
+    fill: 'forwards'
+});
+/**
+ * Elastic focus shrink - tiny tension bump then fast retract.
+ * Mirrors: `elastic-outward-shrink` (FocusRingElement).
+ */
+const elasticFocusShrink = animation([
+    {
+        offset: 0,
+        outlineWidth: '4px'
+    },
+    {
+        offset: 0.10,
+        outlineWidth: '4.2px'
+    },
+    {
+        offset: 0.30,
+        outlineWidth: '1.6px'
+    },
+    {
+        offset: 0.50,
+        outlineWidth: '0.4px'
+    },
+    {
+        offset: 0.65,
+        outlineWidth: '0px'
+    },
+    {
+        offset: 1,
+        outlineWidth: '0px'
+    }
+], {
+    duration: 400,
+    easing: ELASTIC_EASING,
+    fill: 'forwards'
+});
+// -----------------------------------------------------------------------
+// 11. Elastic Ink Settle - ink bar settle after tab change
+// -----------------------------------------------------------------------
+/**
+ * Elastic ink settle - slow release from deformed state, fast snap
+ * to rest. Mirrors: `elastic-ink-settle-a` (InkBarElement).
+ */
+const elasticInkSettle = animation([
+    {
+        offset: 0,
+        transform: 'scaleX(1.20) scaleY(0.65)'
+    },
+    {
+        offset: 0.20,
+        transform: 'scaleX(1.10) scaleY(0.80)'
+    },
+    {
+        offset: 0.40,
+        transform: 'scaleX(1.04) scaleY(0.92)'
+    },
+    {
+        offset: 0.55,
+        transform: 'scaleX(1.01) scaleY(0.98)'
+    },
+    {
+        offset: 0.65,
+        transform: 'scaleX(0.98) scaleY(1.01)'
+    },
+    {
+        offset: 0.75,
+        transform: 'scaleX(1.01) scaleY(1.00)'
+    },
+    {
+        offset: 0.85,
+        transform: 'scale(1)'
+    },
+    {
+        offset: 1,
+        transform: 'scale(1)'
+    }
+], {
+    duration: 400,
+    easing: ELASTIC_EASING,
+    fill: 'forwards'
+});
+// -----------------------------------------------------------------------
+// Exports
+// -----------------------------------------------------------------------
+export { elasticBreathe, elasticDigitDown, elasticDigitUp, elasticEnter, elasticExit, elasticFocusGrow, elasticFocusShrink, elasticInkSettle, elasticPress, elasticPressVertical, elasticShimmer, elasticSweep, elasticTileContract, elasticTileExpand, elasticToggle };
+//# sourceMappingURL=ElasticSnap.js.map