Usage of ViewTimeline

[bakura10]

Hi,

I have a question regarding the scroll. Until now, we were using it thinking it was using scroll-driven animations JS API under the hood. However, after inspecting the performance, it seems that Motion registers scroll events.

I've checked the implementation and it seems that Motion only uses scroll-driven animations when there is no target parameter. However in most of our use cases, we use a target parameter. It seems that Motion could use ViewTimeline here.

Can you please confirm this is the case? Maybe a note should be added to the documentation here as I felt it was not clear which one uses the native implementation or not.

Also, is there some plan to use ViewTimeline internally whenever possible?

[mattgperry]

Yeah no immediate plans but definitely want to do it. For now there is a scroll listener still registered regardless of whether a ScrollTimeline is registered (with useScroll) - but this doesn’t affect the performance of the animation itself

[bakura10]

Thanks a lot!

A bit unrelated to that, but one thing I miss with the current scroll and that I'm not able to map easily, is the lack of an offset (in the native animation, it is the view-timeline-inset, and in the JS API the startOffset/endOffset: https://developer.mozilla.org/en-US/docs/Web/API/ViewTimeline

Is there a plan to add that to the scroll API?

scroll(animation, { 
  target: document.getElementById("item"),
  startOffset: '10px',
  offset: ["start start", "end end"]
})

I know we can somehow simulate this with the offset, but one benefit of having that as distinct properties is that it makes it way easier to do the animation in pure CSS and then use scroll in JS as a polyfill for older browsers, as we just have to map the same values exactly.

Thanks!