@rdlabo/ionic-theme-ios27 1.2.0-3 → 1.2.0-4

package/dist/sheets-of-glass/animations.js

@@ -1,322 +1,512 @@
-import { createAnimation } from '@ionic/core';
-import { getStep } from '../utils';
-export const animationRect = (element, vertical = false) => {
-    const rect = element.getBoundingClientRect();
-    return vertical
-        ? { left: rect.top, top: rect.left, right: rect.bottom, width: rect.height, height: rect.width, x: rect.y, y: rect.x }
-        : rect;
+import { getStep } from "../utils.js";
+import { createAnimation } from "@ionic/core";
+//#region src/sheets-of-glass/animations.ts
+const animationRect = (element, vertical = false) => {
+	const rect = element.getBoundingClientRect();
+	return vertical ? {
+		left: rect.top,
+		top: rect.left,
+		right: rect.bottom,
+		width: rect.height,
+		height: rect.width,
+		x: rect.y,
+		y: rect.x
+	} : rect;
 };
 const translate = (x, y, vertical) => `translate3d(${vertical ? y : x}px, ${vertical ? x : y}px, 0)`;
 const stretchTransform = (x, y, vertical) => `scale(${vertical ? y : x}, ${vertical ? x : y})`;
-const mainSize = (element, vertical) => (vertical ? element.offsetHeight : element.offsetWidth);
+const mainSize = (element, vertical) => vertical ? element.offsetHeight : element.offsetWidth;
 const axisScale = (transform, vertical) => {
-    const matrix = new DOMMatrixReadOnly(transform);
-    return vertical ? { a: matrix.d, d: matrix.a } : matrix;
+	const matrix = new DOMMatrixReadOnly(transform);
+	return vertical ? {
+		a: matrix.d,
+		d: matrix.a
+	} : matrix;
 };
-export const getScaleAnimation = (effectElement) => {
-    return createAnimation().addElement(effectElement.shadowRoot.querySelector('[part="native"]')).easing('ease-out');
+const getScaleAnimation = (effectElement) => {
+	return createAnimation().addElement(effectElement.shadowRoot.querySelector("[part=\"native\"]")).easing("ease-out");
 };
 const tabBarPressFrames = [
-    [0, 0, 0, 0, 0],
-    [0.033, 0.091, 4.26, 1.52, 0.148],
-    [0.067, 0.312, 13.28, 2.89, 0.46],
-    [0.1, 0.551, 21.99, 2.24, 0.752],
-    [0.133, 0.736, 25.94, 2.77, 0.951],
-    [0.167, 0.858, 24.35, 6.03, 1.052],
-    [0.2, 0.932, 22.72, 8.41, 1.081],
-    [0.267, 0.985, 21.55, 10.38, 1.058],
-    [0.333, 1.003, 17.89, 13.98, 1.01],
-    [0.4, 1.015, 13.54, 18.42, 1],
-    [0.467, 1.018, 11.3, 20.75, 1],
-    [0.6, 1.005, 12.36, 19.72, 1],
-    [0.733, 0.993, 14.75, 17.27, 1],
-    [0.9, 1, 16, 16, 1],
+	[
+		0,
+		0,
+		0,
+		0,
+		0
+	],
+	[
+		.033,
+		.091,
+		4.26,
+		1.52,
+		.148
+	],
+	[
+		.067,
+		.312,
+		13.28,
+		2.89,
+		.46
+	],
+	[
+		.1,
+		.551,
+		21.99,
+		2.24,
+		.752
+	],
+	[
+		.133,
+		.736,
+		25.94,
+		2.77,
+		.951
+	],
+	[
+		.167,
+		.858,
+		24.35,
+		6.03,
+		1.052
+	],
+	[
+		.2,
+		.932,
+		22.72,
+		8.41,
+		1.081
+	],
+	[
+		.267,
+		.985,
+		21.55,
+		10.38,
+		1.058
+	],
+	[
+		.333,
+		1.003,
+		17.89,
+		13.98,
+		1.01
+	],
+	[
+		.4,
+		1.015,
+		13.54,
+		18.42,
+		1
+	],
+	[
+		.467,
+		1.018,
+		11.3,
+		20.75,
+		1
+	],
+	[
+		.6,
+		1.005,
+		12.36,
+		19.72,
+		1
+	],
+	[
+		.733,
+		.993,
+		14.75,
+		17.27,
+		1
+	],
+	[
+		.9,
+		1,
+		16,
+		16,
+		1
+	]
 ];
 const tabBarTapFrames = [
-    [0, 0, 0, 0],
-    [0.033, 0.099, 4.15, 2.91],
-    [0.067, 0.333, 13.81, 5.59],
-    [0.1, 0.589, 23.77, 5.52],
-    [0.133, 0.794, 29.84, 4.24],
-    [0.167, 0.925, 29.01, 5.83],
-    [0.2, 0.992, 26.85, 7.25],
-    [0.233, 1.015, 25.83, 7.87],
-    [0.267, 1.018, 20.43, 5.56],
-    [0.3, 1.018, 12.87, 3.16],
-    [0.367, 1.024, 1.3, 2.69],
-    [0.433, 1.031, -3.98, 4.1],
-    [0.5, 1.027, -5.05, 3.89],
-    [0.6, 1.013, -2.95, 2.31],
-    [0.7, 1.003, -0.74, 0.59],
-    [0.8, 1, 0, 0],
+	[
+		0,
+		0,
+		0,
+		0
+	],
+	[
+		.033,
+		.099,
+		4.15,
+		2.91
+	],
+	[
+		.067,
+		.333,
+		13.81,
+		5.59
+	],
+	[
+		.1,
+		.589,
+		23.77,
+		5.52
+	],
+	[
+		.133,
+		.794,
+		29.84,
+		4.24
+	],
+	[
+		.167,
+		.925,
+		29.01,
+		5.83
+	],
+	[
+		.2,
+		.992,
+		26.85,
+		7.25
+	],
+	[
+		.233,
+		1.015,
+		25.83,
+		7.87
+	],
+	[
+		.267,
+		1.018,
+		20.43,
+		5.56
+	],
+	[
+		.3,
+		1.018,
+		12.87,
+		3.16
+	],
+	[
+		.367,
+		1.024,
+		1.3,
+		2.69
+	],
+	[
+		.433,
+		1.031,
+		-3.98,
+		4.1
+	],
+	[
+		.5,
+		1.027,
+		-5.05,
+		3.89
+	],
+	[
+		.6,
+		1.013,
+		-2.95,
+		2.31
+	],
+	[
+		.7,
+		1.003,
+		-.74,
+		.59
+	],
+	[
+		.8,
+		1,
+		0,
+		0
+	]
 ];
-export const createTabBarPressAnimation = (effect, from, to, bar, vertical = false) => {
-    const box = animationRect(bar, vertical);
-    const center = box.left + box.width / 2;
-    const left = center - mainSize(bar, vertical) / 2;
-    const fromBox = animationRect(from, vertical);
-    const toBox = animationRect(to, vertical);
-    const parentScale = box.width / mainSize(bar, vertical);
-    const buttonScale = axisScale(getComputedStyle(from).transform, vertical);
-    const width = fromBox.width / parentScale / buttonScale.a;
-    const height = fromBox.height / parentScale / buttonScale.d;
-    const start = (fromBox.left + fromBox.width / 2 - box.left) / parentScale;
-    const end = (toBox.left + toBox.width / 2 - box.left) / parentScale;
-    const selected = from === to;
-    const growth = vertical ? 20 / 16 : 1;
-    const frames = tabBarPressFrames.map(([time, position, extraWidth, extraHeight, expansion]) => {
-        const scale = vertical ? 1 : 1 + (14.14 / mainSize(bar, vertical)) * expansion;
-        const press = 1 - Math.exp(-18 * time) * (1 + 18 * time);
-        return {
-            offset: time / 0.9,
-            x: center + (left + start + (end - start) * position - center) * scale - width / 2,
-            sx: ((width + (selected ? 16 * press : extraWidth) * growth) * scale) / width,
-            sy: ((height + (selected ? 16 * press : extraHeight) * growth) * scale) / height,
-        };
-    });
-    const move = createAnimation()
-        .addElement(effect)
-        .beforeStyles({
-        width: `${vertical ? height : width}px`,
-        height: `${vertical ? width : height}px`,
-        display: 'block',
-        opacity: '1',
-    })
-        .keyframes(frames.map(({ offset, x }) => ({ offset, transform: translate(x, box.top + box.height / 2 - height / 2, vertical) })));
-    const stretch = getScaleAnimation(effect)
-        .easing('linear')
-        .keyframes(frames.map(({ offset, sx, sy }) => ({ offset, transform: stretchTransform(sx, sy, vertical) })));
-    return createAnimation().duration(900).easing('linear').addAnimation([move, stretch]);
+const createTabBarPressAnimation = (effect, from, to, bar, vertical = false) => {
+	const box = animationRect(bar, vertical);
+	const center = box.left + box.width / 2;
+	const left = center - mainSize(bar, vertical) / 2;
+	const fromBox = animationRect(from, vertical);
+	const toBox = animationRect(to, vertical);
+	const parentScale = box.width / mainSize(bar, vertical);
+	const buttonScale = axisScale(getComputedStyle(from).transform, vertical);
+	const width = fromBox.width / parentScale / buttonScale.a;
+	const height = fromBox.height / parentScale / buttonScale.d;
+	const start = (fromBox.left + fromBox.width / 2 - box.left) / parentScale;
+	const end = (toBox.left + toBox.width / 2 - box.left) / parentScale;
+	const selected = from === to;
+	const growth = vertical ? 20 / 16 : 1;
+	const frames = tabBarPressFrames.map(([time, position, extraWidth, extraHeight, expansion]) => {
+		const scale = vertical ? 1 : 1 + 14.14 / mainSize(bar, vertical) * expansion;
+		const press = 1 - Math.exp(-18 * time) * (1 + 18 * time);
+		return {
+			offset: time / .9,
+			x: center + (left + start + (end - start) * position - center) * scale - width / 2,
+			sx: (width + (selected ? 16 * press : extraWidth) * growth) * scale / width,
+			sy: (height + (selected ? 16 * press : extraHeight) * growth) * scale / height
+		};
+	});
+	const move = createAnimation().addElement(effect).beforeStyles({
+		width: `${vertical ? height : width}px`,
+		height: `${vertical ? width : height}px`,
+		display: "block",
+		opacity: "1"
+	}).keyframes(frames.map(({ offset, x }) => ({
+		offset,
+		transform: translate(x, box.top + box.height / 2 - height / 2, vertical)
+	})));
+	const stretch = getScaleAnimation(effect).easing("linear").keyframes(frames.map(({ offset, sx, sy }) => ({
+		offset,
+		transform: stretchTransform(sx, sy, vertical)
+	})));
+	return createAnimation().duration(900).easing("linear").addAnimation([move, stretch]);
 };
-export const createTabBarDragAnimation = (effect, bar, velocity, vertical = false) => {
-    const native = effect.shadowRoot.querySelector('[part="native"]');
-    const current = axisScale(native.style.transform || getComputedStyle(native).transform, vertical);
-    const { width, height } = animationRect(effect, vertical);
-    const scale = vertical ? 1 : 1 + 14.14 / mainSize(bar, vertical);
-    const restX = ((width + (vertical ? 20 : 16)) * scale) / width;
-    const restY = ((height + (vertical ? 20 : 16)) * scale) / height;
-    const stretch = Math.min(16, 32 * velocity * velocity) * scale;
-    const rebound = Math.max(stretch, (current.a - restX) * width) * 0.8;
-    return getScaleAnimation(effect)
-        .duration(500)
-        .easing('linear')
-        .keyframes([
-        { offset: 0, transform: stretchTransform(current.a, current.d, vertical) },
-        { offset: 0.2, transform: stretchTransform(restX + stretch / width, restY - stretch / height, vertical) },
-        { offset: 0.44, transform: stretchTransform(restX - rebound / width, restY + rebound / height, vertical) },
-        { offset: 1, transform: stretchTransform(restX, restY, vertical) },
-    ]);
+const createTabBarDragAnimation = (effect, bar, velocity, vertical = false) => {
+	const native = effect.shadowRoot.querySelector("[part=\"native\"]");
+	const current = axisScale(native.style.transform || getComputedStyle(native).transform, vertical);
+	const { width, height } = animationRect(effect, vertical);
+	const scale = vertical ? 1 : 1 + 14.14 / mainSize(bar, vertical);
+	const restX = (width + (vertical ? 20 : 16)) * scale / width;
+	const restY = (height + (vertical ? 20 : 16)) * scale / height;
+	const stretch = Math.min(16, 32 * velocity * velocity) * scale;
+	const rebound = Math.max(stretch, (current.a - restX) * width) * .8;
+	return getScaleAnimation(effect).duration(500).easing("linear").keyframes([
+		{
+			offset: 0,
+			transform: stretchTransform(current.a, current.d, vertical)
+		},
+		{
+			offset: .2,
+			transform: stretchTransform(restX + stretch / width, restY - stretch / height, vertical)
+		},
+		{
+			offset: .44,
+			transform: stretchTransform(restX - rebound / width, restY + rebound / height, vertical)
+		},
+		{
+			offset: 1,
+			transform: stretchTransform(restX, restY, vertical)
+		}
+	]);
 };
-export const createTabBarReleaseAnimation = (effectElement, target, tap, vertical = false) => {
-    const tapElapsed = tap?.elapsed;
-    const native = effectElement.shadowRoot.querySelector('[part="native"]');
-    const scale = axisScale(native.style.transform || getComputedStyle(native).transform, vertical);
-    const samples = [
-        [0, 1],
-        [0.033, 0.85],
-        [0.067, 0.58],
-        [0.1, 0.31],
-        [0.133, 0.15],
-        [0.167, 0.055],
-        [0.2, 0.01],
-        [0.267, -0.01],
-        [0.367, -0.004],
-        [0.45, 0],
-    ];
-    const bar = target.parentElement;
-    const box = animationRect(bar, vertical);
-    const current = animationRect(effectElement, vertical);
-    const targetBox = animationRect(target, vertical);
-    const center = box.left + box.width / 2;
-    const x = center + (targetBox.left + targetBox.width / 2 - center) / (box.width / mainSize(bar, vertical)) - current.width / 2;
-    const y = box.top + box.height / 2 - current.height / 2;
-    const endScaleX = vertical ? target.offsetHeight / current.width : 1;
-    const endScaleY = vertical ? target.offsetWidth / current.height : 1;
-    const elapsed = (tapElapsed ?? 0) / 1000;
-    const duration = tapElapsed === undefined ? 450 : 800 - tapElapsed;
-    let frames = samples.map(([time, remaining]) => ({
-        offset: time / 0.45,
-        x: x + (current.x - x) * remaining,
-        y: y + (current.y - y) * remaining,
-        sx: endScaleX + (scale.a - endScaleX) * remaining,
-        sy: endScaleY + (scale.d - endScaleY) * remaining,
-    }));
-    if (tapElapsed !== undefined && !vertical) {
-        const nextIndex = tabBarTapFrames.findIndex(([time]) => time > elapsed);
-        const previous = tabBarTapFrames[Math.max(0, nextIndex - 1)];
-        const next = tabBarTapFrames[nextIndex];
-        const progress = previous[1] + ((next[1] - previous[1]) * (elapsed - previous[0])) / (next[0] - previous[0]);
-        const extraDistance = Math.max(0, tap.distance - 1);
-        frames = [
-            { offset: 0, x: current.x, y: current.y, sx: scale.a, sy: scale.d },
-            ...tabBarTapFrames.slice(nextIndex).map(([time, position, width, height]) => ({
-                offset: (time - elapsed) / (0.8 - elapsed),
-                x: x + ((current.x - x) * (1 - position)) / Math.max(0.1, 1 - progress),
-                y: y + ((current.y - y) * (1 - position)) / Math.max(0.1, 1 - progress),
-                sx: 1 + (width * (time >= 0.367 ? 1 + 0.75 * extraDistance : 1)) / current.width,
-                sy: 1 + (height * (time >= 0.367 ? 1 + 0.5 * extraDistance : 1)) / current.height,
-            })),
-        ];
-    }
-    const stretch = createAnimation()
-        .addElement(native)
-        .duration(duration)
-        .easing('linear')
-        .keyframes(frames.map(({ offset, sx, sy }) => ({ offset, transform: stretchTransform(sx, sy, vertical) })));
-    const move = createAnimation()
-        .addElement(effectElement)
-        .duration(duration)
-        .easing('linear')
-        .keyframes(frames.map(({ offset, x, y }) => ({
-        offset,
-        transform: translate(x, y, vertical),
-    })));
-    const offset = 1 - 200 / duration;
-    const selectedBackground = 'var(--ios27-tab-selected-background, rgba(var(--ios-theme-button-color-selected-rgb, var(--ios26-button-color-selected-rgb, var(--ios27-button-color-selected-default-rgb))), 0.095))';
-    const glass = createAnimation()
-        .addElement(effectElement)
-        .easing('linear')
-        .keyframes([
-        { offset: 0, opacity: 1 },
-        { offset, opacity: 1 },
-        { offset: 1, opacity: 0 },
-    ]);
-    const selected = createAnimation()
-        .addElement(target.shadowRoot.querySelector('[part="native"]'))
-        .easing('linear')
-        .keyframes([
-        { offset: 0, backgroundColor: 'transparent' },
-        { offset, backgroundColor: 'transparent' },
-        { offset: 1, backgroundColor: selectedBackground },
-    ]);
-    const release = createAnimation().duration(duration).addAnimation([stretch, move, glass, selected]);
-    if (tapElapsed !== undefined && !vertical) {
-        const width = mainSize(bar, vertical);
-        const expansion = box.width - width;
-        const peak = Math.max(8.65, expansion);
-        const platter = createAnimation()
-            .addElement(bar)
-            .easing('linear')
-            .keyframes([
-            [0, expansion],
-            [17, expansion + (peak - expansion) * 0.503],
-            [34, expansion + (peak - expansion) * 0.868],
-            [50, peak],
-            [67, peak * (8.46 / 8.65)],
-            [83, peak * (7.73 / 8.65)],
-            [100, peak * (6.66 / 8.65)],
-            [117, peak * (5.44 / 8.65)],
-            [134, peak * (4.19 / 8.65)],
-            [150, peak * (3 / 8.65)],
-            [167, peak * (1.97 / 8.65)],
-            [184, peak * (1.09 / 8.65)],
-            [200, peak * (0.39 / 8.65)],
-            [217, 0],
-            [234, peak * (-0.48 / 8.65)],
-            [250, peak * (-0.7 / 8.65)],
-            [267, peak * (-0.8 / 8.65)],
-            [283, peak * (-0.82 / 8.65)],
-            [300, peak * (-0.77 / 8.65)],
-            [317, peak * (-0.68 / 8.65)],
-            [334, peak * (-0.57 / 8.65)],
-            [350, peak * (-0.46 / 8.65)],
-            [383, peak * (-0.14 / 8.65)],
-            [417, 0],
-            [duration, 0],
-        ].map(([time, extra]) => ({ offset: time / duration, transform: `scale(${1 + extra / width}) translateZ(0)` })));
-        release.addAnimation(platter);
-    }
-    return release;
+const createTabBarReleaseAnimation = (effectElement, target, tap, vertical = false) => {
+	const tapElapsed = tap?.elapsed;
+	const native = effectElement.shadowRoot.querySelector("[part=\"native\"]");
+	const scale = axisScale(native.style.transform || getComputedStyle(native).transform, vertical);
+	const samples = [
+		[0, 1],
+		[.033, .85],
+		[.067, .58],
+		[.1, .31],
+		[.133, .15],
+		[.167, .055],
+		[.2, .01],
+		[.267, -.01],
+		[.367, -.004],
+		[.45, 0]
+	];
+	const bar = target.parentElement;
+	const box = animationRect(bar, vertical);
+	const current = animationRect(effectElement, vertical);
+	const targetBox = animationRect(target, vertical);
+	const center = box.left + box.width / 2;
+	const x = center + (targetBox.left + targetBox.width / 2 - center) / (box.width / mainSize(bar, vertical)) - current.width / 2;
+	const y = box.top + box.height / 2 - current.height / 2;
+	const endScaleX = vertical ? target.offsetHeight / current.width : 1;
+	const endScaleY = vertical ? target.offsetWidth / current.height : 1;
+	const elapsed = (tapElapsed ?? 0) / 1e3;
+	const duration = tapElapsed === void 0 ? 450 : 800 - tapElapsed;
+	let frames = samples.map(([time, remaining]) => ({
+		offset: time / .45,
+		x: x + (current.x - x) * remaining,
+		y: y + (current.y - y) * remaining,
+		sx: endScaleX + (scale.a - endScaleX) * remaining,
+		sy: endScaleY + (scale.d - endScaleY) * remaining
+	}));
+	if (tapElapsed !== void 0 && !vertical) {
+		const nextIndex = tabBarTapFrames.findIndex(([time]) => time > elapsed);
+		const previous = tabBarTapFrames[Math.max(0, nextIndex - 1)];
+		const next = tabBarTapFrames[nextIndex];
+		const progress = previous[1] + (next[1] - previous[1]) * (elapsed - previous[0]) / (next[0] - previous[0]);
+		const extraDistance = Math.max(0, tap.distance - 1);
+		frames = [{
+			offset: 0,
+			x: current.x,
+			y: current.y,
+			sx: scale.a,
+			sy: scale.d
+		}, ...tabBarTapFrames.slice(nextIndex).map(([time, position, width, height]) => ({
+			offset: (time - elapsed) / (.8 - elapsed),
+			x: x + (current.x - x) * (1 - position) / Math.max(.1, 1 - progress),
+			y: y + (current.y - y) * (1 - position) / Math.max(.1, 1 - progress),
+			sx: 1 + width * (time >= .367 ? 1 + .75 * extraDistance : 1) / current.width,
+			sy: 1 + height * (time >= .367 ? 1 + .5 * extraDistance : 1) / current.height
+		}))];
+	}
+	const stretch = createAnimation().addElement(native).duration(duration).easing("linear").keyframes(frames.map(({ offset, sx, sy }) => ({
+		offset,
+		transform: stretchTransform(sx, sy, vertical)
+	})));
+	const move = createAnimation().addElement(effectElement).duration(duration).easing("linear").keyframes(frames.map(({ offset, x, y }) => ({
+		offset,
+		transform: translate(x, y, vertical)
+	})));
+	const offset = 1 - 200 / duration;
+	const selectedBackground = "var(--ios27-tab-selected-background, rgba(var(--ios-theme-button-color-selected-rgb, var(--ios26-button-color-selected-rgb, var(--ios27-button-color-selected-default-rgb))), 0.095))";
+	const glass = createAnimation().addElement(effectElement).easing("linear").keyframes([
+		{
+			offset: 0,
+			opacity: 1
+		},
+		{
+			offset,
+			opacity: 1
+		},
+		{
+			offset: 1,
+			opacity: 0
+		}
+	]);
+	const selected = createAnimation().addElement(target.shadowRoot.querySelector("[part=\"native\"]")).easing("linear").keyframes([
+		{
+			offset: 0,
+			backgroundColor: "transparent"
+		},
+		{
+			offset,
+			backgroundColor: "transparent"
+		},
+		{
+			offset: 1,
+			backgroundColor: selectedBackground
+		}
+	]);
+	const release = createAnimation().duration(duration).addAnimation([
+		stretch,
+		move,
+		glass,
+		selected
+	]);
+	if (tapElapsed !== void 0 && !vertical) {
+		const width = mainSize(bar, vertical);
+		const expansion = box.width - width;
+		const peak = Math.max(8.65, expansion);
+		const platter = createAnimation().addElement(bar).easing("linear").keyframes([
+			[0, expansion],
+			[17, expansion + (peak - expansion) * .503],
+			[34, expansion + (peak - expansion) * .868],
+			[50, peak],
+			[67, peak * (8.46 / 8.65)],
+			[83, peak * (7.73 / 8.65)],
+			[100, peak * (6.66 / 8.65)],
+			[117, peak * (5.44 / 8.65)],
+			[134, peak * (4.19 / 8.65)],
+			[150, peak * (3 / 8.65)],
+			[167, peak * (1.97 / 8.65)],
+			[184, peak * (1.09 / 8.65)],
+			[200, peak * (.39 / 8.65)],
+			[217, 0],
+			[234, peak * (-.48 / 8.65)],
+			[250, peak * (-.7 / 8.65)],
+			[267, peak * (-.8 / 8.65)],
+			[283, peak * (-.82 / 8.65)],
+			[300, peak * (-.77 / 8.65)],
+			[317, peak * (-.68 / 8.65)],
+			[334, peak * (-.57 / 8.65)],
+			[350, peak * (-.46 / 8.65)],
+			[383, peak * (-.14 / 8.65)],
+			[417, 0],
+			[duration, 0]
+		].map(([time, extra]) => ({
+			offset: time / duration,
+			transform: `scale(${1 + extra / width}) translateZ(0)`
+		})));
+		release.addAnimation(platter);
+	}
+	return release;
 };
-export const createPreMoveAnimation = (effectElement, tabSelectedElement, currentTouchedElement, animationPosition) => {
-    const diff = Math.max(Math.abs(tabSelectedElement.getBoundingClientRect().left - currentTouchedElement.getBoundingClientRect().left), 140);
-    return createAnimation()
-        .duration(diff * 2.1)
-        .easing('ease-out')
-        .addElement(effectElement)
-        .beforeStyles({
-        width: `${tabSelectedElement.clientWidth}px`,
-        height: `${tabSelectedElement.clientHeight}px`,
-        display: 'block',
-        opacity: '1',
-        transform: 'none',
-    })
-        .keyframes([
-        {
-            offset: 0,
-            transform: `translate3d(${tabSelectedElement.getBoundingClientRect().left}px,  ${animationPosition.positionY}px, 0)`,
-        },
-        {
-            offset: 1,
-            transform: `translate3d(${currentTouchedElement.getBoundingClientRect().left}px,  ${animationPosition.positionY}px, 0)`,
-        },
-    ]);
+const createPreMoveAnimation = (effectElement, tabSelectedElement, currentTouchedElement, animationPosition) => {
+	const diff = Math.max(Math.abs(tabSelectedElement.getBoundingClientRect().left - currentTouchedElement.getBoundingClientRect().left), 140);
+	return createAnimation().duration(diff * 2.1).easing("ease-out").addElement(effectElement).beforeStyles({
+		width: `${tabSelectedElement.clientWidth}px`,
+		height: `${tabSelectedElement.clientHeight}px`,
+		display: "block",
+		opacity: "1",
+		transform: "none"
+	}).keyframes([{
+		offset: 0,
+		transform: `translate3d(${tabSelectedElement.getBoundingClientRect().left}px,  ${animationPosition.positionY}px, 0)`
+	}, {
+		offset: 1,
+		transform: `translate3d(${currentTouchedElement.getBoundingClientRect().left}px,  ${animationPosition.positionY}px, 0)`
+	}]);
 };
-export const createMoveAnimation = (effectElement, detail, tabSelectedElement, animationPosition, vertical = false) => {
-    return createAnimation()
-        .duration(500)
-        .addElement(effectElement)
-        .beforeStyles({
-        width: `${tabSelectedElement.clientWidth}px`,
-        height: `${tabSelectedElement.clientHeight}px`,
-        display: 'block',
-        opacity: '1',
-        transform: 'none',
-    })
-        .fromTo('transform', translate(animationPosition.minPositionX, animationPosition.positionY, vertical), translate(animationPosition.maxPositionX, animationPosition.positionY, vertical))
-        .progressStep(getStep(detail.currentX, animationPosition));
+const createMoveAnimation = (effectElement, detail, tabSelectedElement, animationPosition, vertical = false) => {
+	return createAnimation().duration(500).addElement(effectElement).beforeStyles({
+		width: `${tabSelectedElement.clientWidth}px`,
+		height: `${tabSelectedElement.clientHeight}px`,
+		display: "block",
+		opacity: "1",
+		transform: "none"
+	}).fromTo("transform", translate(animationPosition.minPositionX, animationPosition.positionY, vertical), translate(animationPosition.maxPositionX, animationPosition.positionY, vertical)).progressStep(getStep(detail.currentX, animationPosition));
 };
-export const getMoveAnimationKeyframe = (type, scales) => {
-    return {
-        moveRight: [
-            {
-                offset: 0,
-                transform: scales.large,
-            },
-            {
-                offset: 0.4,
-                transform: scales.small,
-            },
-            {
-                offset: 0.75,
-                transform: scales.xlarge,
-            },
-            {
-                offset: 1,
-                transform: scales.large,
-            },
-        ],
-        moveLeft: [
-            {
-                offset: 0,
-                transform: scales.large,
-            },
-            {
-                offset: 0.1,
-                transform: scales.xlarge,
-            },
-            {
-                offset: 0.6,
-                transform: scales.small,
-            },
-            {
-                offset: 1,
-                transform: scales.large,
-            },
-        ],
-        slowly: [
-            {
-                offset: 0,
-                transform: scales.large,
-            },
-            {
-                offset: 0.4,
-                transform: scales.medium,
-            },
-            {
-                offset: 1,
-                transform: scales.large,
-            },
-        ],
-    }[type];
+const getMoveAnimationKeyframe = (type, scales) => {
+	return {
+		moveRight: [
+			{
+				offset: 0,
+				transform: scales.large
+			},
+			{
+				offset: .4,
+				transform: scales.small
+			},
+			{
+				offset: .75,
+				transform: scales.xlarge
+			},
+			{
+				offset: 1,
+				transform: scales.large
+			}
+		],
+		moveLeft: [
+			{
+				offset: 0,
+				transform: scales.large
+			},
+			{
+				offset: .1,
+				transform: scales.xlarge
+			},
+			{
+				offset: .6,
+				transform: scales.small
+			},
+			{
+				offset: 1,
+				transform: scales.large
+			}
+		],
+		slowly: [
+			{
+				offset: 0,
+				transform: scales.large
+			},
+			{
+				offset: .4,
+				transform: scales.medium
+			},
+			{
+				offset: 1,
+				transform: scales.large
+			}
+		]
+	}[type];
 };
+//#endregion
+export { animationRect, createMoveAnimation, createPreMoveAnimation, createTabBarDragAnimation, createTabBarPressAnimation, createTabBarReleaseAnimation, getMoveAnimationKeyframe, getScaleAnimation };
+
+//# sourceMappingURL=animations.js.map