https://github.com/mavrick-1/view-transitions

https://github.com/mavrick-1/view-transitions

Last synced: about 1 year ago
JSON representation

• Host: GitHub
• URL: https://github.com/mavrick-1/view-transitions
• Owner: MAVRICK-1
• Created: 2024-02-08T19:23:15.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2024-02-08T19:23:21.000Z (over 2 years ago)
• Last Synced: 2025-05-30T03:05:20.349Z (about 1 year ago)
• Language: Astro
• Homepage: https://view-transitions-omega-orpin.vercel.app
• Size: 80.1 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# Spotify clone with View Transitions from Astro 3.0 [![Built with Astro](https://astro.badg.es/v2/built-with-astro/tiny.svg)](https://astro.build)

Clone of Spotify with [Astro View Transitions](https://docs.astro.build/en/guides/view-transitions/) is an **experimental feature** for fluid navigation, this example use tailwindcss and svelte.

## Deploy

You can Deploy the example using [Vercel Template](https://vercel.com/templates/astro/view-transitions) or see a [live demo](https://spotify-astro-transitions.vercel.app/)

[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?](https://vercel.com/new/clone?demo-description=Spotify%20clone%20built%20with%20Astro%20View%20Transitions%20integration%20for%20fluid%20navigation%20%2B%20TailwindCSS%20%2B%20Svelte.%0A&demo-image=%2F%2Fimages.ctfassets.net%2Fe5382hct74si%2F59uwliGeS8XoE5nHRBEsfI%2F2232d50cdddae956828ddb501ff2d993%2FCleanShot_2023-09-05_at_16.13.01_2x.png&demo-title=Spotify%20Clone%20with%20Astro%20View%20Transitions&demo-url=https%3A%2F%2Fspotify-astro-transitions.vercel.app%2F&from=templates&project-name=Spotify%20Clone%20with%20Astro%20View%20Transitions&repository-name=view-transitions&repository-url=https%3A%2F%2Fgithub.com%2Figorm84%2Fspotify-astro-transitions&skippable-integrations=1))

#### Video

https://github.com/igorm84/spotify-astro-transitions/assets/16727448/1e34f079-1f17-4ff1-9285-1dc406f0c631

### About

View Transition is a **experimental** mechanism to transition between DOM states, learn more in these links:

- Astro Documentation: https://docs.astro.build/en/guides/view-transitions/

- MDN Documentation: https://developer.mozilla.org/en-US/docs/Web/API/View_Transitions_API

### Known issues

#### Firefox and iOS Browsers

Unfornatelly those browsers aren't compatible yet, see

https://developer.mozilla.org/en-US/docs/Web/API/View_Transitions_API#browser_compatibility