Another View-Transition Thing I Like

Stumbled upon another view-transition thing that I think is very neat. You can change which class you’re targeting with a view transition and apply the effect to just that class.

Here is how my site was working before. Basically “fade the whole page in and out”.

Which works alright! I didn’t hate it. However, I like the effect of only changing the thing that is changing. Here is the example.

What I don’t like in this screen recording, is if I scroll down the page, there is a bit of a jump on the new page. I think I’d actually prefer that to use the old transition style.

My initial reaction is to do some type of move to identify a scroll has happened, then add a class to do the whole transition.

window.onscroll = function scrolled(e) {
   const contentarea = document.getElementsByClassName("content-area")[0];
   const contentclasses = contentarea.classList;
   contentclasses.add("whole_transition");
}

But I’m not sure yet. I’ll try that soon.