Add direction-aware view transitions to view transitions example repo

[maurer2]

Hello, I noticed that the example repo for view transitions doesn’t yet include a page demonstrating direction-aware view transitions, so I added this functionality by modifying the existing posts example.

The post page now compares the old and new postId values to determine the transition direction. It disables view transitions if the direction can't be determined or if the user navigates to the same page. There’s a bit of manual work involved in extracting the ID from the location. I wasn’t able to get the approach described in main.tsx working, since the TSR_index value only seems to only increase with each navigation, making it unsuitable for determining the transition direction. Perhaps there's an easier way to get the previous ID and next ID from the parsed locations.

Cheers

Summary by CodeRabbit

• New Features
  • Enhanced view transitions with dynamic direction awareness—transitions now intelligently adapt based on navigation direction.
  • Added backwards transition variant with corresponding animations for enhanced visual feedback during backwards navigation.

[coderabbitai]

Walkthrough

Replaces a static post viewTransition with dynamic logic that uses the router to derive numeric postId indices from from/to locations and selects 'warp' or 'warp-backwards' (or disables transition). Adds corresponding CSS keyframes and a warp-backwards variant.

Changes

Cohort / File(s)	Summary
Dynamic Post Transition Logic examples/react/view-transitions/src/routes/posts.route.tsx	Added useRouter import and router usage. Replaced static transition with a function that matches fromLocation/toLocation to /posts/$postId, extracts numeric postId indices, returns ['warp-backwards'] when navigating to a lower index, ['warp'] when navigating to a higher index, or false if indices are equal/invalid. Comments updated.
View Transition Animations examples/react/view-transitions/src/styles.css	Added warp-backwards view-transition variant (html:active-view-transition-type(warp-backwards)) and two keyframes: warp-in-backwards and warp-out-backwards, defining reverse-rotation, blur, and timing for backward transitions.

Sequence Diagram

sequenceDiagram
    participant User
    participant Router
    participant PostsLayout
    participant CSS

    User->>Router: navigate to /posts/:postId
    Router->>PostsLayout: provide fromLocation & toLocation
    PostsLayout->>PostsLayout: match routes -> extract fromId, toId (numbers)
    PostsLayout->>PostsLayout: compare indices
    alt toId > fromId
        PostsLayout->>CSS: return ['warp']
    else toId < fromId
        PostsLayout->>CSS: return ['warp-backwards']
    else equal/invalid
        PostsLayout->>CSS: return false (disable transition)
    end
    CSS->>User: animate using selected keyframes

Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

• Verify route matching and correct extraction/parsing of postId (NaN handling).
• Confirm transition return values integrate with view-transition API.
• Review new keyframes for timing, consistency, and naming collisions.

Poem

🐰 Hopping through posts with a nimble hop,

Forward we warp, or backwards we stop,
Indices decide which dance to start,
CSS spins the scenes, a tunneling art,
Little rabbit cheers for code that hops!

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	You can run @coderabbitai generate docstrings to improve docstring coverage.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Title check	✅ Passed	The pull request title 'Add direction-aware view transitions to view transitions example repo' accurately summarizes the main change: adding direction-aware view transitions to the example repository.
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 1

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 818a5e7 and a45c8b7.

📒 Files selected for processing (2)

• examples/react/view-transitions/src/routes/posts.route.tsx (3 hunks)
• examples/react/view-transitions/src/styles.css (2 hunks)

🧰 Additional context used

📓 Path-based instructions (3)

examples/{react,solid}/**

📄 CodeRabbit inference engine (AGENTS.md)

Keep example applications under examples/react/ and examples/solid/

Files:

• examples/react/view-transitions/src/styles.css
• examples/react/view-transitions/src/routes/posts.route.tsx

**/*.{ts,tsx}

📄 CodeRabbit inference engine (AGENTS.md)

Use TypeScript in strict mode with extensive type safety across the codebase

Files:

• examples/react/view-transitions/src/routes/posts.route.tsx

**/src/routes/**

📄 CodeRabbit inference engine (AGENTS.md)

Place file-based routes under src/routes/ directories

Files:

• examples/react/view-transitions/src/routes/posts.route.tsx

🧠 Learnings (1)

📚 Learning: 2025-09-23T17:36:12.598Z

Learnt from: CR
Repo: TanStack/router PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-09-23T17:36:12.598Z
Learning: Applies to packages/{react-router,solid-router}/** : Implement React and Solid bindings/components only in packages/react-router/ and packages/solid-router/

Applied to files:

• examples/react/view-transitions/src/routes/posts.route.tsx

🪛 Biome (2.1.2)

examples/react/view-transitions/src/styles.css

[error] 90-90: expected , but instead found (

Remove (

(parse)

---

[error] 90-90: expected , but instead found warp-backwards

Remove warp-backwards

(parse)

---

[error] 90-90: expected , but instead found )

Remove )

(parse)

---

[error] 90-90: Unexpected unknown pseudo-class active-view-transition-type

See MDN web docs for more details.

(lint/correctness/noUnknownPseudoClass)

---

[error] 91-91: Unknown type selector is not allowed.

See MDN web docs for more details.
Consider replacing the unknown type selector with valid one.

(lint/correctness/noUnknownTypeSelector)

---

[error] 95-95: Unknown type selector is not allowed.

See MDN web docs for more details.
Consider replacing the unknown type selector with valid one.

(lint/correctness/noUnknownTypeSelector)

🪛 ESLint

examples/react/view-transitions/src/routes/posts.route.tsx

[error] 1-1: '@tanstack/react-router' imported multiple times.

(import/no-duplicates)

[birkskyum]

@maurer2 can you update the same in the solid example as well?

[birkskyum]

Oh, just realized there wasn't a solid view-transitions example yet - it's being added here

• docs(solid-router): port view-transition example #5815