Using View Transitions with HTMX

I was tuning my blog website when I found that we can use HTMX with view transitions.

My blog website code can be found here - ineersa/blog

I've found this exceptional essay - View Transitions so you may want to read it first.

The problem I was facing that on large parts of page change website was feeling "chunky", so I followed essay and added it to website:

@keyframes fade-in {
  from { opacity: 0; }
}

@keyframes fade-out {
  to { opacity: 0; }
}

@keyframes slide-from-right {
  from { transform: translateX(90px); }
}

@keyframes slide-to-left {
  to { transform: translateX(-90px); }
}

::view-transition-old(slide-it) {
  animation: 180ms cubic-bezier(0.4, 0, 1, 1) both fade-out,
  500ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-left;
}
::view-transition-new(slide-it) {
  animation: 420ms cubic-bezier(0, 0, 0.2, 1) 90ms both fade-in,
  500ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-right;
}
.slide-transition {
  view-transition-name: slide-it;
}

I'm using it to emulate page change like going inside post or to about page.

<button
			class="font-medium flex items-center justify-center px-2 py-2 mb-0 transition-all ease-in-out border-0 rounded-lg cursor-pointer text-gray-600 dark:text-gray-200 bg-inherit hover:text-primary-500"
			hx-get="/about"
			hx-trigger="click"
			hx-target="#main-content"
			hx-swap="innerHTML transition:true"
			hx-push-url="true"
		>
			About
		</button>

Before that I was using indicator with overlay via hx-indicator, after that I've got rid of it on all requests actually.

On requests where I'm not using transitions, since they are fast indicator is just flashing, which is not good for user experience.

I've tried to make responses slower (like 200-500ms), in that case indicator is actually usefull and looking nice.

View Transitions looks just stellar, only problem with them are browsers support (it's available only for Chromium based browsers), but Webkit has it on their technology preview now, Firefox has bug in BugZilla so hopefully we will get more support soon.