Add view-transitions mpa-example-2 with slide animations

[yashrajbharti]

• Add new cross-document view transition example with slide animations
• Includes index.html and about.html with proper navigation
• Features slide-to-right and slide-from-right keyframe animations
• Uses modern CSS with oklch colors and system fonts
• Follows existing dom-examples patterns and structure

[dipikabh]

Thanks a lot for creating this, Yash! I'll be able to review it in my second half today

[dipikabh]

Let's also wait to hear from Vadim - he might have some ideas to make the example more meaningful while still keeping it beginner-friendly.

We'll also need to remember to update the "view-transitions directory" bullet in the repo's README after we publish the blog post.

[pepelsbey]

Hey! Sorry it took a while for me to get here. I took the liberty to format code according to our guides. We use Prettier on MDN and its (almost) default config, see .prettierrc.json.

If you don’t have Prettier installed in your code editor, you can still format your code manually by running:

npx prettier --config .prettierrc.json --write view-transitions/mpa-example-2/*

I’m also preparing a PR that would add .editorconfig to the repository, so that your editor would autoswich to proper indentation and other rules. We have it almost everywhere.

[pepelsbey]

I have a suggestion to make this demo a little more real and funnier: turn it into a cat’s website. What do you think @yashrajbharti @dipikabh? In this case, it will be the index and hobbies pages, so using appropriate class and file names throughout the demo seems logical. Let me know what you think! And a few code suggestions as well.

@yashrajbharti if you like the suggestions, once you’ve accepted them, you also need to rename files appropriately: about.html → hobbies.html, page1.css → index.css, page2.css → hobbies.css.

[yashrajbharti]

I have a suggestion to make this demo a little more real and funnier: turn it into a cat’s website. What do you think @yashrajbharti @dipikabh? In this case, it will be the index and hobbies pages, so using appropriate class and file names throughout the demo seems logical. Let me know what you think! And a few code suggestions as well.

@yashrajbharti if you like the suggestions, once you’ve accepted them, you also need to rename files appropriately: about.html → hobbies.html, page1.css → index.css, page2.css → hobbies.css.

I really like the gamification aspect of this!, @dipikabh what do you think?

[dipikabh]

Thanks for reviewing @pepelsbey.

I like the example! It's funny and cute 🙂
I've added some suggestions to slightly improve the structure. And maybe we can do away with the color change since it can be distracting.

[pepelsbey]

I think it's good to have a color effect, not just motion. When one page dissolves into another, it looks impressive and shows what's possible. It's not a real website people would use every day. A demo can be slightly annoying for demonstrating purposes, it's fine 🙂

[yashrajbharti]

Would love to keep the color changes in background as well!

[dipikabh]

Okay then, let's keep the colors :)

[dipikabh]

Thanks, Yash!

We'll invite you to the blog repo. I already have a PR open for your article at https://github.com/mdn/blog/pull/444 and you would be able to push changes directly to that PR branch.

[yashrajbharti]

Thanks, Yash!

We'll invite you to the blog repo. I already have a PR open for your article at mdn/blog#444 and you would be able to push changes directly to that PR branch.

Amazing I will get started on this!