@wix/motion 1.659.0 → 2.0.0-rc.2

package/dist/es/library/entrance/test/WinkIn.spec.js

@@ -0,0 +1,281 @@
+import { describe, expect, test } from 'vitest';
+import { entranceAnimations } from '../index';
+import { baseMockOptions } from './testUtils';
+describe('WinkIn', () => {
+    test('WinkIn animation with default options', () => {
+        const mockOptions = {
+            ...baseMockOptions,
+            namedEffect: {},
+        };
+        const expectedResult = [
+            {
+                name: 'motion-fadeIn',
+            },
+            {
+                easing: 'quintInOut',
+                name: 'motion-winkInClip',
+                keyframes: [
+                    {
+                        clipPath: `var(--motion-clip-start, polygon(50% 0%, 50% 0%, 50% 100%, 50% 100%))`,
+                    },
+                    {
+                        clipPath: 'polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)',
+                    },
+                ],
+            },
+            {
+                easing: 'quintInOut',
+                name: 'motion-winkInRotate',
+                keyframes: [
+                    {
+                        transform: 'rotate(var(--comp-rotate-z, 0deg)) scale(var(--motion-scale-x, 0), var(--motion-scale-y, 1))',
+                    },
+                    {
+                        transform: 'rotate(var(--comp-rotate-z, 0deg)) scale(1, 1)',
+                    },
+                ],
+            },
+        ];
+        const result = entranceAnimations.WinkIn.web(mockOptions);
+        expect(result).toMatchObject(expectedResult);
+    });
+    test('WinkIn animation with vertical direction', () => {
+        const direction = 'vertical';
+        const mockOptions = {
+            ...baseMockOptions,
+            namedEffect: { direction },
+        };
+        const expectedResult = [
+            {
+                name: 'motion-fadeIn',
+            },
+            {
+                easing: 'quintInOut',
+                name: 'motion-winkInClip',
+                keyframes: [
+                    {
+                        clipPath: `var(--motion-clip-start, polygon(0% 50%, 100% 50%, 100% 50%, 0% 50%))`,
+                    },
+                    {
+                        clipPath: 'polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)',
+                    },
+                ],
+            },
+            {
+                easing: 'quintInOut',
+                name: 'motion-winkInRotate',
+                keyframes: [
+                    {
+                        transform: 'rotate(var(--comp-rotate-z, 0deg)) scale(var(--motion-scale-x, 1), var(--motion-scale-y, 0))',
+                    },
+                    {
+                        transform: 'rotate(var(--comp-rotate-z, 0deg)) scale(1, 1)',
+                    },
+                ],
+            },
+        ];
+        const result = entranceAnimations.WinkIn.web(mockOptions);
+        expect(result).toMatchObject(expectedResult);
+    });
+    test('WinkIn animation with custom easing', () => {
+        const customEasing = 'circInOut';
+        const mockOptions = {
+            ...baseMockOptions,
+            easing: customEasing,
+            namedEffect: {},
+        };
+        const expectedResult = [
+            {
+                name: 'motion-fadeIn',
+            },
+            {
+                name: 'motion-winkInClip',
+                easing: 'circInOut',
+                keyframes: [
+                    {
+                        clipPath: `var(--motion-clip-start, polygon(50% 0%, 50% 0%, 50% 100%, 50% 100%))`,
+                    },
+                    {
+                        clipPath: 'polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)',
+                    },
+                ],
+            },
+            {
+                name: 'motion-winkInRotate',
+                easing: customEasing,
+                keyframes: [
+                    {
+                        transform: 'rotate(var(--comp-rotate-z, 0deg)) scale(var(--motion-scale-x, 0), var(--motion-scale-y, 1))',
+                    },
+                    {
+                        transform: 'rotate(var(--comp-rotate-z, 0deg)) scale(1, 1)',
+                    },
+                ],
+            },
+        ];
+        const result = entranceAnimations.WinkIn.web(mockOptions);
+        expect(result).toMatchObject(expectedResult);
+    });
+    test('WinkIn.style animation with default options', () => {
+        const duration = 1000;
+        const mockOptions = {
+            ...baseMockOptions,
+            duration,
+            namedEffect: {},
+        };
+        const expectedResult = [
+            {
+                name: 'motion-fadeIn',
+                easing: 'quadOut',
+                custom: {},
+                keyframes: [{ opacity: 0 }, { opacity: 'var(--comp-opacity, 1)' }],
+            },
+            {
+                name: 'motion-winkInClip',
+                easing: 'quintInOut',
+                custom: {
+                    '--motion-scale-x': 0,
+                    '--motion-scale-y': 1,
+                    '--motion-clip-start': 'polygon(50% 0%, 50% 0%, 50% 100%, 50% 100%)',
+                },
+                keyframes: [
+                    {
+                        clipPath: 'var(--motion-clip-start, polygon(50% 0%, 50% 0%, 50% 100%, 50% 100%))',
+                    },
+                    {
+                        clipPath: 'polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)',
+                    },
+                ],
+            },
+            {
+                name: 'motion-winkInRotate',
+                easing: 'quintInOut',
+                duration: duration * 0.85,
+                custom: {
+                    '--motion-scale-x': 0,
+                    '--motion-scale-y': 1,
+                    '--motion-clip-start': 'polygon(50% 0%, 50% 0%, 50% 100%, 50% 100%)',
+                },
+                keyframes: [
+                    {
+                        transform: 'rotate(var(--comp-rotate-z, 0deg)) scale(var(--motion-scale-x, 0), var(--motion-scale-y, 1))',
+                    },
+                    {
+                        transform: 'rotate(var(--comp-rotate-z, 0deg)) scale(1, 1)',
+                    },
+                ],
+            },
+        ];
+        const result = entranceAnimations.WinkIn.style?.(mockOptions);
+        expect(result).toMatchObject(expectedResult);
+    });
+    test('WinkIn.style animation with vertical direction', () => {
+        const direction = 'vertical';
+        const duration = 1000;
+        const mockOptions = {
+            ...baseMockOptions,
+            duration,
+            namedEffect: { direction },
+        };
+        const expectedResult = [
+            {
+                name: 'motion-fadeIn',
+                easing: 'quadOut',
+                custom: {},
+                keyframes: [{ opacity: 0 }, { opacity: 'var(--comp-opacity, 1)' }],
+            },
+            {
+                name: 'motion-winkInClip',
+                easing: 'quintInOut',
+                custom: {
+                    '--motion-scale-x': 1,
+                    '--motion-scale-y': 0,
+                    '--motion-clip-start': 'polygon(0% 50%, 100% 50%, 100% 50%, 0% 50%)',
+                },
+                keyframes: [
+                    {
+                        clipPath: 'var(--motion-clip-start, polygon(0% 50%, 100% 50%, 100% 50%, 0% 50%))',
+                    },
+                    {
+                        clipPath: 'polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)',
+                    },
+                ],
+            },
+            {
+                name: 'motion-winkInRotate',
+                easing: 'quintInOut',
+                duration: duration * 0.85,
+                custom: {
+                    '--motion-scale-x': 1,
+                    '--motion-scale-y': 0,
+                    '--motion-clip-start': 'polygon(0% 50%, 100% 50%, 100% 50%, 0% 50%)',
+                },
+                keyframes: [
+                    {
+                        transform: 'rotate(var(--comp-rotate-z, 0deg)) scale(var(--motion-scale-x, 1), var(--motion-scale-y, 0))',
+                    },
+                    {
+                        transform: 'rotate(var(--comp-rotate-z, 0deg)) scale(1, 1)',
+                    },
+                ],
+            },
+        ];
+        const result = entranceAnimations.WinkIn.style?.(mockOptions);
+        expect(result).toMatchObject(expectedResult);
+    });
+    test('WinkIn.style animation with custom easing', () => {
+        const customEasing = 'circInOut';
+        const duration = 1000;
+        const mockOptions = {
+            ...baseMockOptions,
+            duration,
+            easing: customEasing,
+            namedEffect: {},
+        };
+        const expectedResult = [
+            {
+                name: 'motion-fadeIn',
+                easing: 'quadOut',
+                custom: {},
+                keyframes: [{ opacity: 0 }, { opacity: 'var(--comp-opacity, 1)' }],
+            },
+            {
+                name: 'motion-winkInClip',
+                easing: customEasing,
+                custom: {
+                    '--motion-scale-x': 0,
+                    '--motion-scale-y': 1,
+                    '--motion-clip-start': 'polygon(50% 0%, 50% 0%, 50% 100%, 50% 100%)',
+                },
+                keyframes: [
+                    {
+                        clipPath: 'var(--motion-clip-start, polygon(50% 0%, 50% 0%, 50% 100%, 50% 100%))',
+                    },
+                    {
+                        clipPath: 'polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)',
+                    },
+                ],
+            },
+            {
+                name: 'motion-winkInRotate',
+                easing: customEasing,
+                duration: duration * 0.85,
+                custom: {
+                    '--motion-scale-x': 0,
+                    '--motion-scale-y': 1,
+                    '--motion-clip-start': 'polygon(50% 0%, 50% 0%, 50% 100%, 50% 100%)',
+                },
+                keyframes: [
+                    {
+                        transform: 'rotate(var(--comp-rotate-z, 0deg)) scale(var(--motion-scale-x, 0), var(--motion-scale-y, 1))',
+                    },
+                    {
+                        transform: 'rotate(var(--comp-rotate-z, 0deg)) scale(1, 1)',
+                    },
+                ],
+            },
+        ];
+        const result = entranceAnimations.WinkIn.style?.(mockOptions);
+        expect(result).toMatchObject(expectedResult);
+    });
+});

package/dist/es/library/entrance/test/testUtils.js

@@ -0,0 +1,3 @@
+export const baseMockOptions = {
+    id: '1',
+};

package/dist/es/library/mouse/AiryMouse.js

@@ -0,0 +1,43 @@
+import { getCssUnits, getMouseTransitionEasing, mapRange } from '../../utils';
+import { CustomMouse } from './CustomMouse';
+const paramsMap = {
+    soft: { angle: 10, easing: 'easeOut' },
+    medium: { angle: 50, easing: 'easeOut' },
+    hard: { angle: 85, easing: 'easeOut' },
+};
+class AiryMouseAnimation extends CustomMouse {
+    progress({ x: progressX, y: progressY }) {
+        let translateX = 0;
+        let translateY = 0;
+        const { distance, invert, angle, axis } = this.options;
+        if (axis !== 'vertical') {
+            translateX = mapRange(0, 1, -distance.value, distance.value, progressX) * invert;
+        }
+        if (axis !== 'horizontal') {
+            translateY = mapRange(0, 1, -distance.value, distance.value, progressY) * invert;
+        }
+        // if progress  === 0, rotate === angle, if progress === 0.5, rotate === 0, if progress === 1, rotate === angle
+        const rotate = mapRange(0, 1, -angle, angle, progressX) * invert;
+        const units = getCssUnits(distance.type);
+        this.target.style.transform = `translateX(${translateX}${units}) translateY(${translateY}${units}) rotate(calc(${rotate}deg + var(--comp-rotate-z, 0deg)))`;
+    }
+    cancel() {
+        this.target.style.transform = '';
+        this.target.style.transition = '';
+    }
+}
+export default function create(options) {
+    const { transitionDuration, transitionEasing } = options;
+    const { power, inverted = false, distance = { value: 200, type: 'px' }, angle = 30, axis = 'both', } = options.namedEffect;
+    const invert = inverted ? -1 : 1;
+    const animationOptions = {
+        transition: transitionDuration
+            ? `transform ${transitionDuration}ms ${getMouseTransitionEasing(power ? paramsMap[power].easing : transitionEasing)}`
+            : '',
+        invert,
+        distance,
+        angle: power ? paramsMap[power].angle : angle,
+        axis,
+    };
+    return (target) => new AiryMouseAnimation(target, animationOptions);
+}

package/dist/es/library/mouse/BlobMouse.js

@@ -0,0 +1,42 @@
+import { getCssUnits, getMouseTransitionEasing, mapRange } from '../../utils';
+import { CustomMouse } from './CustomMouse';
+const paramsMap = {
+    soft: { scale: 1.2, easing: 'easeOut' },
+    medium: { scale: 1.6, easing: 'easeOut' },
+    hard: { scale: 2.4, easing: 'easeOut' },
+};
+class BlobMouseAnimation extends CustomMouse {
+    progress({ x: progressX, y: progressY }) {
+        const { distance, scale, invert } = this.options;
+        const translateX = mapRange(0, 1, -distance.value, distance.value, progressX) * invert;
+        const translateY = mapRange(0, 1, -distance.value, distance.value, progressY) * invert;
+        // if progressX === 0 || progressX === 1, scaleX === scale, if progressX === 0.5, scaleX === 1
+        const scaleX = progressX < 0.5
+            ? mapRange(0, 0.5, scale, 1, progressX)
+            : mapRange(0.5, 1, 1, scale, progressX);
+        // if progressY === 0 || progressY === 1, scaleY === scale, if progressY === 0.5, scaleY === 1
+        const scaleY = progressY < 0.5
+            ? mapRange(0, 0.5, scale, 1, progressY)
+            : mapRange(0.5, 1, 1, scale, progressY);
+        const units = getCssUnits(distance.type);
+        this.target.style.transform = `translateX(${translateX}${units}) translateY(${translateY}${units}) scale(${scaleX}, ${scaleY}) rotate(var(--comp-rotate-z, 0deg))`;
+    }
+    cancel() {
+        this.target.style.transform = '';
+        this.target.style.transition = '';
+    }
+}
+export default function create(options) {
+    const { transitionDuration, transitionEasing } = options;
+    const { power, inverted = false, distance = { value: 200, type: 'px' }, scale = 1.4, } = options.namedEffect;
+    const invert = inverted ? -1 : 1;
+    const animationOptions = {
+        transition: transitionDuration
+            ? `transform ${transitionDuration}ms ${getMouseTransitionEasing(power ? paramsMap[power].easing : transitionEasing)}`
+            : '',
+        invert,
+        distance,
+        scale: power ? paramsMap[power].scale : scale,
+    };
+    return (target) => new BlobMouseAnimation(target, animationOptions);
+}

package/dist/es/library/mouse/BlurMouse.js

@@ -0,0 +1,56 @@
+import { getCssUnits, getMouseTransitionEasing, distance2d, mapRange } from '../../utils';
+import { quadInOut } from '../../easings';
+import { CustomMouse } from './CustomMouse';
+const paramsMap = {
+    soft: { angle: 0, scale: 1, easing: 'easeOut' },
+    medium: { angle: 25, scale: 0.7, easing: 'easeOut' },
+    hard: { angle: 65, scale: 0.25, easing: 'easeOut' },
+};
+class BlurMouseAnimation extends CustomMouse {
+    progress({ x: progressX, y: progressY }) {
+        const { distance, angle, scale, invert, blur, perspective } = this.options;
+        const translateX = mapRange(0, 1, -distance.value, distance.value, progressX) * invert;
+        const translateY = mapRange(0, 1, -distance.value, distance.value, progressY) * invert;
+        // if progressX === 0 || progressX === 1, scaleX === scale, if progressX === 0.5, scaleX === 1
+        const scaleX = progressX < 0.5
+            ? mapRange(0, 0.5, scale, 1, progressX)
+            : mapRange(0.5, 1, 1, scale, progressX);
+        // if progressY === 0 || progressY === 1, scaleY === scale, if progressY === 0.5, scaleY === 1
+        const scaleY = progressY < 0.5
+            ? mapRange(0, 0.5, scale, 1, progressY)
+            : mapRange(0.5, 1, 1, scale, progressY);
+        const maxScale = Math.min(scaleX, scaleY);
+        // if progressX === 0, rotateX === -angle, if progressX === 0.5, rotateX === 0, if progressX === 1, rotateX === angle
+        const rotateX = mapRange(0, 1, -angle, angle, progressY) * invert;
+        const rotateY = mapRange(0, 1, angle, -angle, progressX) * invert;
+        const units = getCssUnits(distance.type);
+        const transform = `perspective(${perspective}px) translateX(${translateX}${units}) translateY(${translateY}${units}) scale(${maxScale}, ${maxScale}) rotateX(${rotateX}deg) rotateY(${rotateY}deg) rotate(var(--comp-rotate-z, 0deg))`;
+        const progressDistance = distance2d([0.5, 0.5], [progressX, progressY]);
+        const blurFilter = Math.round(mapRange(0, 1, 0, blur, quadInOut(progressDistance)));
+        const filter = `blur(${blurFilter}px)`;
+        this.target.style.transform = transform;
+        this.target.style.filter = filter;
+    }
+    cancel() {
+        this.target.style.transform = '';
+        this.target.style.filter = '';
+        this.target.style.transition = '';
+    }
+}
+export default function create(options) {
+    const { transitionDuration, transitionEasing } = options;
+    const { power, inverted = false, distance = { value: 80, type: 'px' }, angle = 5, scale = 0.3, blur = 20, perspective = 600, } = options.namedEffect;
+    const invert = inverted ? -1 : 1;
+    const animationOptions = {
+        transition: transitionDuration
+            ? `transform ${transitionDuration}ms ${getMouseTransitionEasing(power ? paramsMap[power].easing : transitionEasing)}, filter ${transitionDuration}ms ${getMouseTransitionEasing(power ? paramsMap[power].easing : transitionEasing)}`
+            : '',
+        distance,
+        angle: power ? paramsMap[power].angle : angle,
+        scale: power ? paramsMap[power].scale : scale,
+        blur,
+        perspective,
+        invert,
+    };
+    return (target) => new BlurMouseAnimation(target, animationOptions);
+}

package/dist/es/library/mouse/BounceMouse.js

@@ -0,0 +1,10 @@
+import createTrack from './TrackMouse';
+export default function create(options) {
+    const { distance = { value: 80, type: 'px' } } = options.namedEffect;
+    const { transitionEasing = 'elastic' } = options;
+    return createTrack({
+        ...options,
+        transitionEasing,
+        namedEffect: { ...options.namedEffect, distance },
+    });
+}

package/dist/es/library/mouse/CustomMouse.js

@@ -0,0 +1,31 @@
+export class CustomMouse {
+    target;
+    options;
+    currentProgress;
+    constructor(target, options) {
+        this.target = target;
+        this.options = options || {};
+        this.currentProgress = { x: 0.5, y: 0.5, v: { x: 0, y: 0 }, active: true };
+        this.play();
+    }
+    progress({ x, y, v, active }) {
+        this.currentProgress = { x, y, v, active };
+        if (typeof this.options.customEffect === 'function') {
+            this.options.customEffect(this.target, this.currentProgress);
+        }
+    }
+    cancel() {
+        this.currentProgress = { x: 0.5, y: 0.5, v: { x: 0, y: 0 } };
+    }
+    getProgress() {
+        return this.currentProgress;
+    }
+    play() {
+        if (this.options.transition && this.target) {
+            this.target.style.transition = this.options.transition;
+        }
+    }
+}
+export function create(options) {
+    return (target) => new CustomMouse(target, options);
+}

package/dist/es/library/mouse/ScaleMouse.js

@@ -0,0 +1,61 @@
+import { getCssUnits, getMouseTransitionEasing, mapRange } from '../../utils';
+import { CustomMouse } from './CustomMouse';
+const paramsMap = {
+    down: {
+        soft: { scale: 0.85, easing: 'easeOut' },
+        medium: { scale: 0.5, easing: 'easeOut' },
+        hard: { scale: 0, easing: 'easeOut' },
+    },
+    up: {
+        soft: { scale: 1.2, easing: 'easeOut' },
+        medium: { scale: 1.6, easing: 'easeOut' },
+        hard: { scale: 2.4, easing: 'easeOut' },
+    },
+};
+class ScaleMouseAnimation extends CustomMouse {
+    progress({ x: progressX, y: progressY }) {
+        const { distance, scale, invert, axis } = this.options;
+        let translateX = 0;
+        let translateY = 0;
+        let scaleX = 1;
+        let scaleY = 1;
+        if (axis === 'both' || axis === 'horizontal') {
+            translateX = mapRange(0, 1, -distance.value, distance.value, progressX) * invert;
+            scaleX =
+                progressX < 0.5
+                    ? mapRange(0, 0.5, scale, 1, progressX)
+                    : mapRange(0.5, 1, 1, scale, progressX);
+        }
+        if (axis === 'both' || axis === 'vertical') {
+            translateY = mapRange(0, 1, -distance.value, distance.value, progressY) * invert;
+            scaleY =
+                progressY < 0.5
+                    ? mapRange(0, 0.5, scale, 1, progressY)
+                    : mapRange(0.5, 1, 1, scale, progressY);
+        }
+        // scale is uniform so we use the smaller scale value if scale < 1
+        // and the bigger scale value if scale > 1
+        const scaleBoth = scale < 1 ? Math.min(scaleX, scaleY) : Math.max(scaleX, scaleY);
+        const units = getCssUnits(distance.type);
+        this.target.style.transform = `translateX(${translateX}${units}) translateY(${translateY}${units}) scale(${scaleBoth}) rotate(var(--comp-rotate-z, 0deg))`;
+    }
+    cancel() {
+        this.target.style.transform = '';
+        this.target.style.transition = '';
+    }
+}
+export default function create(options) {
+    const { transitionDuration, transitionEasing } = options;
+    const { power, scaleDirection = 'down', inverted = false, distance = { value: 80, type: 'px' }, axis = 'both', scale = 1.4, } = options.namedEffect;
+    const invert = inverted ? -1 : 1;
+    const animationOptions = {
+        transition: transitionDuration
+            ? `transform ${transitionDuration}ms ${getMouseTransitionEasing(power ? paramsMap[scaleDirection][power].easing : transitionEasing)}`
+            : '',
+        invert,
+        distance,
+        axis,
+        scale: power ? paramsMap[scaleDirection][power].scale : scale,
+    };
+    return (target) => new ScaleMouseAnimation(target, animationOptions);
+}

package/dist/es/library/mouse/SkewMouse.js

@@ -0,0 +1,58 @@
+import { getCssUnits, getMouseTransitionEasing, mapRange } from '../../utils';
+import { circInOut } from '../../easings';
+import { CustomMouse } from './CustomMouse';
+const paramsMap = {
+    soft: { angle: 10, easing: 'easeOut' },
+    medium: { angle: 20, easing: 'easeOut' },
+    hard: { angle: 45, easing: 'easeOut' },
+};
+class SkewMouseAnimation extends CustomMouse {
+    progress({ x: progressX, y: progressY }) {
+        let translateX = 0;
+        let translateY = 0;
+        let skewX = 0;
+        let skewY = 0;
+        const { distance, angle, axis, invert } = this.options;
+        // distance
+        if (axis !== 'vertical') {
+            translateX = mapRange(0, 1, -distance.value, distance.value, progressX) * invert;
+            skewX = mapRange(0, 1, angle, -angle, progressX) * invert;
+        }
+        if (axis !== 'horizontal') {
+            translateY = mapRange(0, 1, -distance.value, distance.value, progressY) * invert;
+            skewY = mapRange(0, 1, angle, -angle, progressY) * invert;
+        }
+        if (axis === 'both') {
+            // We want to do `skewX *= progressY < 0.5 ? 1 : -1`
+            // but normalize it by y progress (so it will be 0 when y is 0.5)
+            // and apply a circInOut easing on the progress so it will feel more natural
+            skewX *= mapRange(0, 1, 1, -1, circInOut(progressY));
+            // we want to do `skewY *= progressX < 0.5 ? 1 : -1`
+            // but normalize it by x progress (so it will be 0 when x is 0.5)
+            // and apply a circInOut easing on the progress so it will feel more natural
+            skewY *= mapRange(0, 1, 1, -1, circInOut(progressX));
+        }
+        const units = getCssUnits(distance.type);
+        const transform = `translateX(${translateX}${units}) translateY(${translateY}${units}) skew(${skewX}deg, ${skewY}deg) rotate(var(--comp-rotate-z, 0deg))`;
+        this.target.style.transform = transform;
+    }
+    cancel() {
+        this.target.style.transform = '';
+        this.target.style.transition = '';
+    }
+}
+export default function create(options) {
+    const { transitionDuration, transitionEasing } = options;
+    const { power, inverted = false, distance = { value: 200, type: 'px' }, angle = 25, axis = 'both', } = options.namedEffect;
+    const invert = inverted ? -1 : 1;
+    const animationOptions = {
+        transition: transitionDuration
+            ? `transform ${transitionDuration}ms ${getMouseTransitionEasing(power ? paramsMap[power].easing : transitionEasing)}`
+            : '',
+        invert,
+        distance,
+        angle: power ? paramsMap[power].angle : angle,
+        axis,
+    };
+    return (target) => new SkewMouseAnimation(target, animationOptions);
+}

package/dist/es/library/mouse/SpinMouse.js

@@ -0,0 +1,26 @@
+import { getMouseTransitionEasing, getAngleInDeg } from '../../utils';
+import { CustomMouse } from './CustomMouse';
+class SpinMouseAnimation extends CustomMouse {
+    progress({ x: progressX, y: progressY }) {
+        const { invert, axis } = this.options;
+        const rotation = getAngleInDeg([0.5, 0.5], [axis === 'vertical' ? 0 : progressX, axis === 'horizontal' ? 0 : progressY], 90) * invert;
+        this.target.style.transform = `rotate(calc(${rotation}deg + var(--comp-rotate-z, 0deg)))`;
+    }
+    cancel() {
+        this.target.style.transform = '';
+        this.target.style.transition = '';
+    }
+}
+export default function create(options) {
+    const { transitionDuration, transitionEasing = 'linear' } = options;
+    const { inverted = false, axis = 'both' } = options.namedEffect;
+    const invert = inverted ? -1 : 1;
+    const animationOptions = {
+        transition: transitionDuration
+            ? `transform ${transitionDuration}ms ${getMouseTransitionEasing(transitionEasing)}`
+            : '',
+        invert,
+        axis,
+    };
+    return (target) => new SpinMouseAnimation(target, animationOptions);
+}

package/dist/es/library/mouse/SwivelMouse.js

@@ -0,0 +1,52 @@
+import { getMouseTransitionEasing, mapRange } from '../../utils';
+import { CustomMouse } from './CustomMouse';
+const paramsMap = {
+    soft: { angle: 25, perspective: 1000, easing: 'easeOut' },
+    medium: { angle: 50, perspective: 700, easing: 'easeOut' },
+    hard: { angle: 85, perspective: 300, easing: 'easeOut' },
+};
+const transformOrigins = {
+    top: [0, -50],
+    bottom: [0, 50],
+    right: [50, 0],
+    left: [-50, 0],
+    'center-horizontal': [0, 0],
+    'center-vertical': [0, 0],
+};
+class SwivelMouseAnimation extends CustomMouse {
+    progress({ x: progressX, y: progressY }) {
+        let rotateAxis = 'rotateX';
+        let progress = progressY;
+        let invertVertical = -1;
+        const { pivotAxis, angle, invert, perspective } = this.options;
+        if (pivotAxis === 'center-horizontal' || pivotAxis === 'right' || pivotAxis === 'left') {
+            rotateAxis = 'rotateY';
+            progress = progressX;
+            invertVertical = 1;
+        }
+        // if progress  === 0, rotate === angle, if progress === 0.5, rotate === 0, if progress === 1, rotate === angle
+        const rotate = mapRange(0, 1, -angle, angle, progress) * invertVertical * invert;
+        const [translateX, translateY] = transformOrigins[pivotAxis];
+        const transform = `perspective(${perspective}px) translateX(${translateX}%) translateY(${translateY}%) ${rotateAxis}(${rotate}deg) translateX(${-translateX}%) translateY(${-translateY}%) rotate(var(--comp-rotate-z, 0deg))`;
+        this.target.style.transform = transform;
+    }
+    cancel() {
+        this.target.style.transform = '';
+        this.target.style.transition = '';
+    }
+}
+export default function create(options) {
+    const { transitionDuration, transitionEasing } = options;
+    const { power, inverted = false, angle = 5, perspective = 800, pivotAxis = 'center-horizontal', } = options.namedEffect;
+    const invert = inverted ? -1 : 1;
+    const animationOptions = {
+        transition: transitionDuration
+            ? `transform ${transitionDuration}ms ${getMouseTransitionEasing(power ? paramsMap[power].easing : transitionEasing)}`
+            : '',
+        invert,
+        angle: power ? paramsMap[power].angle : angle,
+        perspective: power ? paramsMap[power].perspective : perspective,
+        pivotAxis,
+    };
+    return (target) => new SwivelMouseAnimation(target, animationOptions);
+}