Extending LiveView with View Transition API support

[spicychickensauce]

I’ve previously explored what is possible today with hacks to implement view transitions in our apps:

View Transition API in LiveView

View Transition API just landed in Firefox, which means it’s soon fully ready to be used. Unfortunately, I haven’t found a good way yet to make use of it with liveview. There seems to be a hacky way available: Does Liveview support view-transitions? - #4 by greven But this wraps way too much code inside the startViewTransition callback, not just the dom mutation. Because of that, There is a big delay between the navigation click and the end of the transition. I have found that changing it …

I have since created a fork to implement proper support.
I’m quite happy with it and hope this can make it into phoenix.

Here is the fork: GitHub - spicychickensauce/phoenix_live_view at implement-view-transitions
Here is a demo app using the fork: LiveView View Transitions Demo · GitHub
And here is a quick video of that demo: https://imgur.com/a/OvhnSVm

The API adds two new functions:
start_view_transition(socket, options), needed to trigger page transitions + same document transitions on update.
and
JS.start_view_transition(js, options), needed when using JS.navigate() or similar.

The current implementation is still a bit hacky and the passed options are not fully conistent yet, but before polishing this more I’d ideally like to get some buy in from any members of the phoenix team first.

I’m also open to any suggestions on how to improve this or on use cases that couldn’t be implemented using this API.

[spicychickensauce]

I’m a bit sad I got no replies here…
Not sure if its ok to tag you, but @chrismccord @steffend, I’d greatly appreciate if you could provide any feedback, thanks!

[steffend]

Sorry, I didn’t find the time to look at it earlier. Because I’m not too familiar with view transitions, I tried to work on a more generic API that allows you to do this without being specific to view transitions. See Add beforePatch callback and allow specifying event dispatch phase by SteffenDE · Pull Request #4043 · phoenixframework/phoenix_live_view · GitHub and the linked gist where I adapted your example to use this new API.

We’ll have to see what other maintainers think about it, but it looks like a good solution to me!

[spicychickensauce]

Wow, that’s very nice, thank you very much!

Going for a more generic approach also makes sense to me, but I’m not so sure if it’s needed. Do you know any other applications for this other than view transitions?
If not, going for the more specific implementation seems nicer to me from a user perspective, as it would make it easier to document.
But I totally understand if you want to keep it generic from a maintenance perspective, as that requires less knowledge.

Either way, thank you very much for adapting my example and implementing an alternative, I’d also be quite happy with this solution!

[steffend]

The reason why I don’t want to go for a view transition specific API for now is that I don’t want to decide on an API without having more experience using them. When people start using view transitions more and more, we should look into a nicer API for sure.

[karolsluszniak]

Thank you both for pushing this forward! I have a few SPA-like LV apps, also currently seeking for the best way to pack them as AppStore apps (e.g. with Capacitor, Flutter or a custom shell) with proper native feel, and these transitions would be a game changer so I’d absolutely love to see these possible. Can’t wait for the above PR to land in LV.