sveltekit-view-transitions
| view-transitions | sveltekit-view-transitions | |
|---|---|---|
| 16 | 2 | |
| 822 | 64 | |
| 1.3% | - | |
| 5.9 | 4.1 | |
| 21 days ago | about 1 year ago | |
| HTML | Svelte | |
| GNU General Public License v3.0 or later | - |
Stars - the number of stars that a project has on GitHub. Growth - month over month growth in stars.
Activity is a relative number indicating how actively a project is being developed. Recent commits have higher weight than older ones.
For example, an activity of 9.0 indicates that a project is amongst the top 10% of the most actively developed projects that we are tracking.
view-transitions
- I created a website to upload and showcase desk setups & office workspaces, with clickable featured products in the image!
- How to use View Transitions in Hotwire Turbo
- Is there any js library to add fluid "app-like" animations to a website?
-
HTML is all you need to make a website
true, but HTML-only websites are often pretty clunky
infuriatingly, if HTML had just a bit more oomph, we could make a lot better websites with it, but they haven't been moving HTML forward as a hypermedia for decades now (see https://htmx.org for what I mean, they could implement this concept in the browser in a week, and it would change web development dramatically)
the upcoming view transitions API will help:
https://github.com/WICG/view-transitions
but, still, there are some really obvious and simple things that could be done to make HTML much more compelling (let's start by making PUT, PATCH and DELETE available in HTML!)
-
Can you achieve the same behaviour with JS?
Cool answer: Look at shared element transition. this is gonna be really cool one day, sadly not yet out of the proposal state... https://github.com/WICG/shared-element-transitions
-
The different strategies to building a cross-platform app
Native features faster: Quickest path to utilizing native features/UX improvements once they are released, no need to wait for a third party implementation. Example: shared element transitions first came to native, then were replicated on the web.
-
Barba.js – Create fluid and smooth transitions between your website’s pages
Lol yes, can’t edit now sorry.
1: https://github.com/WICG/shared-element-transitions
-
Assorted Svelte demos: conditional wrappers, page transitions, actions
I took the experimental page transition API (a.k.a. shared element transitions) for a test drive with SvelteKit, and the result was pretty slick. You’ll need Chrome Canary with the chrome://flags/#document-transition flag enabled if you want to try this one out yourself — the original tweet has a video if you don’t want to jump through those hoops. There’s a live demo and a GitHub repo if you want to see how it was accomplished.
-
SPAs: theory versus practice
Here is link number 1 - Previous text "yet"
-
I played around with Chrome's new "Shared Element Transitions"
There's also the developer guide https://github.com/WICG/shared-element-transitions/blob/main/developer-guide.md.
sveltekit-view-transitions
-
shared element transition api
like this but only using Svelte? https://sveltekit-shared-element-transitions-codelab.vercel.app/
-
Assorted Svelte demos: conditional wrappers, page transitions, actions
I took the experimental page transition API (a.k.a. shared element transitions) for a test drive with SvelteKit, and the result was pretty slick. You’ll need Chrome Canary with the chrome://flags/#document-transition flag enabled if you want to try this one out yourself — the original tweet has a video if you don’t want to jump through those hoops. There’s a live demo and a GitHub repo if you want to see how it was accomplished.
What are some alternatives?
Svelte - web development for the rest of us
page-transitions-in-svelte - Using page transitions Today (with Svelte)
vue-flip-starport
vue-starport - 🛰 Shared component across routes with animations
flipjs - A helper library for doing FLIP animations.
navigation-api - The new navigation API provides a new interface for navigations and session history, with a focus on single-page application navigations.
know-your-http-well - HTTP headers, media-types, methods, relations and status codes, all summarized and linking to their specification.
msw - Industry standard API mocking for JavaScript.
react-router - Declarative routing for React
wrangler-legacy - 🤠 Home to Wrangler v1 (deprecated)
barba - Create badass, fluid and smooth transitions between your website’s pages
tamagui - Style React fast with 100% parity on React Native, an optional UI kit, and optimizing compiler.