Recreate animation on resize

[mrleblanc101]

Hi,

I have a cube bouncing to each side of the window like this:

How would I reset the animation on resize ?
I can't figure out how.

If I put useMotion in a method, and call in onMounted and onResize, it seems like the previous useMotion is not destroyed and everything bug.

[mrleblanc101]

Like this it works, but then I have complication with TypeScript:

<script lang="ts" setup>
import { useMotion } from '@vueuse/motion';
import { useResizeObserver } from '@vueuse/core';

const { duration = 3000 } = defineProps<{
    duration?: number;
}>();

const emit = defineEmits(['bounce']);

const object = ref();
const container = ref();
let motionInstance;

function startAnimation() {
    const transitionOptions = {
        duration: duration,
        ease: 'linear',
    };
    const halfWidth = container.value.clientWidth / 2 - object.value.offsetWidth / 2;
    const halfHeight = container.value.clientHeight / 2 - object.value.offsetHeight / 2;

    const leftPositions = { x: 0, y: halfHeight };
    const bottomBouncePositions = {
        x: halfWidth,
        y: container.value.clientHeight - object.value.offsetHeight,
    };
    const rightBouncePositions = {
        x: container.value.clientWidth - object.value.offsetWidth,
        y: halfHeight,
    };
    const topBouncePositions = { x: halfWidth, y: 0 };

    if (motionInstance) {
        motionInstance.stop();
        object.value.style = '';
        motionInstance = null;
    }

    motionInstance = useMotion(object, {
        enter: {
            x: leftPositions.x,
            y: leftPositions.y,
            opacity: 1,
            transition: {
                onComplete: () => {
                    motionInstance.variant.value = 'bottomBounce';
                },
            },
        },
        bottomBounce: {
            x: bottomBouncePositions.x,
            y: bottomBouncePositions.y,
            transition: {
                ...transitionOptions,
                onComplete: () => {
                    emit('bounce');
                    motionInstance.variant.value = 'rightBounce';
                },
            },
        },
        rightBounce: {
            x: rightBouncePositions.x,
            y: rightBouncePositions.y,
            transition: {
                ...transitionOptions,
                onComplete: () => {
                    emit('bounce');
                    motionInstance.variant.value = 'topBounce';
                },
            },
        },
        topBounce: {
            x: topBouncePositions.x,
            y: topBouncePositions.y,
            transition: {
                ...transitionOptions,
                onComplete: () => {
                    emit('bounce');
                    motionInstance.variant.value = 'leftBounce';
                },
            },
        },
        leftBounce: {
            x: leftPositions.x,
            y: leftPositions.y,
            opacity: 1,
            transition: {
                ...transitionOptions,
                onComplete: () => {
                    emit('bounce');
                    motionInstance.variant.value = 'bottomBounce';
                },
            },
        },
    });
}

useResizeObserver(container, () => {
    startAnimation();
});
</script>

Variable 'motionInstance' implicitly has an 'any' type.

But if I manually type motionInstance, it's gigantic:

let motionInstance: MotionInstance<
    'enter',
    {
        enter: {
            x: number;
            y: number;
            transition: {
                onComplete: () => void;
                duration: number;
                ease: string;
            };
        };
        bottomBounce: {
            x: number;
            y: number;
            transition: {
                onComplete: () => void;
                duration: number;
                ease: string;
            };
        };
        rightBounce: {
            x: number;
            y: number;
            transition: {
                onComplete: () => void;
                duration: number;
                ease: string;
            };
        };
        topBounce: {
            x: number;
            y: number;
            transition: {
                onComplete: () => void;
                duration: number;
                ease: string;
            };
        };
        leftBounce: {
            x: number;
            y: number;
            opacity: number;
            transition: {
                onComplete: () => void;
                duration: number;
                ease: string;
            };
        };
    }
> | null = null;

and results in more error in the onComplete:

onComplete: () => {
    motionInstance.variant.value = 'bottomBounce'; // 'motionInstance' is possibly 'null'.
},

I know I can fix it with motionInstance!.variant.value since it's always defined inside the callback, but that doesn't seem to be the right solution.

[mrleblanc101]

The best I've been able to clean the type is:

type MotionConfig = {
    x: number;
    y: number;
    transition: {
        onComplete: () => void;
        duration: number;
        ease: string;
    };
};

type MotionMap = {
    enter: {
        x: number;
        y: number;
        opacity: number;
        transition: {
            onComplete: () => void;
        };
    };
    bottomBounce: MotionConfig;
    rightBounce: MotionConfig;
    topBounce: MotionConfig;
    leftBounce: MotionConfig;
};

let motionInstance: MotionInstance<'enter', MotionMap> | null = null;