Smooth Page Transitions with Astro & the Shared Element Transition API
Offered By: Learn With Jason via YouTube
Course Description
Overview
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?
Taught by
Learn With Jason
Related Courses
User Experience for the WebOpen2Study Intro to the Design of Everyday Things
Udacity UX-Design for Business
Fraunhofer IESE via Independent UX Design for Mobile Developers
Google via Udacity SAP's UX Strategy in a Nutshell by Sam Yen
SAP Learning