motiondivision / motionone

https://motion.dev
MIT License
2.92k stars 52 forks source link

[Feature] scroll easing - ease target to scroll location #257

Open kauaicreative opened 5 months ago

kauaicreative commented 5 months ago

Is your feature request related to a problem? Please describe. scroll animate is not smooth when using a mouse or scrolling quickly.

Describe the solution you'd like Is there a way to add an easing to the scroll target? We see this a lot with gsap. for example https://codepen.io/creativeocean/pen/qBbBLyB

vnphanquang commented 5 months ago

There is a smooth option for ScrollOptions but that doesn't seem to do anything as of 2775786f4f0ba21cbf222d72a68263c7627c4825.

https://github.com/motiondivision/motionone/blob/2775786f4f0ba21cbf222d72a68263c7627c4825/packages/dom/src/gestures/scroll/types.ts#L54


For what it's worth, here is what I did to achieve "scroll easing" in the context of Svelte:

import { scroll, animate } from 'motion';
import { cubicOut } from 'svelte/easing';
import { tweened } from 'svelte/motion';

/**
 * @param {number} from
 * @param {number} to
 * @param {number} progress
 */
function interpolate(from, to, progress) {
    return from + (to - from) * progress;
}

// animation business logics
const FROM = 0;
const TO = 360;
const rotate = tweened(FROM, {
    duration: 500,
    easing: cubicOut,
});

const el = document.querySelector('.element');

rotate.subscribe((value) => {
    el.style.transform = `rotate(${value}deg)`;
})

scroll(
    animate((progress) => {
        rotate.set(interpolate(FROM, TO, progress));
    }),
    {
        offset: ['-100px center', 'end center'],
        target: el,
    },
);