feat: view-transition-api

[horvbalint]

In this PR I created a demo for the (very) new View Transitions API.

This API allows web applications to animate complex layout shifts with relative ease and achieve a very native like look. This PR is only a rough demo of the feature, it can be improved a lot if this is something that the core Elk maintaners and the community would like to see.

The API is currently only available in desktop and android Chrome, for other browsers everything should work like before.

How does it look?

Currently only the change between the feed and a specific post is animated.

mobile.demo.mp4

Hacks/Changes/Problems:

These hacks and problems can be eliminated with some more work (in theory).

• There is a 100ms delay when opening a post or when returning from it to the feed
• The forced refresh of the status cache when opening a status had to be removed
  • I am not sure if this causes problems, some insight here would be appreciated
• The reduce motion user settings is currently ignored
  • I found no way to disable the view transition when using the experimental nuxt plugin . I think prefer-reduced-motion should be respected by nuxt itself and do no view-transition when set.
    • This became my first Nuxt PR 🥳
• Z-indexes can cause trouble (posts can hover over the header-nav while being animated)
• There are some visual glitches/there is room for the improvement of the animation
  • The animation could still be improved, but I think it is not bad now
• When hovering the post account avatar until the hover-card opens and then clicking the avatar, the animation fails.
  • This happens because the hover-card contains the avatar as well, and with that there are 2 animation targets for the animation avatar :/

When opening a reply, the animation succeeds, but after the context loads, it jumps to its place and looks bad :/
I don't think this is in the scope of this PR though.

Other plans:

• Add animation to the profile open action

More information on this API can be found here: https://developer.chrome.com/docs/web-platform/view-transitions/

[stackblitz]

Run & review this pull request in StackBlitz Codeflow.

[netlify]

✅ Deploy Preview for elk-docs canceled.

Name	Link
🔨 Latest commit	2a29728
🔍 Latest deploy log	https://app.netlify.com/sites/elk-docs/deploys/65fd2495eca5ef00091ac71f

[netlify]

✅ Deploy Preview for elk-zone ready!

Name	Link
🔨 Latest commit	2a29728
🔍 Latest deploy log	https://app.netlify.com/sites/elk-zone/deploys/65fd249511df860008764700
😎 Deploy Preview	https://deploy-preview-2211--elk-zone.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[danielroe]

We have support for this built in to Nuxt, which can be enabled with:

export default defineNuxtConfig({
  experimental: {
    viewTransition: true
  }
})

Of course, it still needs to be used with CSS.

[horvbalint]

@danielroe Wow, that is awesome! I will look into it. That should eliminate the 100ms hack I think 😄

[patak-dev]

This looks amazing @horvbalint!

[userquin]

It would be nice if also adding the transition when clicking in the toot account.

[horvbalint]

That would be great indeed 😍 I will work on this in the upcoming days, hopefully it will take shape slowly.

[horvbalint]

I refactored the code and now it also supports the 'open account' animation (even if the booster account is clicked!)
Sometimes the animation fails sadly and I am not sure yet what causes that :/
Until it is solved I updated the Todo list in the PR description to reflect the current state.

[horvbalint]

I excluded the account-hover-card from the transition and that apparently solved the occasional animation error 🎉
I will now work on the 'reduce motion' setting and maybe tweak the animation a bit. Then it is ready to be reviewd I think 🤔

[danielroe]

sorry for the long delay in reviewing 🙏

[horvbalint]

No problem😄 I converted it back into draft today, since I found some bugs + I want to add a user preference for the animation now that elk is using nuxt 3.10.

[userquin]

cannot see any transition on PR preview on my local...

[userquin]

@horvbalint can you run lint script on your local? it seems you need to fix the dts

[userquin]

can you update your main branch and merge changes in view-transition-api branch?

[horvbalint]

cannot see any transition on PR preview on my local...

They are off by default, you can enable them in sttings/preferences/experimental. + the transition is quite choppy in dev mode, but smooth in production builds.

[userquin]

nice, the account transition also included (awesome)

[horvbalint]

I still have some plans to fix/improve things, like the transition to a status page where there are many replies have a big stutter currently when the replies are rendered.
I think that should be fixable by waiting for the transition to end before rendering the replies, but this PR is getting somewhat big, so maybe those are better in a subsequent PR. (this is why I think this should be in experimental settings for now)

[userquin]

forgot the ci error, will take 6 hours to finish, some vitest worker cannot be terminated, there is a pending PR to fix it

[userquin]

@horvbalint #2692

[userquin]

@horvbalint PR merged, you can check now your Nuxt PR here

[horvbalint]

Thanks @userquin 🎉 I will work on this in the upcoming days.

[horvbalint]

Waiting for the transition to end before rendering the context resulted in a pretty big improvement 🥳
Before:

Screenrecorder-2024-03-17-20-00-51-675.mp4

After:

Screenrecorder-2024-03-17-20-01-45-909.mp4

I also fixed the context loading skeletons, those were shifted out of the view by a big margin from the status.

[danielroe]

Beautiful 😍

[horvbalint]

Maybe we should indicate it in 'Preferences' if the ViewTransition API is not supported by the browser? (It is only available in chromium now)

[horvbalint]

I am not sure how to signal not available functionality the proper way. In the last commit I made the settings row disabled when ViewTransitions are not supported by the browser, is this enough? Won't it be confusing why it does nothing? Or maybe the row should be hidden altogether? Should we put an explainatory text somewhere?
If the latter, then I would love some design guidence, beacuse I am not good with design :P

[shuuji3]

I think disabling the row looks good. In addition to that, how about adding a help message to the disabled row, for example, "This browser currently does not support View Transition API"? So that users can understand why this setting is not available on their browsers.

[userquin]

This should be more user oriented, it's very technical, something like 😍 Enable beutiful animations when navigating between pages (the emoji shouldn't be included) would be better

[userquin]

/cc @patak-dev any suggestion here?

[patak-dev]

I think maybe we should just say:

Suggested change

	"view_transitions_description": "Navigate pages while transitioning the common elements between them.",
	"view_transitions_description": "Animate transitions.",

[userquin]

On desktop there is some flickering if the toot is outside the destination viewport...

Go to elkdev notifications and click on this toot (it seems the scroll):

[horvbalint]

On desktop there is some flickering if the toot is outside the destination viewport...

Go to elkdev notifications and click on this toot (it seems the scroll):

This happens, because the context of a status has to be fetched when opened, while the status itself is reused from the timeline. So they appear later and shift the layout. I am not really sure what to do about this, but will try to figure something out.
(This only happens if the opened status is a reply to another)