search

flackr / scroll-timeline

A polyfill of ScrollTimeline.
Apache License 2.0
890 stars 84 forks source link

Implement the procedure for calculating an auto-aligned start time #176

Closed johannesodland closed 6 months ago

johannesodland commented 7 months ago

Currently animation range start and range end is mapped to delay and endDelay of the animation effect. This causes the finished promise to resolve at the wrong time, and similarly the finished event is emitted at the wrong time.

This PR implements the procedure for calculating an auto-aligned start time. (https://github.com/w3c/csswg-drafts/pull/9181/files). It aligns the start time based on animation range start, no longer maps ranges to effect delay and end delay.

Summary of changes to proxy-animation: - Remove the reset current time on resume flag (https://github.com/w3c/csswg-drafts/pull/9181/files) - Update the conditions for when an animation is ready (https://drafts.csswg.org/web-animations-2/#waiting-for-the-associated-effect) - Update timeline, startTime and currentTime setters so that they sets the `auto align start time` flag - Update playInternal so that - it sets the `auto align start time` flag - it delays add animation until after the ready promise is created. (Otherwise it will run while playState is idle) - Update tickAnimation so that it runs the auto align start time procedure - Take range duration into account when - converting to and from CSSNuberish - calculating computed timing
Summary of changes to scroll-timeline-base: - Remove renormalization callback, as it was only necessary when start and end delay was mapped to ranges - Store additional values on new source and on resize: scrollWidth, scrollHeight, clientWidth, clientHeight - Values are stored once after resize - Store ranges and update them on resize, as the auto align procedure will access them frequently
johannesodland commented 7 months ago

Overall very cool to see the auto-aligned start time calculations implemented.

I just landed support for showing the diff on test results 5a2639a . When you push another commit to this branch it should be enough to kick off the github action that will add the diff in the test results to the PR. I'm hoping this will help demonstrate that this is tested by the existing wpt tests and passes more as a result.

Nice :) I've been running tests and diffing by hand. It will be nice to have this automated 🙌