[FEATURE REQUEST] Shared element transitions support
Nobody has claimed this yet.
Assessment
- Difficulty
- 5/5
- Estimated time
- Over a week
- Newbie friendliness
- 25/100
- Issue type
- Feature
- Clarity
- Needs clarification
- Activity status
- Stale
- Tech stack
- typescript
Research direction
No repository file, test, or entry point is named. Start by reading the linked shared-element-transitions developer guide and checking the current router transition model; done would mean a defined, browser-supported approach for powering shared element transitions in Solid SPAs.
Written by the indexing model from the issue text.
Description
This is likely out of the scope for the time being, especially since the feature is still locked behind the chrome://flags/#document-transition flag in chrome canary.
Some resources on the incoming API in question:
- https://github.com/WICG/shared-element-transitions
- https://github.com/WICG/shared-element-transitions/blob/main/developer-guide.md
- https://www.youtube.com/watch?v=JCJUPJ_zDQ4
The transitions function by rendering the soon to be page as a separate DOM structure (kinda similar to solid's Portal) then taking a screenshot of both the previous element and the new element. These screenshots get animated in some form before the new page's contents become interactable again.
It would be really cool to see this feature power solid SPAs as soon as browsers begin to support it.
High level, this could look like:
const App = () => {
return (
<div style={{width: "100vw", height: "100vh"}}>
<NavBar />
<Routes>
<Route path="/" element={<Dashboard/>} />
<Route path="/content/:id" element={<Content/>} transition={true} />
</Routes>
</div>
);
};
it's assumed the user has configured any required css to customize the transition.
- Dominant language
- TypeScript
- Stars
- 1.3k
- Forks
- 180
- Avg merge
- 1d 13h
- Merged PRs (30d)
- 19
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
More from solidjs/solid-router
-
Difficulty 2/5 1-3 hours Newbie friendliness 74/100
solidjs/solid-router#613 ·
-
Difficulty 2/5 1-3 hours Newbie friendliness 68/100
solidjs/solid-router#605 · 1 comment ·
-
Difficulty 3/5 1-2 days Newbie friendliness 78/100
solidjs/solid-router#603 · 1 comment ·
-
<A> costs ~6us of server CPU per instance during SSR (20x a plain <a>), mostly mergeProps/splitProps Open
Difficulty 4/5 3-5 days Newbie friendliness 55/100
solidjs/solid-router#583 ·
-
enhancement
Difficulty 5/5 Over a week Newbie friendliness 35/100
solidjs/solid-router#569 · 3 comments ·
All issues in solidjs/solid-router
Similar issues
-
Difficulty 2/5 1-3 hours Newbie friendliness 70/100
-
Difficulty 2/5 1-3 hours Newbie friendliness 75/100
mksglu/context-mode#1200 ·
-
Difficulty 2/5 1-3 hours Newbie friendliness 75/100
jaegertracing/jaeger-ui#4506 ·
-
area:desktop area:ui bug platform:macos
Difficulty 2/5 1-3 hours Newbie friendliness 75/100
anthropics/claude-code#96687 ·
-
good first issue
Difficulty 1/5 Under an hour Newbie friendliness 95/100
AOSSIE-Org/DebateAI#582 · 2 comments ·