This content originally appeared on Bram.us and was authored by Bramus!
If the dimensions of the ::view-transition-group(*) don’t change between the old and new snapshot, you can optimize its keyframes so that the pseudo-element animates on the compositor.
~
🌟 This post is about View Transitions. If you are not familiar with the basics of it, check out this 30-min talk of mine to get up to speed.
~
With View Transitions, the ::view-transition-group() pseudos are the ones that move around on the screen and whose dimensions get adjusted as part of the View Transition. You can see this in the following visualization when hovering the browser window:
See the Pen
View Transition Pseudos Visualized (2) by Bramus (@bramus)
on CodePen.
The keyframes to achieve this animation are automatically generated by the browser, as detailed in step 3.9.5 of the setup transition pseudo-elements algorithm.
Set capturedElement’s group keyframes to a new CSSKeyframesRule representing the following CSS, and append it to document’s dynamic view transition style sheet:
@keyframes -ua-view-transition-group-anim-transitionName { from { transform: transform; width: width; height: height; backdrop-filter: backdropFilter; } }
Note: There are no to keyframes because the relevant ::view-transition-group has styles applied to it. These will be used as the to values.
~
While this all works there one problem with it: the width and height properties are always included in those keyframes, even when the size of the group does not change from its start to end position. Because the width and height properties are present in the keyframes, the resulting animation runs on the main thread, which is typically something you want to avoid.
Having UAs omit the width and height from those keyframes when they don’t change could allow the animation to run on the compositor, but OTOH that would break the predictability of things. If you were to rely on those keyframes to extract size information and the info was not there, your code would break.
TEASER: Some of the engineers on the Blink team have explored a path in which width and height animations would be allowed to run on the compositor under certain strict conditions. One of those conditions being that the values don’t change between start and end. The feature, however, has only been exploratory so far and at the time of writing there is no intention to dig deeper into it because of other priorities.
~
In a previous post I shared how you can get the old and new positions of a transitioned element yourself. This is done by calling a getBoundingClientRect before and after the snapshotting process.
const rectBefore = document.querySelector('.box').getBoundingClientRect();
const t = document.startViewTransition(updateTheDOMSomehow);
await t.ready;
const rectAfter = document.querySelector('.box').getBoundingClientRect();With this information available, you can calculate the delta between those positions and create your own FLIP keyframes to use with translate to move the group around in case when the old and new dimensions (width and height) are the same.
const flip = [
`${(rectBefore.left - rectAfter.left)}px ${(rectBefore.top - rectAfter.top)}px`,
`0px 0px`,
];
const flipKeyframes = {
translate: flip,
easing: "ease",
};The generated keyframes can then be set on the group by sniffing out the relevant animation and updating the effect’s keyframes.
const boxGroupAnimation = document.getAnimations().find((anim) => {
return anim.effect.target === document.documentElement &&
anim.effect.pseudoElement == '::view-transition-group(box)';
});
boxGroupAnimation.effect.setKeyframes(flipKeyframes);Because the new keyframes don’t include the width and height properties, these animations can now run on the compositor.
In the following demo (standalone version here) this technique is used.
See the Pen
Better performing View Transition Animations, attempt #2, simplified by Bramus (@bramus)
on CodePen.
(Instructions: click the document to trigger a change on the page)
When the width and height are different, you could calculate a scale transform that needs to be used. I’ll leave that up to you, dear reader, as an exercise.
~
In the following demo the default generated animation and my FLIP-hijack version are shown side-by-side so that you can compare how both perform.
See the Pen Regular and Better performing View Transition Animations side-by-side by Bramus (@bramus)
on CodePen.
Especially on mobile devices the results are remarkable.
~
🔥 Like what you see? Want to stay in the loop? Here's how:
This content originally appeared on Bram.us and was authored by Bramus!
Bramus! | Sciencx (2025-02-07T19:55:01+00:00) View Transitions Applied: More performant ::view-transition-group(*) animations. Retrieved from https://www.scien.cx/2025/02/07/view-transitions-applied-more-performant-view-transition-group-animations/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.