Svelte Travel Transitions screenshot

Svelte Travel Transitions

Author Avatar Theme by Pngwn
Updated: 2 Mar 2023
198 Stars

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

Categories

Overview

Svelte Travel Transitions is a clone of Sarah Drasner’s Vue/Nuxt page-transitions-travelapp built with SvelteKit. It is a web application that showcases page transitions and animations related to travel. This version of Svelte Travel Transitions was built using the next version of SvelteKit, so there may be some potential compatibility issues. The project has made some adjustments to the original code in order to adapt it to Svelte and SvelteKit.

Features

  • Page Transitions: Svelte Travel Transitions provides smooth page transitions between different sections of the application.
  • Animations: The application uses animejs library to create engaging and dynamic animations.
  • Sveltification: The project has attempted to make the code more compatible with Svelte by using Svelte 3’s built-in store API and Immer as an alternative to Vuex.

Installation

To install Svelte Travel Transitions, follow these steps:

  1. Clone the project repository to your local machine.
  2. Open a terminal or command prompt and navigate to the project directory.
  3. Run the following command to install the dependencies:
npm install
  1. Once the installation is complete, you can start the application by running the following command:
npm run dev

This will start a development server and you can access the application in your browser using the provided local URL.

Summary

Svelte Travel Transitions is a SvelteKit web application that replicates Sarah Drasner’s Vue/Nuxt page-transitions-travelapp. It showcases page transitions and animations related to travel using animejs library. The project has made some adjustments to the code to make it compatible with Svelte and SvelteKit. To get started, clone the project and follow the installation guide provided.