High level options for customizing animation for offscreen elements

[vmpstr]

From the explainer:

Open question: Default animations work well for things which are at least partially in-viewport in both Page-A and Page-B, but it gets tricky if you consider a non-sticky header that scrolled out of view by 1000s of pixels.

[jakearchibald]

I don't have a good idea for this aside from another CSS property:

.whatever {
  page-transition-clamp-position: just-out-of-viewport-please;
}

[jakearchibald]

This page documents the issue here https://static-misc-2.glitch.me/page-transition/#header-to-new-position-scrolled

[jakearchibald]

A high level solution here would be something like:

.whatever {
  page-transition-offscreen-behavior: …;
}

Where the values could be:

• default - element takes its true position (the current behaviour).
• clamp - clamp the element's position so it's just out of view, compared to the other end of the animation.
• absent - behave as if the element is absent in this half of the transition.

But I'm going to look into lower-level solutions.

[absurdprofit]

@jakearchibald why not leave it up to the user since they have to offer up the shared elements anyways?

[jakearchibald]

I think you're talking about the low-level solution 😄

It might not be as easy as you think. Try writing some demo code for it.

[absurdprofit]

Yea you're right. The idea would be library authors would need to orchestrate these transitions and this could be left to them. I will try a demo though.

[khushalsagar]

The default behaviour is that the element animates from its actual viewport position. #117 is exploring the low level solution to give devs the computed info so the exact behaviour can be expressed in script. I'll leave this one open for a high level CSS attribute to do the common options.

[jakearchibald]

I don't think we need the clamp option initially, but I think we should ship something to do absent along with MPA transitions (which will typically use less JS).

[khushalsagar]

+1 to Jake's comment, we can start with a simpler property for now. So the summarized proposal is:

• Add a new CSS property view-transition-offscreen which customizes the behavior for named elements based on their position in the snapshot viewport.
• The property has 2 values: auto and absent. auto indicates that the UA should render the element irrespective of its viewport position (as-if its onscreen). Would be nice to allow flexibility to the UA to optimize out such elements in case the transition is on memory constrained devices. That's why "should" instead of "must".
• absent indicates that if the element's ink overflow rectangle does not intersect the snapshot viewport, the element does not participate in the transition (as-if its view-transition-name's computed value was none).
• The computation for the element's viewport position for the decision above can be done here for old elements. And here for new elements. The subtlety is that for new elements we do it before resolving the ready promise so script can observe the final pseudo DOM structure.

[jakearchibald]

• auto indicates that the UA should render the element irrespective of its viewport position (as-if its onscreen). Would be nice to allow flexibility to the UA to optimize out such elements in case the transition is on memory constrained devices. That's why "should" instead of "must".

Hmmmmm, it might not be compatible to discard elements in some later release without an opt-in. However, auto seems like good wording, since it covers the content-visibility case.

+1 to the rest.

[khushalsagar]

Closing this so we can continue the discussion in csswg.