turbo-ios
view-transitions | turbo-ios | |
---|---|---|
16 | 15 | |
786 | 818 | |
0.6% | 1.2% | |
7.3 | 8.3 | |
about 1 month ago | 8 days ago | |
HTML | Swift | |
GNU General Public License v3.0 or later | MIT License |
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
So let’s add the following CSS to the index template (Slim recognizes a css: block that just renders a normal tag):
/ app/views/counter/index.html.slim / (anywhere outside the Turbo Frame tag) css: /* (1) */ #counter { view-transition-name: counter; contain: layout; } /* (2) */ @keyframes rotate-out { to { transform: rotate(90deg); } } @keyframes rotate-in { from { transform: rotate(-90deg); } } /* (3) */ ::view-transition-old(counter) { animation-duration: 200ms; animation-name: -ua-view-transition-fade-out, rotate-out; } ::view-transition-new(counter) { animation-duration: 200ms; animation-name: -ua-view-transition-fade-in, rotate-in; }
Enter fullscreen mode Exit fullscreen modeLet’s break this code down a bit:
-
The CSS selector
#counter
matches the counter div and theview-transition-name
property names this area of the screen, for the purpose of View Transitions, ascounter
. This name will be used in the animation declarations below.The
clone
property currently must be added here for some reasons internal to the current View Transitions implementation in Chrome and must be set topaint
orlayout
. This restriction is planned to be removed from the specification, though, and in fact I’ve heard that it is not needed in Chrome Canary any more. The rotation animation keyframes are defined here. Note that while the transition also uses fade-in and fade-out animations, they don’t have to be defined here because the spec requires browsers to implement them natively under the name
-ua-view-transition-fade-in/out
.The CSS animations for the counter (the View Transition area named
counter
) are configured here. The CSS selectors here are some of the pseudo-elements automatically created during the transition. The-old
pseudo-element represents a screenshot of the old DOM state that should somehow disappear or ”go away“ from the viewport and the-new
pseudo-element represents a live version of the final DOM state that should be brought into sight.
So, overall, this code selects a portion of the page and animates it independently from the rest of the page during Turbo Frames DOM updates. Behind the scenes, the default cross-fade for the rest of the page still also takes place, it just is not visible because all its elements are visually identical. The result looks like this:
A few initial tips & tricks
Does this work for Turbo Drive visits, too?
Sure it does and it’s actually pretty easy! All we have to do is define the same event handler as we did above but attach it to the
turbo:before-render
event instead. By default we’ll get a cross-fade animation of the whole page during Turbo Drive page visits.Do not try to ”name“ the Turbo Frame itself
When playing with Turbo Frame View Transitions I first tried to use a custom animation for the whole Turbo Frame element by naming it via the
view-transition-name
property. For some reason, this does not work and you end up with a very cryptic and misleading error message in the console (yes I did have thecontain
property in the CSS declaration):Aborting transition. Element must contain paint or layout for view-transition-name : counter
So, when using custom animations, an element from inside the Frame must be selected and named.
Debugging View Transitions
Since View Transitions are technically just normal CSS animations, they can be inspected with the Animations panel in the Dev Tools. Also, the automatically created pseudo-elements are visible in the Elements tab during the transitions:
Conclusions
I confess I am quite excited about the new View Transitions API. Among the things I particularly like about it are the following:
- It is surprisingly easy to plug this inside Hotwire Turbo and you get the default cross-fade transition animation immediately for free (in latest Chrome-like browsers, that is).
- Since this is implemented natively in the browser, the animations are highly optimized and performant.
- View Transitions should allow (today or in the future) building highly interactive transitions similar to those in Material Design.
- There is some initial support for Multi-Page Applications, too, which is great news because we can bring transition animations declared in CSS to our old but gold apps.
- It should be possible to use a different animation based on the ”direction“ of the visit (Back/Forward) using the Navigation API (also still experimental and not very well supported, though).
Things I am still concerned about:
- Browser support: the Firefox team evaluates it, the Safari team is silent. This will be a log run and making a polyfill is probably too difficult. For web sites where transition animations are critical, this is still a no go.
-
If you’re not careful enough, the transition feels more fluid but also a little bit slower. The reason for it is that View Transitions start the animations at the moment when both the old and new DOM states are already rendered. This means that the exit animation is delayed until new content is available and until that time, nothing happens. Also, the entry animations for the new state usually delay its appearance a little bit more.
This is not a problem of View Transitions themselves but rather a more generic one. If the exit animation (e.g. a fade out) started immediately after user interaction (e.g. a link click), sometimes the user would have to stare at a blank page until the new page content is grabbed, rendered and run through an entry animation. Still, some kind of support for this scenario (possibly with custom loaders or skeletons) would be nice.
Tailwind support: I think the current Tailwind syntax does not allow targeting the HTML document-connected pseudo-elements so we have to resort to custom CSS (which is not a big problem, actually).
All transitions target the whole page, there is currently no option to make, say, two components (Frames) animate totally independently. An initial proposal for ”scoped transitions“ can be found here.
Overall, I like this feature and wish it matures enough and gets wider support soon!
-
- 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.
turbo-ios
-
Progressively Enhanced Turbo Native Apps in the App Store
If you're a SwiftUI developer, I've had an issue open at https://github.com/hotwired/turbo-ios/issues/8 to get Turbo SwiftUI off the ground.
I've talked to a few folks about it and have heard responses ranging from "it's a bad idea/can't be done" (mainly because of SwiftUI bugs) to "why would you want to do that?". I think it would be amazing to have a declarative of building out a Hotwire Rails application inside of iOS. Bonus if the Turbo SwiftUI component could run on macOS.
-
What’s Ruby used for most nowadays?
For the mobile side, start with each platform's respective Turbo package: https://github.com/hotwired/turbo-ios and https://github.com/hotwired/turbo-android. Each has a demo app you can run in XCode/Android studio. To get a basic app building, follow each one's "Getting Started" guide. It's actually pretty easy to get a basic native app building, the hard part comes in integrating native components and services, as well as release management.
-
The different strategies to building a cross-platform app
turbo-ios and turbo-android are the shell/wrapper apps handling native navigation, written for native iOS and Android. They are provided for you, and works out-of-the-box, but you risk having to fiddle with iOS and Android development for maintenance/debugging later on.
-
Ask HN: Solo Dev Stack of 2022?
Ruby on Rails, Hotwire, Postgres, Redis
Does anyone have experience with https://github.com/hotwired/turbo-ios or https://github.com/hotwired/turbo-android ?
-
How I ported a Rails site to iOS and launched in the App Store in 7 weeks
1. Turbo Native
- Are there any plans to make Rails a mobile framework?
-
All you should know about Flutter development
I use Turbo Native on iOS to do exactly this.
You render your mobile web view like normal, wire up a JavaScript handler (formerly known as Turbolinks), and push native screens on iOS. It works really well for CRUD and "boring" SAAS apps with little interaction outside of forms. And when you need higher fidelity dropping down to SwiftUI or UIKit is straightforward.
https://github.com/hotwired/turbo-ios
To make things even simpler, I built Jumpstart iOS, which takes care of all of the Swift boilerplate. Navigation, authentication, and push notifications all work out of the box after adding a few endpoints to your server.
https://jumpstartrails.com/ios
-
Is it possible to create an iOs app in Elixir? And if yes, than what framework is needed?
Adding to the already mentioned solutions, another alternative may be to develop your app with Phoenix and [Hotwire](https://hotwired.dev/), using Turbo on the backend and [Turbo-ios](https://github.com/hotwired/turbo-ios) for your app.
-
Suggestions for building ios and android apps in rails?
turbo-ios and turbo-android are small wrappers around your web views. You write native Swift and Kotlin wrappers but the frameworks display your web content. They also handle navigation and data transmission between the views and native code.
-
Portals: Supercharged Web View for Native iOS and Android Apps
I’d like to see this integrate more tightly with Rails Turbo framework. Ideally it would understand Visitables and plug into SwiftUI. I took a swing at that at https://github.com/hotwired/turbo-ios/issues/8 but have struggled to get it working … that and Strada hasn’t come out yet, which I assume is the equiv of the native plugins within Portals.
What are some alternatives?
Svelte - Cybernetically enhanced web apps
awesome-flutter - 💗 A curated list of awesome Flutter libraries, tools, tutorials, articles and more.. All you should know about Flutter development!
vue-flip-starport
capacitor - Build cross-platform Native Progressive Web Apps for iOS, Android, and the Web ⚡️
vue-starport - 🛰 Shared component across routes with animations
turbo-android - Android framework for making Turbo native apps
msw - Seamless REST/GraphQL API mocking library for browser and Node.js.
desktop - Building native-like Elixir apps for Windows, MacOS, Linux, iOS and Android using Phoenix LiveView!
sveltekit-view-transitions - Page transitions in SvelteKit with the View Transition API.
create-t3-turbo - Clean and simple starter repo using the T3 Stack along with Expo React Native
flipjs - A helper library for doing FLIP animations.
hotwire-rails - Use Hotwire in your Ruby on Rails app