CSS View Transitions: The Future of Animation on the Web

00:00:00 - 📺 Event Introduction
00:03:00 - 🙋‍♂️ Speaker Introduction
00:15:00 - 🐣 Brief history of the Web
00:22:00 - 💥 Significance of Web 2.0
00:27:00 - 🚛 The Embedded Platform Years
00:33:00 - 🤖 The JavaScript Years
00:42:00 - 🌈 Brave New Web World
00:47:00 - 👶 Basic "Hello World" Example
01:00:00 - 👦 Basic Practical Example
01:09:00 - 🔨 Generating HTML (SSG/SSR)
01:16:00 - ✨ Using client-side JavaScript
01:21:00 - 🌐 Browser Support
01:30:00 - 🏦 JavaScript Frameworks
01:37:00 - ❓ Audience Questions
01:45:00 - 🎮 Custom View Transition Control
01:50:00 - ✅ Closing Comments

Description

Since the early days of Macromedia Flash and Microsoft Silverlight, developers sought solutions to create animated user interactions on the web to rival those found within native software.

While the eventual move away from these proprietary tooling towards open-source browser technologies (as advocated by the Web Standards movement) should be celebrated, developers were provided with very little native tooling for animation.

Initial attempts at animation mostly relied on JavaScript. However, due to its single-threaded nature (and the rise of mobile devices, with less computing power), the results were often subpar.

Fortunately, over the last decade, the W3C has slowly been iterating over the built-in browser CSS tooling for animation.

In this talk we will explore the next evolution in CSS animation, being shipped right now, called “CSS View Transitions”. We’ll look at how this new API provides the means to not only author the types of animations users have come to expect from native software – but in some cases even surpass it.

🤷‍♀️ What is FEDSA?

Front-end Development South Africa (FEDSA) is a registered non-profit organisation. They serve as an administrative umbrella for various types of projects that advance the sharing of knowledge between practitioners and aspiring practitioners within the industry.