Smooth Page Transitions with Astro & the Shared Element Transition API

Overview

Save Big on Coursera Plus. 7,000+ courses at $160 off. Limited Time Only!

Grab it

Explore how to create smooth page transitions in multi-page applications using Astro and the Shared Element Transition API in this comprehensive video tutorial. Learn from Maxi Ferreira as he demonstrates techniques to make multi-page apps feel like single-page apps. Discover the benefits of Astro, understand the Shared Element Transition API, and implement SPA-like behavior in your projects. Follow along as Maxi guides you through styling transitions with CSS, adding slide animations, and addressing common pitfalls. Gain insights into performance comparisons with traditional SPAs and find resources for further learning. Perfect for web developers looking to enhance user experience with seamless page transitions in their Astro-based projects.

Syllabus

- Welcome
- Who is Maxi Ferreira?
- What made you want to try Astro?
- Where did your interest in the shared element API start?
- Where should I stat with Shared Element Transition API?
- Creating SPA like behaviour
- Style the transition with CSS
- Adding a slide right keyframe
- Turbo gotchas
- Would these animations be faster than in a traditional SPA?
- Where can we learn more?