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

Поділитися
Вставка
  • Опубліковано 17 гру 2024

КОМЕНТАРІ • 44

  • @metalllus
    @metalllus 20 днів тому

    this is so simple yet so powerful, thx a lot man!!

  • @kylerjohnson988
    @kylerjohnson988 9 місяців тому +1

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

    • @ZoaibKhan
      @ZoaibKhan  9 місяців тому +1

      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!

  • @LePhenixGD
    @LePhenixGD 9 місяців тому +1

    Very clear tutorial, you're amazing !

    • @ZoaibKhan
      @ZoaibKhan  9 місяців тому

      Glad it was helpful! ☺️

  • @sanchessantos7153
    @sanchessantos7153 Рік тому

    Thanks Zoaib! Very nice!

  • @tornyu
    @tornyu 6 місяців тому +1

    Please check your sound levels: that Subscribe sound effect was _way_ too loud compared to your voice. Quite a shock.
    Great explanation tho, thanks for the video.

    • @ZoaibKhan
      @ZoaibKhan  6 місяців тому +1

      Oops, apologies for that! Will try to adjust audio if possible. Glad to know you found the video helpful :)

  • @AnkitTannaVlogs
    @AnkitTannaVlogs Рік тому

    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  Рік тому

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

  • @yahyarabii5514
    @yahyarabii5514 8 місяців тому

    thank you so much you helped me alot

  • @kelvinokuroemi
    @kelvinokuroemi Рік тому

    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  Рік тому

      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 Рік тому

      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.

  • @luisberoiza227
    @luisberoiza227 11 місяців тому

    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  11 місяців тому +1

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

    • @luisberoiza227
      @luisberoiza227 11 місяців тому

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

  • @GabrielGuerreroIssa
    @GabrielGuerreroIssa 6 місяців тому

    Great video

  • @alantansa9
    @alantansa9 3 місяці тому

    Is this supported in older Android 10 Chrome browsers?

    • @ZoaibKhan
      @ZoaibKhan  3 місяці тому

      Seems so. Check here:
      caniuse.com/?search=view%20transition

  • @AdemGanouni
    @AdemGanouni Рік тому

    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  Рік тому

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

  • @gioasana
    @gioasana 10 місяців тому

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

    • @EvilazioVFX
      @EvilazioVFX 10 місяців тому

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

    • @ZoaibKhan
      @ZoaibKhan  10 місяців тому

      Exactly, thanks!

  • @RahulShaw-v1g
    @RahulShaw-v1g Рік тому

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

    • @ZoaibKhan
      @ZoaibKhan  Рік тому

      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?

  • @hvbairagi
    @hvbairagi 9 місяців тому

    Make a video for this project

    • @ZoaibKhan
      @ZoaibKhan  9 місяців тому

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

  • @rfryanfavour4369
    @rfryanfavour4369 11 місяців тому +2

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

    • @ZoaibKhan
      @ZoaibKhan  11 місяців тому +1

      Ok, sure 👍

  • @muhammadtariq8323
    @muhammadtariq8323 Рік тому

    Will you Share Sample Code - github link ?

    • @ZoaibKhan
      @ZoaibKhan  Рік тому

      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.

    • @ManasKumar-t2j
      @ManasKumar-t2j Рік тому

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

    • @ZoaibKhan
      @ZoaibKhan  Рік тому +1

      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

    • @ManasKumar-t2j
      @ManasKumar-t2j Рік тому

      @@ZoaibKhan Thanks , it worked

  • @mahdiandalib186
    @mahdiandalib186 Рік тому

    thx man

  • @LarsRyeJeppesen
    @LarsRyeJeppesen 7 місяців тому

    Cool

  • @MonaCodeLisa
    @MonaCodeLisa Рік тому

    cool :)

    • @ZoaibKhan
      @ZoaibKhan  Рік тому

      It is very cool, indeed! :)