Back to Agenda

11/14/2024 - 09:00

View Transition API and scroll-driven animations: game changers for hybrid app development

The rapid devel­op­ment of web APIs (key­word: Project Fugu) has increas­ing­ly closed the gap that exist­ed between pro­gres­sive web apps (PWA) or hybrid devel­op­ment approach­es and native apps. Visu­al­ly, they are also bare­ly dis­tin­guish­able from native apps. How­ev­er, when it comes to ani­ma­tions, native apps have always been one step ahead thanks to the avail­abil­i­ty of native ani­ma­tion APIs. Until now, com­plex ani­ma­tions such as con­tain­er trans­forms were prac­ti­cal­ly impos­si­ble to imple­ment in web apps with­out immense effort.

That’s right. They WERE. This gap can now also be closed thanks to the new View Tran­si­tion API and Scroll-Dri­ven Ani­ma­tions. And the best thing about it: every­thing is done almost exclu­sive­ly using CSS. Curi­ous? Then Sascha Lehmann from Think­tec­ture will give you an overview of the new APIs, how you can use them effec­tive­ly in your project and where their lim­its lie.

Learning objectives

  • What problems do the two APIs solve?
  • How does the View Transition API work and what needs to be considered?
  • How do scroll-driven animations work?
  • What previously unthinkable effects can now be achieved with both APIs?

Level

Basic

Prior knowledge

Basic knowledge in web development
Sascha Lehmann works as a consultant at Thinktecture AG and is an expert in the Angular and UI/UX environment. He helps customers with their challenges and projects on a daily basis. Of course, he doesn't just like to keep his knowledge to himself, but also passes it on to others with great dedication in order to pass on his passion for web development to them. Find Sascha on LinkedIn and on X.