flipjs
view-transitions | flipjs | |
---|---|---|
16 | 1 | |
822 | 1,413 | |
1.3% | - | |
5.9 | 10.0 | |
21 days ago | about 7 years ago | |
HTML | JavaScript | |
GNU General Public License v3.0 or later | Apache License 2.0 |
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.
flipjs
-
Transitioning Component Between Pages in Vue.js
So we know that the transition can affect the user experience, and make them feel more connected when navigating our pages. Recently, Google Chrome announce Transition API, you can check the introduction here, the way it works in my understanding is by taking a “screenshot” of the two elements that will be transitioned. This API can be used via Javascript or CSS, this makes the transition can be easily controlled. Unfortunately, this API is still in experimental mode, we need to download Chrome Canary and enable the transition API manually, luckily we have an alternative option which is vue-starpot. The vue-starpot is a Vue library to animate a component across the routes, the way it works is by hoisting the component that we want to animate to the root of the page using Teleport, then implementing FLIP technique to the component when the route changes.
What are some alternatives?
Svelte - web development for the rest of us
vue-starport - 🛰 Shared component across routes with animations
vue-flip-starport
sveltekit-view-transitions - Page transitions in SvelteKit with the View Transition API.
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