Digging into View Transitions with Turbo 8 and Rails

This is a super quick tutorial to show you the new ViewTransition API that ships with Turbo 8 and Rails, which was released recently.

View Transitions are a neat way to add more fluidity between views in your app. With Rails and Turbo 8, adding this effect is pretty straightforward. The most challenging obstacle is understanding the CSS side of the equation.

Follow along as I demo different ways to leverage the View Transition API using Turbo 8 and Ruby on Rails.

📕 Read the full tutorial here - https://webcrunch.com/posts/view-transitions-rails

Timestamps: 00:00 - Intro 00:55 - Browser support 01:15 - Global View Transition Demo with Rails and Turbo 02:26 - How Turbo adds data attributes to the html tag 02:45 - Different types of visits with Turbo 03:18 - Add CSS for more advanced global view transitions 03:52 - Demo of advanced global view transitions 04:11 - Combining global and individual view transitions 04:25 - View transition naming 06:14 - Final demo

======

👋 I'm Andy Leverenz, a passionate product designer and developer. I love creating and sharing my knowledge through design, coding, and writing. Join me on my journey by checking out my blog, Web-Crunch (https://webcrunch.com), where I publish tutorials, articles, and the occasional vlog about design and development.

📰 Never miss an update! Click here to subscribe: https://www.youtube.com/user/webcrunch?sub_confirmation=1

💻 Read the written version: https://web-crunch.com/posts/view-transitions-rails

💎 New to Ruby on Rails? Enroll in my course HELLO RAILS: https://hellorails.io

💻 The Blog (my source of truth): https://webcrunch.com

Additional Links: 🎨 Bring life to Rails projects with Rails UI: https://railsui.com. 👨‍💻 Hire me: Visit: https://railsui.com/custom 🐤 https://twitter.com/webcrunchblog. ⚙️ https://github.com/justalever.

P.S. This stuff takes a long time to make but I love to do it. To help me keep at it consider supporting me. If not monetarily, then subscribe to the channel or share it with someone!

✨ https://github.com/sponsors/justalever ☕️ https://www.buymeacoffee.com/webcrunch ... https://www.youtube.com/watch?v=gdePV0Beihg