Open kauaicreative opened 5 months ago
There is a smooth
option for ScrollOptions
but that doesn't seem to do anything as of 2775786f4f0ba21cbf222d72a68263c7627c4825.
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,
},
);
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