Experiments

/*
 * MUST READ BEFORE USE
 *
 * This CSS is specifically designed for use with WORDPRESS BLOCKS,
 * generally GROUP BLOCKS.
 *
 * Add the class "scroll-expand" to the Group Block you want to animate.
 *
 * The block expands from the WordPress Content Width to the WordPress
 * Wide Width as it scrolls into view.
 *
 * On smaller screens (767px and below), the animation is disabled and
 * the block retains normal WordPress behaviour.
 */
.scroll-expand {
    width: var(--wp--style--global--content-size);
    max-width: var(--wp--style--global--content-size);
    margin-inline: auto;
    animation: expand-to-wide linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 50%;
}
@keyframes expand-to-wide {
    from {
        width: var(--wp--style--global--content-size);
        max-width: var(--wp--style--global--content-size);
    }
    to {
        width: var(--wp--style--global--wide-size);
        max-width: var(--wp--style--global--wide-size);
    }
}
/* Don't animate on smaller screens */
@media (max-width: 767px) {
    .scroll-expand {
        width: 100%;
        max-width: 100%;
        animation: none;
    }
}