search

motiondivision / motionone

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

[Feature] Add an "inset" to the scroll getsures #233

Open bakura10 opened 1 year ago

bakura10 commented 1 year ago

Hi,

I am recently experimenting with the native Scroll Animation feature (https://www.w3.org/TR/scroll-animations-1/) and one very useful thing is the ability to have an inset for the scroll gesture (which allows to take into account sticky elements for instance):

const timeline = new ViewTimeline({
        subject: this,
        axis: 'block',
        inset: `${getComputedStyle(this).getPropertyValue('--sticky-area-height')} 0px`
      });

Motion API maps pretty nicely as a fallback for browsers not supporting it, but it just lacks this inset feature.

Thanks.