I Will Never Write CSS Animations Again Without Using This Tool

Поділитися
Вставка
  • Опубліковано 11 січ 2025

КОМЕНТАРІ • 73

  • @maxfri6680
    @maxfri6680 Рік тому +35

    Since there is a timeline to change the animations it would be cool to add a “bake animation” button to actually export the modified version back to code 🤔

  • @CZghost
    @CZghost Рік тому +40

    To be fair, I was today years old when I found about Animations tab in Chrome Developers Tool.

  • @comoyun
    @comoyun Рік тому +5

    Yeah, these tools make our life much easier. Loved it. Thanks.

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

    The devtools window is so overly cluttered and ancient feeling that my brain didn’t even want to have it open long enough to find stuff like this wow

  • @a7modywael51
    @a7modywael51 Рік тому +10

    And I was searching the web for how to reverse engineer css animations 😂
    Thanks kyle

    • @a7modywael51
      @a7modywael51 Рік тому +3

      @@biggestthreattoyourexistence 😒

  • @atharvabhosale3529
    @atharvabhosale3529 Рік тому +7

    I absolutely love your videos :)

  • @ledger9972
    @ledger9972 Рік тому +7

    I swear, up until this past week I hated web development with a passion. Until Kyle showed up and I can finally understand this entire mess

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

    Love this. Thanks Kyle!

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

    This is a game changer definitively ! :D

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

    hey thanks a lot - i never saw this animation tab in the Inspector and its so helpful.

  • @kirillvoloshin2065
    @kirillvoloshin2065 Рік тому +62

    yeah, until your app is in react and uses classnames library

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

    I never knew that exists, thank you.

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

    Thanks Kyle as always! 👍

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

    It's so useful, thank you🧒

  • @cavemutt
    @cavemutt Рік тому +2

    Kyle, have you used the Firefox Developer browser? If so, have you noticed any significant differences from the regular Firefox browser? So far they're the same for me, but I haven't used it as extensively as you have to know a difference if I saw one. 🤷‍♂

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

      Firefox dev edition is a nightly build so it has the latest features

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

      @@LosfrogerX No, Firefox Nightly is the nightly build. Firefox Developer Edition is basically the beta version with maybe some tweaks that might help during development such as running unsigned extensions more easily or things like that. You can also use it if you want a bit faster access to newer features since you are using the beta version of the browser in that case.
      Basically Firefox Nightly is the alpha version, Firefox Developer Edition is beta and regular Firefox is the regular release.

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

    What is the setup you're using like what is the came and the mic can you please lemme know?

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

    Very cool stuff!

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

    great work.
    Thanks for sharing.

  • @Mubasshir-n1z
    @Mubasshir-n1z Рік тому

    hey Kyle, why have have you removed the Axios tutorial video.

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

    Unless I'm trying to do dynamic animations, I find using code instead of actual animation tools to be quite dreadful. To me, code is a logic tool to solve logic problem, it's completely maladapted to to solve visual problems.

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

    Nice video!

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

    can your create a complete crash course in web dev tools in a browser

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

    It took them 10 years to get what Flash had in 2003

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

    I wish we had a graph editor :(

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

    legendary ty!

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

    I keep up to date with most features within the browser and have known about this for 12 months now. Had a play when it was first released and thought it was nice and all. The thing is you'll never use it. All I seem to use is linear 300ms or ease-in-out 300ms 😢

  • @jerK2023
    @jerK2023 Рік тому +2

    Nice tool, didn't know about this one. Definitely gonna use it.
    I remember when Steve Jobs / HTML 5 fanboys said that HTML 5 can do everything better then Adobe Flash. Here we are +-8 years later, and i'm still waiting for it to happen. Killing Flash was one of the biggest mistakes that happend for webdevelopers. The tools we had 15 years ago in Adobe Flash we're better then we have today. Some things definitely got better, but allot of things got way worse.

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

      Steve Jobs, IMO, said that mainly to crush competition, not out of merit. Allowing Flash would allow for App Store competitors.

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

      I thought exactly the same, but recently I found GSAP. This framework gives me back my optimism when it comes to interactive web animations. And things like ScrollTrigger were simply not possible with Flash. Btw, Jack, the founder, started GSAP back in the days as an extension for Flash.

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

      Authoring animations/transitions was definitely easier for people without developer skills. Now everyone lives in their tool; A designer nowadays will more likely recreate this animation in figma than open a secondary window in the developer tools of the target platform. A developer will probably copy&paste&hot-reload from some IDE. Then we have 4 authoring UIs to do 1 thing; one each in chrome, Firefox, figma, vsCode,... just to name the most popular ones

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

    I didn't even know "scale" exists

  • @abzzz-y7o
    @abzzz-y7o Рік тому +1

    you have same voice as Mr. Robot

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

    Hello, could you give me the roadmap of web developper
    Thanks ❤

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

    you should never use absolute words like "never, always"

  • @Rohan-u6j
    @Rohan-u6j Рік тому

    thanku

  • @ParkingLotStudioGames
    @ParkingLotStudioGames Рік тому +3

    so? what is this "tool"? No mention of the tool in the title, no view

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

      It is built into the browser smartass.

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

      Good on you for engaging with the video and showing the algorithm that it's worth the time for more people to watch! 👍

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

      ​@@KyleJMitchell the guy is big enough for a couple comments to matter. I'm not hating or saying the opposite of your comment, smart mouth. If you read my comment all I'm asking is the name of the tool. I never said I wished the video had less engagement nor that the algorithm should not pick it up. If that was my premise I would've clicked don't recommend and moved on but I decided to comment asking a question and explaining why I asked that question. Check that reading comprehension my man.

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

      ​@@ParkingLotStudioGamesyou're the tool

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

    Hare Krishna 🙏🏻

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

    Well, I am glad UA-cam also has some useful tools to change the speed of the video playback... You are talking way too fast for me non-native English speaker. In German we say: "Ohne Punkt und Komma reden." I have found, that 85% of the original speed is just right.

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

    learn by doing

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

    Please make you video in slow vocal. You are very fast in speaking and sometimes we have to watch again and again to listen what did you just said before😊

  • @Rohan-u6j
    @Rohan-u6j Рік тому

    thankuu

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

    learn by doing from terminal

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

    I love your video's but for the love of god please take a breath every now and then

  • @JustinGeorgejgm
    @JustinGeorgejgm Рік тому +3

    First here.
    FYI: im not proud of this 😅

  • @agneoa-b2x
    @agneoa-b2x Рік тому

    It’s all good but its all adds up and make chrome so slow. It’s already heavy and slow 😢

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

      Stuff like this doesn't make Chrome slow. Caching and prefetching all sorts of pages for your current location and possible destinations to provide snappy load times is what makes Chrome slow. Resource hogging is just that: the program hogging resources. Mostly RAM, and mostly by storing too much for the system underneath the program to have enough memory left over to render the application's chrome. Small tools like these, used for analyzing and rendering visualizations based on simple CSS rules, aren't going to take much effort from even a mid-range processor.

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

      only low on init

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

    yeah

  • @j.k24
    @j.k24 Рік тому

    bet figma will create a better ui for animation which output the css

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

    hehe

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

    Lol

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

    Me thinks you are speeding up your narration. Either that or you just talk remarkably fast.

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

    Misleading title 😂

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

    A very clickbatey title. Sorry to say because you have good videos. Thumb down.

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

      To fix just replace "this too" with the actual name of the tool please.

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

    stop bobbing your head left to right. it's distracting. or keep doing it but take your head out of the video. thanks. Edit: a lot of us watch tuts in 1.25 or 1.5 speed and your head bobbing at accelerated speed in EVERY video is mildly irritating.

  • @Rohan-u6j
    @Rohan-u6j Рік тому

    thankuu