oku-ui / motion

Motion One for Vue is a 5kb animation library for Vue 3 and Nuxt 3. Built on Motion One, it's capable of springs, independent transforms, and hardware accelerated animations.
https://motion.oku-ui.com
MIT License
208 stars 5 forks source link

animate function should take in a callback parameter #35

Open gal-cernilogar opened 9 months ago

gal-cernilogar commented 9 months ago

Clear and concise description of the problem

The animate function should be able to take in a callback as described in the motionone docs.

Suggested solution

In Motion One for Vue, there was an animate.es.js file in the motion module, which contained the extended functionality of the animate function with:

import { animate as animate$1, withControls } from '@motionone/dom';
import { isFunction } from '@motionone/utils';
import { Animation } from '@motionone/animation';

function animateProgress(target, options = {}) {
    return withControls([
        () => {
            const animation = new Animation(target, [0, 1], options);
            animation.finished.catch(() => { });
            return animation;
        },
    ], options, options.duration);
}
function animate(target, keyframesOrOptions, options) {
    const factory = isFunction(target) ? animateProgress : animate$1;
    return factory(target, keyframesOrOptions, options);
}

export { animate, animateProgress };

Alternative

No response

Additional context

Without this functionality, the claim

The animate prop accepts all the same values and keyframes as Motion One's animate function.

at Oku Motion docs cannot be made as it is an important feature which prevents the transition from Motion One for Vue to Oku Motion.

Validations