scroll-timeline: 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!

About this issue

Original URL
State: closed
Created 2 years ago
Comments: 28

Most upvoted comments

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 on Aug 1, 2022

scrollOffsets are being replaced by the CSS property animation-range (drop the ‘animation-’ prefix when using the JS API). Currently, animation-range is wired up for view timelines, and they should soon be available for non-view scroll-timelines. The polyfill implementation is also a bit out of date given recent spec changes. I hope to free up some time to work on the polyfill soon. In the meantime, a more complete implementation is available in Chrome canary (requires enabling experimental-web-platform-features). Over the coming months, the gap will be closed between the polyfill and native implementations. Not enough hours in the day. 😃

There are two compelling reasons for the API change. Firstly, it moves the active range from being a timeline property to an animation property and facilitates being able to attach multiple animations with differing ranges to the same timeline. Secondly, scrollOffsets did not have a clear CSS counterpart. With the redesign, you can do things like:

.animated {
  animation-name: anim;
  animation-duration: auto;
  animation-timeline: scroll(nearest block);
  animation-range:  10% 90%;
}

Naturally, the JavaSscript approach via element.animate will also be supported.

Side note: The ‘enter’ range was renamed ‘entry’. Not sure if the name change is reflected in the polyfill yet. Another relatively recent spec change. Spotted in scrolling back through the comments.

kevers-google on May 11, 2023