View Transitions API rocks

Key Takeaways

[Music] have you seen view transitions yet this API is awesome so I'm using some JavaScript just to text swap letters in here you can see that just had to rate about 600 milliseconds I'm just replacing the text letter here text content but I'm animating it like I showed in the beginning that's using this API start view transition when you call this it takes a picture of all the elements in the Dom before this transformation happens and after and then it gives you an opportunity to toggle the animation and change it so here I'm targeting that H1 where I'm swapping the text inside of it I'm giving it a name called view transition name replace effect and look it's already just crossfading between these but I can do better I can Target the old element that's going out that's replace effect named and I can say hey Fade Out and scale those down and then I can look at the new image and the new text letter that's coming in called replace effect and I can say hey you need to fade in and slide in up and I have this awesome effect here this is a cool API you better go check it out [Music]