https://github.com/pngwn/svelte-travel-transitions

Native-like Page Transitions with SvelteKit, A Travel App.
https://github.com/pngwn/svelte-travel-transitions

svelte svelte-kit

Last synced: about 1 month ago
JSON representation

Native-like Page Transitions with SvelteKit, A Travel App.

• Host: GitHub
• URL: https://github.com/pngwn/svelte-travel-transitions
• Owner: pngwn
• Created: 2018-12-31T20:29:04.000Z (almost 6 years ago)
• Default Branch: master
• Last Pushed: 2023-10-07T16:59:17.000Z (about 1 year ago)
• Last Synced: 2024-10-14T13:03:16.646Z (2 months ago)
• Topics: svelte, svelte-kit
• Language: Svelte
• Homepage: https://svelte-travel.pages.dev/
• Size: 3.12 MB
• Stars: 194
• Watchers: 10
• Forks: 18
• Open Issues: 5
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# svelte-travel-transitions

[The actual app on the actual internet.](https://svelte-travel.pages.dev/)

A clone of Sarah Drasner's Vue/Nuxt [page-transitions-travelapp](https://github.com/sdras/page-transitions-travelapp) built with [SvelteKit](https://kit.svelte.dev/docs). All credit goes to Sarah!

This was built with the `next` version of SvelteKit, so who knows what might explode. I didn't do the map thing because I have no idea what it's supposed to be!

There has been some attempt to Sveltify things a little. This version uses [animejs](http://animejs.com/) instead of [GSAP](https://greensock.com/) and in place of [Vuex](https://vuex.vuejs.org/) I used a combination of Svelte 3's built-in store API and [Immer](https://github.com/mweststrate/immer). Neither of these libraries are strictly speaking necessary (especially Immer) and I considered removing them but decided to leave them in to illustrate using such libraries with Svelte and SvelteKit. My changes are not a slight on these libraries, they are all excellent, I just decided to change things up a little.

Other changes to the code (other than just syntax) were necessary due to the differences between Svelte and Vue.

## Install

Clone the project to get started. Then:

```bash

# install dependencies

pnpm install # or npm!

# run the dev build

pnpm dev

# build for production

pnpm build

# build a static site

pnpm export

```