Skip to content

feat: add CSS-only cross-document View Transition API demo example#10889

Closed
Pcmhacker-piro wants to merge 1 commit into
SAPTARSHI-coder:mainfrom
Pcmhacker-piro:feat/view-transitions
Closed

feat: add CSS-only cross-document View Transition API demo example#10889
Pcmhacker-piro wants to merge 1 commit into
SAPTARSHI-coder:mainfrom
Pcmhacker-piro:feat/view-transitions

Conversation

@Pcmhacker-piro

Copy link
Copy Markdown
Contributor

Description

A two-page (gallery → detail) demo showcasing the CSS View Transitions API for cross-document (MPA) navigation with shared element morphing animations.

Fixes #10877

Type of Change

  • New feature

Checklist

  • My code follows the style guidelines of this project
  • I have performed a self-review of my code
  • My changes generate no new warnings or console errors
  • No existing core files were modified

Changes Made

Created submissions/examples/ease-view-transitions/ with:

File Purpose
demo.html Gallery grid with 3 cards, each linking to detail page
detail.html Detail page with hero, sets matching view-transition-name via JS
style.css Framework imports, @view-transition rules, custom ::view-transition-old/new animations
README.md Documentation

How it works

  • @view-transition { navigation: auto } enables cross-document transitions
  • Each card image has view-transition-name: card-N
  • Detail applies matching name on hero element
  • Custom fade animations via ::view-transition-old()/new()
  • Graceful degradation for unsupported browsers
  • Respects prefers-reduced-motion

Two-page gallery-to-detail demo with shared element transitions.
Uses @view-transition, view-transition-name, and custom
::view-transition-old/new animations. Graceful degradation
for unsupported browsers. Respects prefers-reduced-motion.

Closes SAPTARSHI-coder#10877
@github-actions

Copy link
Copy Markdown
Contributor

🛑 Contribution Rate Limit Exceeded

Hi @Pcmhacker-piro! 👋

To maintain repository stability, review quality, and a fair contribution distribution, EaseMotion CSS enforces a soft contribution limit of up to 30 PRs per day per contributor.

It looks like you have submitted 57 pull requests in the last 24 hours (including this one), which exceeds this limit.

To ensure focus on quality, originality, and proper testing, we have automatically closed this pull request for now. Please wait until tomorrow or close some of your other active PRs before submitting new ones.

Thank you for your understanding and cooperation! 🚀

@github-actions github-actions Bot closed this Jun 16, 2026
@github-actions github-actions Bot added animation Animation effects, hover interactions, motion ideas, transitions contribution good first issue Good for newcomers GSSoC-26 Official GSSoC 2026 issue gssoc:approved Approved for GSSoC contributions help wanted Extra attention needed level:intermediate Requires moderate project understanding type:feature New functionality or enhancement labels Jun 16, 2026
@github-actions

Copy link
Copy Markdown
Contributor

✅ Submission Validation Passed!

Great job! All required files are present.

📁 Folder: submissions/examples/ease-view-transitions

Files found:

  • demo.html
  • style.css
  • README.md

🚀 Next Steps:

  • The maintainer will review your PR
  • Respond to any feedback if requested
  • Once approved, your contribution will be merged!

Thank you for contributing to EaseMotion CSS! 🎉

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

Labels

animation Animation effects, hover interactions, motion ideas, transitions contribution good first issue Good for newcomers gssoc:approved Approved for GSSoC contributions GSSoC-26 Official GSSoC 2026 issue help wanted Extra attention needed level:intermediate Requires moderate project understanding rate-limited type:feature New functionality or enhancement

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Add CSS-only cross-document View Transition API demo example

2 participants