Angular 17 View Transitions API: Create smooth transition animations in a few steps!

Ғылым және технология

#Angular #ViewTransitions #animation
✨Get the code for this app for FREE at my shop!
www.buymeacoffee.com/zoaibkha...
📽️ Full stack Angular + Firebase course (50% off):
www.udemy.com/course/angular-...
✍️My blog for more free Angular posts:
zoaibkhan.com/blog
Learn how to enable and use the new View Transitions API support in Angular v17 with a videos app!
Follow for more Angular tutorials, tips and tricks:
Twitter - / zoaibdev
Facebook - / thisiszoaib
LinkedIn - / zoaib-khan-b6456815
Cheers :)

Пікірлер: 37

  • @kylerjohnson988
    @kylerjohnson9882 ай бұрын

    You’re a talented content creator. Great presentation of information and great pacing.

  • @ZoaibKhan

    @ZoaibKhan

    2 ай бұрын

    Hey Kyler! It's good to hear validation from a fellow developer. Your comment just made my day :) The View Transitions API is really cool!

  • @yahyarabii5514
    @yahyarabii5514Ай бұрын

    thank you so much you helped me alot

  • @LePhenixGD
    @LePhenixGD3 ай бұрын

    Very clear tutorial, you're amazing !

  • @ZoaibKhan

    @ZoaibKhan

    3 ай бұрын

    Glad it was helpful! ☺️

  • @sanchessantos7153
    @sanchessantos71535 ай бұрын

    Thanks Zoaib! Very nice!

  • @ZoaibKhan

    @ZoaibKhan

    5 ай бұрын

    Glad you liked it! :)

  • @LarsRyeJeppesen
    @LarsRyeJeppesenАй бұрын

    Cool

  • @rfryanfavour4369
    @rfryanfavour43695 ай бұрын

    PLEASE MAKE A VIDEO OF HOW YOU BUILT THIS APP FROM SCRATCH, ESPECIALLY WITH THIS KZread API THING 😭 😭

  • @ZoaibKhan

    @ZoaibKhan

    5 ай бұрын

    Ok, sure 👍

  • @mahdiandalib186
    @mahdiandalib1865 ай бұрын

    thx man

  • @ZoaibKhan

    @ZoaibKhan

    5 ай бұрын

    Welcome Mahdi!

  • @AnkitTannaVlogs
    @AnkitTannaVlogs5 ай бұрын

    great explanation... I had a doubt in the view-transition-name but this video clears it. will this work with query parameter or it has to be a route variable?

  • @ZoaibKhan

    @ZoaibKhan

    5 ай бұрын

    Thanks Ankit! About query parameters, I'm not really sure. Will have to try it out :)

  • @luisberoiza227
    @luisberoiza2274 ай бұрын

    Wonderful! Thanks, bro! I tried View Transition on Astro and it was amazing. Now I am programming on Angukar and I was wondering if it support this feature. thanks!

  • @ZoaibKhan

    @ZoaibKhan

    4 ай бұрын

    Yeah, kudos to the Angular team for making it so seamless and quick!

  • @luisberoiza227

    @luisberoiza227

    4 ай бұрын

    @ZoaibKhan you have right, it is really easy to use.

  • @user-oc8yk7tb8f
    @user-oc8yk7tb8f5 ай бұрын

    Awesome, sir can you make more vidoes on angular view transitions api?

  • @ZoaibKhan

    @ZoaibKhan

    5 ай бұрын

    Sure, but it is quite simple for now and I think I've covered most in this video. What more would you like me to cover?

  • @kelvinokuroemi
    @kelvinokuroemi5 ай бұрын

    Hey Chief, thank you very much for your video. I'm also curious how you managed to section each video like "Map" videos only showing map videos when you click on the "Map" option.

  • @ZoaibKhan

    @ZoaibKhan

    5 ай бұрын

    I'm searching in the tag with # in the description of the video. So only videos with desc having #map will appear for map.

  • @kelvinokuroemi

    @kelvinokuroemi

    5 ай бұрын

    Thank you very much Chief@@ZoaibKhan. The thing is when I click on any of the other options, no video show again. However when I click on the "all" tag, all the videos show.

  • @AdemGanouni
    @AdemGanouni5 ай бұрын

    this application is what i need to lear about , please sir im new in learning angular and it's really hard to find tutorials like your style . can you do a full tutorial about this app from scratch and focus in all details ! if you can you will help me a lot , thank you !

  • @ZoaibKhan

    @ZoaibKhan

    5 ай бұрын

    Sure! Can't promise when, but next up will be this one

  • @MonaCodeLisa
    @MonaCodeLisa5 ай бұрын

    cool :)

  • @ZoaibKhan

    @ZoaibKhan

    5 ай бұрын

    It is very cool, indeed! :)

  • @gioasana
    @gioasana4 ай бұрын

    How to use 'withViewTransitions' I my project is modular and not standalone?

  • @EvilazioVFX

    @EvilazioVFX

    4 ай бұрын

    Use angular 17. And put viewTransitionEnabled: true in your RouterModule.forRoot

  • @ZoaibKhan

    @ZoaibKhan

    4 ай бұрын

    Exactly, thanks!

  • @hvbairagi
    @hvbairagi3 ай бұрын

    Make a video for this project

  • @ZoaibKhan

    @ZoaibKhan

    3 ай бұрын

    Ok, sure. Will be creating a brief overview of the code.

  • @muhammadtariq8323
    @muhammadtariq83235 ай бұрын

    Will you Share Sample Code - github link ?

  • @ZoaibKhan

    @ZoaibKhan

    5 ай бұрын

    Sure, here it is: github.com/thisiszoaib/angular-view-transitions-app Make sure to change the playlists and API key for your list of videos.

  • @user-iy5ol1vj5c

    @user-iy5ol1vj5c

    5 ай бұрын

    ​@@ZoaibKhan , can you please share your API key and playlist id too

  • @ZoaibKhan

    @ZoaibKhan

    5 ай бұрын

    Hey! You can follow the link below to get your own API key. I'll be unable to share my key because will run out of quota :) developers.google.com/youtube/v3/getting-started For the playlist IDs, here are some from my channel. You can get any channel's playlist ID from the URL itself. PLHbz-DWIAPJDxWTyoq0O2v4T3AO5W94vl PLHbz-DWIAPJAkAKmKr4AkIeqUgnvcxLXF PLHbz-DWIAPJCltAty1all8WIQ2p9IVh6C

  • @user-iy5ol1vj5c

    @user-iy5ol1vj5c

    5 ай бұрын

    @@ZoaibKhan Thanks , it worked

Келесі