Kevin Powell - Community•5mo ago

How to disable view transitions on elements when I'm animating in startViewTransition?

So, I have view-transition-name here and there on various elements of my content, so that when I move from page to page they transition nicely and all. I just added an intra-page view transition on my theme-toggling button so that when I switch between light and dark, the new color scheme appears to reveal itself from the button. It works well, except the elements that have a view-transition toggle between light/dark immediately, which results in flicker in those elements: the element changes its colors to match the new color palette while on the page with the old theme, so it's basically invisible until the area with the new theme applied expands to cover it. It seems view transitions are unaffected by transition-property, so trying to restrict transitions only to layout-related properties on those elements had no effect. Is there maybe a pseudo selector triggered while same-page view transitions are happening? Any other idea? Here's a slowed-down video. The date-time on the left has a cross-page view transition name and is affected.

12 Replies

jcayzacOP•5mo ago

I removed all the view-transition-name styles for now…

clevermissfox•5mo ago

If you post your code in codepen or codesandbox or scrimba youre more likely to get help. The guys that frequently volunteer their time cant do much with a screen recording . kudos on playing w view-transitions though. i'm super excited about them and dont see people playing with them at all.

jcayzacOP•5mo ago

@clevermissfox The cross-page ones were performing very badly on my (admitedly low-end) phone, so I think removing them was a good decision. The technology doesn't seem mature enough for production, too —browser support is limited and buggy. I find the lone in-page transition on the theme toggler to give a much nicer touch! I guess my phone is too busy loading up the new DOM to render the transitions with any acceptable frame rate 😄 (even when the page is prefetched already) It looked pretty cool on desktop, tho

clevermissfox•5mo ago

It's definitely only supported enough for progressive enhancement, support is not there for production without checking for @supports or checking wiyh javascript but when works it works nicely and it's fun to play with and wrap your brain around so we will be ready when it is supported!

jcayzacOP•5mo ago

I mean even when it's supported, there are glitches like the ones above. In Safari TP it's even worse, the elements with a view-transition-name property weren't just flickering as shown above but would completely vanish from the page.

clevermissfox•5mo ago

I wouldn't count TP as supported. Chrome is the only browser that seems stable with it.

jcayzacOP•5mo ago

It kind of felt like the implementators assumed view-transition-name = MPA and startViewTransition = SPA and nobody would use both. Or maybe it generally works and the bug is just because I manage light/dark with only-color-scheme

    :root {
        color-scheme: light dark;

        &[data-theme="light"] {
            color-scheme: only light;
        }

        &[data-theme="dark"] {
            color-scheme: only dark;
        }
    }

    :root {
        color-scheme: light dark;

        &[data-theme="light"] {
            color-scheme: only light;
        }

        &[data-theme="dark"] {
            color-scheme: only dark;
        }
    }

Ohhh I haven't tried using ::view-transition-old inside those rules, that could be it. Let me test that. nope… i guess the real issue is that color-scheme is not animatable 😅 Maybe I should use color-mix() on my light-dark colors and their reverse, use a css variable to slide from 0 to 1 and animate that variable.

clevermissfox•5mo ago

Relative colors is gaining support too , that one I’m very very excited for, I find myself in need of it constantly You can also make variables for your main colours for the rgb or hsl or oklch and change those as needed

 css
—hue: 310;
—chroma: 0.1;
—lightness: 70%;
—alpha: 100%;
—clr-surface-primary : oklch(var(—lightness) var(—chroma ) var(—hue) / var(—alpha) );

 css
—hue: 310;
—chroma: 0.1;
—lightness: 70%;
—alpha: 100%;
—clr-surface-primary : oklch(var(—lightness) var(—chroma ) var(—hue) / var(—alpha) );

jcayzacOP•5mo ago

so, just fyi, this level of nestedness doesn't work 😄

jcayzacOP•5mo ago

(I tried to implement a slide between my current light-dark colors and their counterpart in the other theme)

clevermissfox•5mo ago

Yeah light-dark won’t work like that but the other way around should You can also separate it in an @prefers or a data—attr that’s triggered on a toggle

jcayzacOP•5mo ago

ohh it's even weirder, lightningcss actually replaces my light-darks with it's own stuff

You can also separate it in an @prefers or a data—attr that’s triggered on a toggle

That's the old way, yes I switched to merging using light-dark() and just rely on color-scheme. This works:

--bg-1-ld: light-dark(var(--l-bg-1), var(--d-bg-1));
--bg-1-dl: light-dark(var(--d-bg-1), var(--l-bg-1));
--bg-1: color-mix(in hsl, var(--bg-1-ld), var(--bg-1-dl) var(--to-light, 0%));

--bg-1-ld: light-dark(var(--l-bg-1), var(--d-bg-1));
--bg-1-dl: light-dark(var(--d-bg-1), var(--l-bg-1));
--bg-1: color-mix(in hsl, var(--bg-1-ld), var(--bg-1-dl) var(--to-light, 0%));

Now I can try to animate --to-light

Gaming

Programming

How to disable view transitions on elements when I'm animating in startViewTransition?