Skip to content

Commit eb77e70

Browse files
committed
Update README
1 parent 21b0173 commit eb77e70

File tree

1 file changed

+3
-15
lines changed

1 file changed

+3
-15
lines changed

Diff for: README.md

+3-15
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,5 @@
1-
# sveltekit-shared-element-transitions
1+
# sveltekit-view-transitions
22

3-
SvelteKit version of the [Shared Element Transitions Google CodeLab](https://codelabs.developers.google.com/create-an-instant-and-seamless-web-app#5). Only works in Chrome Canary with the `chrome://flags/#document-transition` flag enabled and may break at any time due to the API changing.
3+
Demo showing how to use [view transitions](https://developer.chrome.com/docs/web-platform/view-transitions/) in a SvelteKit app. A full writeup of how it works can be found [on my blog](https://geoffrich.net/posts/page-transitions-1/).
44

5-
## Additional features
6-
7-
In porting this to Svelte, I also implemented some additional features.
8-
9-
- Also transition the fruit page heading, in addition to the image
10-
- Transition _back_ to the list of fruits
11-
- Respect reduced motion by not playing the transition if reduced motion is enabled
12-
- Transition when the back/forward buttons are clicked (the original demo only used a link click as the trigger)
13-
14-
## Bugs
15-
16-
- layout shifts during transition
17-
- sveltekit:prefetch causes the page to transition from the top-right corner instead. not sure why.
5+
Originally based on the [Shared Element Transitions Google CodeLab](https://codelabs.developers.google.com/create-an-instant-and-seamless-web-app#5), but ported to SvelteKit.

0 commit comments

Comments
 (0)