Skip to content

feat: add support for view transitions#1532

Closed
marvinhagemeister wants to merge 8 commits into
mainfrom
view-transitions
Closed

feat: add support for view transitions#1532
marvinhagemeister wants to merge 8 commits into
mainfrom
view-transitions

Conversation

@marvinhagemeister

@marvinhagemeister marvinhagemeister commented Jul 26, 2023

Copy link
Copy Markdown
Contributor

This is a very rough draft for natively supporting view transitions in Fresh. It's inspired by the recent astro announcement. I quite like the way they handle the CSS generation via attributes.

Keep in mind that this is a very early prototype.

Rough demo:

fresh-view-transitions.mp4

TODO:

  • generate CSS bindings on the fly
  • Ensure correctness of history entries
  • Only load view transition code when used.
  • tests

@marvinhagemeister

Copy link
Copy Markdown
Contributor Author

Updated video:

fresh-view_ransitions_3.mp4

(I know it's not the prettiest animation, it's just to show that it works)

@welschmoor

Copy link
Copy Markdown

Dear Santa...

really looking forward to it!

@mgenereu

mgenereu commented Feb 6, 2024

Copy link
Copy Markdown
Contributor

Do you think this will eventually work with partials?

@5hanth

5hanth commented Feb 19, 2025

Copy link
Copy Markdown

still on cards?

bartlomieju added a commit that referenced this pull request Mar 26, 2026
Integrates the View Transitions API into Fresh's existing partials
system. When enabled via the `f-view-transition` attribute, partial
updates are wrapped in `document.startViewTransition()` for smooth
animated transitions between pages.

Usage:
  <body f-client-nav f-view-transition>

The API is opt-in and progressive:
- Only activates when `f-view-transition` attribute is present
- Falls back to regular updates when the View Transitions API
  is not supported by the browser
- Works with all navigation types: link clicks, popstate, and
  form submissions

Users can customize animations via standard CSS:
  ::view-transition-old(root) { animation: ... }
  ::view-transition-new(root) { animation: ... }

Supersedes #1532

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@bartlomieju

Copy link
Copy Markdown
Contributor

Closing in favor of #3708 which integrates View Transitions into Fresh 2.x's existing partials system. Instead of a parallel navigation system, the new approach wraps partial updates in document.startViewTransition() — opt-in via f-view-transition attribute. Thanks for the original prototype!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

5 participants