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 Β· WWC Europe 2026

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
10 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
almost 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
almost 2 years ago

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

Sue Quackenbush

Dapr in Practice thumbnail
24:08
almost 2 years ago

Dapr in Practice

marcklefter

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

Minimising the Carbon Footprint of Workloads

Michael Mueller

Upcoming sessions on this topic

Open session

World Congress 2026 North America

Architecting AI in Angular: WebMCP, A2UI, and the Agent Experience

Ankita Sood

Sr. Principal Engineer @ Secureworks | Angular GDE

Ankita Sood
Open session

World Congress 2026 North America

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

Shubham Chaurasia

Senior Software Engineer @ Meta

Shubham Chaurasia
Open session

World Congress 2026 North America

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

How to generate business value through performance optimizations

Nikolai Sidiropulo

Software Engineer at Meta

Nikolai Sidiropulo
Open session

World Congress 2026 North America

From Cloud Native to Multi-Cloud Native: Write Once, Deploy Anywhere

Sandeep Pal

Principal Member of Technical Staff at Salesforce

Sandeep Pal
Open session

World Congress 2026 North America

When Humans Stop Writing Code: Rethinking Languages, Compilers, and Responsibility

Simon Auer

Organizer of flutter vienna meetup and CEO of marqably

Simon Auer

Related videos

What’s New and What’s Next in Web UI thumbnail
22:46
WWC 2024 β€’ almost 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 β€’ over 4 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 β€’ over 4 years ago

The Lean Web

Chris Ferdinandi

Related articles

From learning to earning

Jobs that call for the skills explored in this talk.