Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[scroll-animations] Relevance of scroll-driven animations #11223

Open
graouts opened this issue Nov 15, 2024 · 4 comments
Open

[scroll-animations] Relevance of scroll-driven animations #11223

graouts opened this issue Nov 15, 2024 · 4 comments
Labels
scroll-animations-1 Current Work web-animations-2 Current Work

Comments

@graouts
Copy link
Contributor

graouts commented Nov 15, 2024

I’m trying to work out what in the relevant specs makes this simple code behave differently in Chrome and Safari*:

<html>
<body style="height: 10000px">
<script>
    const target = document.body.appendChild(document.createElement("div"));
    const timeline = new ScrollTimeline({ source: document.documentElement });
    const animation = target.animate({ marginLeft: "100px" }, { timeline }); 
</script>
</body>
</html>

In Chrome, calling target.getAnimations() immediately returns the animation.

In Safari, an animation frame needs to run for the animation’s start time to auto-align and only then does calling target.getAnimations() return the animation.

I’m puzzled how an animation with an unresolved start time, which is the case for this animation until its start time is auto-aligned, can be considered relevant. But this is a recurring problem in Safari and shows up in a host of WPT tests. It’s almost as if Chrome expected the definition of a relevant animation to have a provision that if the animation is associated with a progress-based timeline, it’s relevant (or current, or in effect).

* Safari Technology Preview 207 with the "Scroll-driven Animations" flag enabled in the “Settings…" → "Feature Flags” panel.
@graouts graouts added web-animations-2 Current Work scroll-animations-1 Current Work labels Nov 15, 2024
@graouts
Copy link
Contributor Author

graouts commented Nov 15, 2024

Cc @flackr, @kevers-google and @andruud.

@flackr
Copy link
Contributor

flackr commented Nov 15, 2024 •
edited
Loading

I think this may be a dupe of #8053

In particular, an animation is relevant if it is current and not removed, and the last bullet of what constitutes a current animation calls this out:

@graouts
Copy link
Contributor Author

graouts commented Nov 15, 2024

I completely missed that because I was only looking at web-animations-2! I have a patch to address this in WebKit. Thanks @flackr.

@graouts
Copy link
Contributor Author

graouts commented Nov 18, 2024

Closing as a dupe of #8053.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
scroll-animations-1 Current Work web-animations-2 Current Work
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@graouts @flackr