WeAreDevelopers Logo WeAreDevelopers
Sign in
For You LIVE
World Congress 2024 • Aug 20, 2024 • Session details

View-Transition-API: Gamechanger for hybrid app-development

Sascha Lehmann

Struggling with clunky hybrid app animations? Achieve native-like UI state transitions with the View Transition API using just a single line of JavaScript.

Pause
Mute Enter Fullscreen
#1 about 3 min

Introduction to cross-platform and hybrid development

Cross-platform tools allow developers to write web applications that compile to native mobile platforms.

#2 about 3 min

Challenges of container transforms in web animations

Modifying DOM structures during routing makes container transforms unnecessarily complex in traditional web development.

#3 about 5 min

Browser support and mechanics of the View Transition API

The View Transition API natively cross-fades DOM screenshots to create seamless navigation experiences.

#4 about 4 min

Understanding view transition DOM layers and live views

Browsers generate a separate DOM layer for transition groups without interrupting live media playback.

#5 about 3 min

Implementing view transitions and overriding default CSS animations

Developers can trigger view transitions using native JavaScript APIs or Angular convenience functions.

#6 about 5 min

Isolating elements with specific view transition names

Tagging targeted elements across views generates custom spatial transitions instead of entire page cross-fades.

#7 about 4 min

Scoped transitions, multi-page support, and creative list animations

Upcoming API specifications and multi-page support expand capabilities for non-routing animations like sortable lists.

Matching moments

2:31 min

Replacing single page apps with browser view transitions

Chris Heilmann +2 · LIVE

2:51 min

Animating complex UI states with view transitions

Christian Liebel Christian Liebel · World Congress 2026 Europe

3:33 min

Building seamless transitions with modern CSS animation APIs

Onur Gumus · LIVE

4:52 min

Evaluating performance impacts of advanced CSS animations

Aaron T. Grogg · Coffee With Developers

2:15 min

Transitioning native desktop graphics implementations to the web

Chris Heilmann +3 · LIVE

1:05 min

Upcoming native specifications for transitional animations between page routes

Chris Ferdinandi · JS Congress

More from World Congress 2024

Beyond the Hype: Real-World AI Strategies Panel thumbnail
24:07
11 months ago

Beyond the Hype: Real-World AI Strategies Panel

Mike Butcher, Jürgen Müller, Katrin Lehmann, Tobias Regenfuss

Carl Lapierre - Exploring Advanced Patterns in Retrieval-Augmented Generation thumbnail
21:17
almost 2 years ago

Carl Lapierre - Exploring Advanced Patterns in Retrieval-Augmented Generation

Carl Lapierre

Coding an Immersive Copilot using Unity / .NET and Azure OpenAI! thumbnail
31:50
about 2 years ago

Coding an Immersive Copilot using Unity / .NET and Azure OpenAI!

Zaid Zaim

Building a diverse tech company: The power of Diversity, Equity, Inclusion, and Belonging thumbnail
29:43
about 2 years ago

Building a diverse tech company: The power of Diversity, Equity, Inclusion, and Belonging

Sue Quackenbush

Dapr in Practice thumbnail
24:08
about 2 years ago

Dapr in Practice

marcklefter

Minimising the Carbon Footprint of Workloads thumbnail
27:46
about 2 years ago

Minimising the Carbon Footprint of Workloads

Michael Mueller

Upcoming sessions on this topic

Open session

World Congress 2026 North America

September 24, 2026 · 12:50–13:20

Stage 7

Architecting Agentic Apps: WebMCP, A2UI, and Agent Experience

Ankita Sood

Sr. Principal Engineer @ Secureworks | Angular GDE

Ankita Sood
Open session

World Congress 2026 North America

September 25, 2026 · 14:50–15:20

Stage 4

Intelligence in Motion: Building the Next Generation of AI-Powered Apps on Zoom's Developer Platform

Brendan Ittelson

Chief Ecosystem Officer of Zoom

Brendan Ittelson
Open session

World Congress 2026 North America

September 25, 2026 · 11:00–11:30

Stage 7

Beyond Vibe Coding: An AI Builder’s Guide to Migrating 10k+ React Components

Shubham Chaurasia

Senior Software Engineer at Meta

Shubham Chaurasia
Open session

World Congress 2026 North America

September 25, 2026 · 15:30–16:00

Stage 6

Small LLM in your Browser: Huge Opportunities for Web Applications

Daniel Ostrovsky

UI/UX Architect at Payoneer | AI Architect | Full Cycle Development Expert | Public Speaker | Open Source Contributor |

Daniel Ostrovsky
Open session

World Congress 2026 North America

September 25, 2026 · 11:00–11:30

Stage 2

Build Fast, Deploy Faster: Cross Platform AI development in 2026

Charlie Cheever

CEO & Co-Founder of Expo

Charlie Cheever
Open session

World Congress 2026 North America

September 24, 2026 · 14:50–15:20

Stage 9

How to generate business value through performance optimizations

Nikolai Sidiropulo

Software Engineer at Meta

Nikolai Sidiropulo

Related videos

What’s New and What’s Next in Web UI thumbnail
22:46
World Congress 2024 • about 2 years ago

What’s New and What’s Next in Web UI

Cleyra Uzcategui

Making the switch from web to mobile development thumbnail
42:50
LIVE • almost 5 years ago

Making the switch from web to mobile development

Milica Aleksic

Unleash your web skills on native! thumbnail
52:01
LIVE • over 5 years ago

Unleash your web skills on native!

Rowdy Rabouw

Web APIs you might not know about thumbnail
43:53
JS Congress • almost 5 years ago

Web APIs you might not know about

Sasha Shynkevich

petite-vue - Progressively enhancing every application? thumbnail
44:40
LIVE • over 3 years ago

petite-vue - Progressively enhancing every application?

Alexander Lichter

The Lean Web thumbnail
46:46
JS Congress • almost 5 years ago

The Lean Web

Chris Ferdinandi

Related articles

From learning to earning

Jobs that call for the skills explored in this talk.