View Transition for Flarum

DaleZ

View Transition for Flarum

Bringing a bit more smoothness when you hanging out the forum.

Feature

Providing transition while page switching, make the sudden away (some of them).
The animation is fade in and out by default. Please click the image to watch video:
[Remove until we find a new storage]

It's enough for the most case. However, you can go further to make perfect.
Such as...create some Google feel:
[Remove until we find a new storage]
How easy it is? Just as easy as putting this code below into custom CSS/Less!

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

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

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

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

::view-transition-old(root) {
  animation: 90ms cubic-bezier(0.4, 0, 1, 1) both fade-out,
    300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-left;
}

::view-transition-new(root) {
  animation: 210ms cubic-bezier(0, 0, 0.2, 1) 90ms both fade-in,
    300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-right;
}

#alerts {
  view-transition-name: alerts;
}

.App-composer {
  view-transition-name: composer;
}

aside.DiscussionPage-list {
  view-transition-name: discussionlist;
}

#header {
  view-transition-name: header;
}

(Modified from the code provided by Chrome for Developers，original code sample is licensed under the Apache 2.0 license)

Want to make something different your own? Go to MDN to learn more.

Install

composer require dalez/flarum-view-transition:"*"

(It is not currently marked as an stable version and may require additional parameters to be specified)

Note

View Transition is a new feature for browsers, with low compatibility. Go to Caniuse to learn if it's compatible with your browser.
This extension is seperated from Fluent which is currently developing (see DaleZ). Fluent will have its own transition, with specially tailored animation.
Any contribution to it is welcome. I'm especially looking forward to the more perfect Google and Apple's animation. 😋

DaleZ

Someone may found I had some chat with mithril developer, and the conclusion drawn there was impossible to do this. But yes, it's truly impossible when we just do with the way they hope us to do.
We did a deeper hook on mithril, and it can almost be destructive. So there's no transition at all when you click back/forward button provided by browser, because our hook just can't touch there. Alternatively, you may want to get transition by click the same button in Flarum's navigation bar.
You can expect mithril officially have this integration on 2030. 😅

DaleZ

It's actually not too complex. What we do is only bringing some elements to play while switching page. These elements are two screenshots, which records the old and the new view. You can just imagine them as two page of PowerPoint slides, and we set additional styles or nothing to get smooth, animated shifts between slides, just with different kinds of animation.

Actually, if you can and want, make the transitions as the same of PPT shifts is absolutely possible. The project like this (bramus/ie-page-transitions) has been implemented that, and it's not too hard to do the same for the Flarum. In fact, with this extension, the possibility of making different kinds of page transitions is almost limitless.

There's no need to worry about the stability of this. Though it digs very deep to the core, it can work very well in current version. We still planning for more too. Can't wait to see what you'll make.