ScrollTimeline offsets are no longer respected after last update.

@flackr @bramus @kevers-google

After the latest update (#60) the ScrollTimeline -> scrollOffsets are no longer honored. No matter how I configure the animation bounding offsets, either by element or by static css units, the animation timeline is based on the length of the page, NOT the offsets.

I don’t know what to do about this, and all my animations are broken.

Please, if anyone can help me out I would really appreciate it.

Here is an example animation I’m using:

element.animate(
  [
    { clipPath: 'inset(0% 60% 0% 0%)' },
    { clipPath: 'inset(0% 0% 0% 0%)', offset: 0.46 },
    { clipPath: 'inset(0% 0% 0% 0%)', offset: 0.46 },
    { clipPath: 'inset(0% 60% 0% 0%)' }
  ],
  {
    duration: 1,
    easing: 'cubic-bezier(0,.44,1,.57)',
    fill: "both",
    timeline: new ScrollTimeline({
        scrollSource: document.documentElement,
        scrollOffsets: [
          { target: element, edge: 'end', threshold: 0 },
          { target: element, edge: 'start', threshold: 0 }
        ],
        fill: 'both',
    }),
  }
);

The goal is to have the above keyframes start as the top of the element first comes into the bottom of the viewport, and end as the bottom of the element leaves the top of the viewport. This was working as expected up until recently, but now it is not.

How do I remedy this? Thanks in advance!

[bramus]

Scroll Offsets have recently been deleted, as those are no longer part of the spec. This polyfill stays in sync with spec changes, hence it being deleted from the polyfill as well in commit 4b78bb8cc55d5323da76dc92243bc0c3e629ad95.

I’m assuming you are directly linking to the contents of the repo and loading the polyfill from there. This is not a good idea, as breaking changes can occur (due to the spec still being in flux). Best is to make a local copy of a specific version that you want to use.

For you, that would mean a commit before 4b78bb8cc55d5323da76dc92243bc0c3e629ad95, which is 3063e156535f3ab1ffc8a4000ffdd3290232c121. You can browse the repository at that point through this link: https://github.com/flackr/scroll-timeline/tree/3063e156535f3ab1ffc8a4000ffdd3290232c121. Download the built file from that link and use that version.

If you do still want to load that file from a CDN, GitHack – amongs other similar services – supports commit IDs in the URLs. The direct link to the file would then be https://rawcdn.githack.com/flackr/scroll-timeline/3063e156535f3ab1ffc8a4000ffdd3290232c121/dist/scroll-timeline.js

[bramus]

I think this issue may be closed, as it’s about an old feature that’s no longer part of the spec.