Reverse Engineer CSS Animations

Use the Chrome browser's animation dev tools to record, analyze, and reverse engineer CSS animations.
#css #webdev #shorts
Official docs developer.chro...

[@fgsaldanha]

Pro tip for advanced programmers: use Ctrl + C and Ctrl + V

[@Fireship]

Good call, I wanted to keep this more beginner friendly with right + click

[@nowifi4u]

That feel when Ctrl+C and Ctrl+V are not beginner friendly :P

[@aquual1462]

@@Fireship lets not forget the mac users :)

[@arafatzahan2082]

But it's not cross platform solution.

[@zyansheep]

@@dixztube yeeeeee I wish I was good at vim, but its just so slow for me

[@rubenforner]

"Animate like a pro by right click copy and paste " loved that ❤️

[@poujhit]

Lol ya🔥

[@tanmay______]

“If you steal something, make it better”

[@PajamaPalace]

Stack overflow would be proud

[@nap2t3r]

That was priceless

[@husseinkassem494]

Thats actually how it works

[@seasong7655]

- Why should we hire you? - Look at these fancy animations...

[@elementiro]

- Why should we hire you? - I can copy and paste...

[@Eldalion99999]

you are joking, but I got legit aproached by a company cuz of this reason

[@radwl]

- Hired

[@diegoalvarez437]

@@elementiro I know how to vs I can is the huge difference 🤣🤣

[@CodeHemu]

Csssss Csssss Csssss Csssss Csssss Csssss Csssss Csssss Csssss Csssss Csssss Csssss Csssss Csssss Csssss Csssss Csssss Csssss Csssss Csssss

[@robhartle1849]

When you thought it was impossible to learn stuff in just 100 seconds, he comes along and teaches you something in almost a third of 100 seconds. Kudos to the man, everybody!

[@RobertWildling]

You mean the right-click pro tip? :-D

[@Kevin-jc1fx]

@@RobertWildling Nah, that was just so that the beginners around here won't feel excluded. The advanced programmers already use Ctrl+C and Ctrl+V 😂

[@troler7147]

@@Kevin-jc1fx No they use v and p

[@sodiboo]

@@troler7147 Yeah, most people think Ctrl+C and Ctrl+V is important, but don't realize only half of that is true. Ctrl+P is way more important than Ctrl+C, because it lets you print in 2/5ths as many keystrokes in python, or 1/9th as many keystrokes in Java. It's way faster and way more important than Ctrl+C, since you can always right click copy from stackoverflow, you're already using the mouse anyways

[@catmankitty9504]

This is the best CSS tutorial I've ever seen

[@CST1992]

😆

[@verified_tinker1818]

jokes on you, my boss pays me for this

[@FalseDev]

The ending about copy pasting was smooth

[@Optimistas777]

but serious, isn't copy pasting other people's code a copyright infringement?

[@Nicistarful]

@@Optimistas777 In that case you're copying an animation / transition from a stylesheet. Animations in CSS are often just transitions defined by curves. Curves are math. You can't copyright the principles of mathematics.

[@gnsf]

@@Optimistas777 kind of, no one will notice that

[@Optimistas777]

@@Nicistarful animations and graphics require creativity, by definition. also, possibly many hours tweaking, tooling, etc. Also, images are easy to compare for infringement, some advanced animations, movements as well. But regardless, all animations and pictures also contain inherent "fingerprint" through the uniqueness of the least significant digits - in other words there are many ways to paint a circle, but only ONE way out of millions to paint the circle exactly that way down to each pixel shade and animation millisecond

[@valerioharvey7289]

@@Optimistas777 no one own a bunch of CSS code. And they can't do anything about it, since Google allow people to see the web's code

[@febrilian]

Me, a backend developer: "Hmm interesting 🤔"

[@stackoverflow2155]

Hacker : **slaps website backend with payloads** Hacker : This bad boy can fit so many vulnerabilities.

[@MM-vr8rj]

@@stackoverflow2155 BURP

[@emperorreload]

@@MM-vr8rj Suite

[@CodeX-xyxy]

If you are backend developer and do not how front-end works then you absolutely suck

[@kushpatel6567]

Is it only me as a backend developer who thinks css is way more harder than beckend?

[@madloop3217]

“Good artists borrow, great artists steal.”

[@Optimistas777]

but serious, isn't copy pasting other people's code a copyright infringement?

[@caparazo3488]

@@Optimistas777 I think it might get too complicated since they're CSS properties.

[@Linkeshvaranrr]

@@caparazo3488 😼

[@user-zi8lg5qu1h]

@@Optimistas777 There is no such thing as copyright for functionality, you can copy an animation sequence and mostle anything that isn't patented or trademarked.

[@MrDyln]

@@Optimistas777 coding is considered creativity and as such is covered by artistic copyright law. As such, if you copy the entire website. That's a no-no. Borrow a piece. Okay. Borrow a piece and adapt it. That's transformative, baby! Now you're a coder and an artist!

[@fikrad0]

Last step don't tell your friends you copy and past : trust me 😅

[@realSeyitan]

True. Also, it'll be a good idea to understand the code.

[@codiumyt]

past?

[@lucadelauw9039]

@@codiumyt pasta

[@silverzero9524]

they know

[@bogota2464]

If you do that **once** they’ll say you copy-pasted everything from now on lmao

[@ThiagoVieira91]

Now I can do fancy animations in less than 38 seconds. Got'em!

[@RobertBrunhage]

The pasting part is my favourite 😎

[@sauravadhikari8645]

Well, I am sure that, one of the requirements to be a developer is to have great deal of experience in copy pasting.

[@dablulite]

I cannot even begin to describe how useful this is to me, I've been looking for something like this for months

[@mukeshwarvarma9957]

Duuude. I was asked today to look at how a website did their animations and I had no clue where to start. Annnd then this shows up on my recommendation 🤔😯

[@klauseba]

Just a coincidence. I'm not a developer but I also got it as a recomandation. And there's 7 billion other people on earth so no illuminaty confirmed.

[@mukeshwarvarma9957]

@@klauseba ok what I actually meant was not recommendation but Jeff uploaded it on the same day I was supposed to look into animations. Correction*

[@adot3210]

​@@mukeshwarvarma9957 it was meant to be

[@iAmPerflexed]

**copy pasted fancy CSS animations** Hiring manager: "ooh spangly things 🤩 you're hired."

[@tonymasse3887]

Freaking hilarious! 😂 Yet super informative, I didn't know about the Animation Panel in Dev Tools. Awesome.

[@blackerhawk1508]

For me, was awesome to discover the code coverage one

[@mike22273]

Bonus tip, this works for front end, back end, database, APIs… email bodies… birthday cards… wedding vows… It’s really a universal software development trick

[@rmoyni3]

All these shorts’ endings are fantastic 😂

[@TheEpicFace007]

I love your sense of humor

[@Fireship]

I wasn't joking

[@jaydstone]

​@@Fireship 💀

[@MM-vr8rj]

Finally a thing that I knew already. Guess I'm a pro at reverse engineering static websites now. Maybe a tutorial on how to reverse engineer JavaScript? (please in depth and not just inspecting the event handlers of an element)

[@marufhassan634]

Expert devs and designer taking months to create flawless animation . . Me- Copy paste goes brrrrrrrrr

[@contactdi8426]

LOL 🤣🤣🤣 Copy Paste goes brrrrr...

[@klauseba]

just like China

[@lycan2494]

LMFAOOO

[@ianbdb7686]

Must be from sneaker twitter

[@Calupp]

Literally the only shorts I've ever "liked" Please keep these coming

[@sauravadhikari8645]

Keep up with these short vertical videos, they are awessome. Your works really makes the day.

[@daniel_q40]

Dude... the freaking animation panel indeed exists, crazy. Been looking for something like that for a long time

[@ideas-matter]

Copy/paste, that's perfect I've been practicing that for 20-years. Getting really good at copying stuff, but sometimes I paste it in the wrong place.

[@snopz]

We need a video on how to know where the random values in the requests comes from / made

[@11vag]

Man, these shorts are fireeeee. I love the sense of humor of this dude.

[@mrbjjackson]

Dude the rate at which you're putting videos out lately is insane. Is it just you making them or do you have a team? Either way it's impressive. Just please don't burn yourself out! We need you to stick around!

[@AyushSharma-id3ld]

0:14 Ctrl + Shift + P. But Great content as always. Your tutorials greatly improved the quality of my project. Keep up the good work.

[@zidaanhayat4286]

Kudos to the most accurate web dev tutorials known to the internet

[@user-zo2ky4mz7d]

I was literally just thinking about this this morning. Thank you for this. Although short, but it's gold. 🔥

[@alirahmani5601]

I love these new #Short stuff.

[@KastanDay]

This was very well made. Probably took forever to put together.

[@FalseDev]

Me a backend developer watching this anyways:

[@cristianmartin3706]

Best channel in youtube no cap

[@brianalpert1786]

Student who only knows C/C++: hmm yes interesting.

[@self-interest.]

Honestly the best advice you can give because these days companies want you have unimaginable skills

[@aloblanko]

I Love that pro Tipp at the end 😂😂

[@ThomasConover]

Bro is flexing his reverse engineering skills in the face of noobs without pissing them off. That’s a pretty impressive skill in itself.

[@Atanepes]

Yoo , thats a neat . 👌 thanks i need more of dev tools tips secrets

[@CoderFromPakistan]

There's also an AOS library for that, it animates on scroll.

[@piotrszewczyk9749]

Oh man :) You're gold. You poses every single virtue ideal engineer should have: Precision, practicality and darn good sense of humor.

[@spirits__]

Great tip. Will definitely use this to center my content

[@SoulDragonXI]

I am glad other people do this I'd feel bad, seeing something I liked on a website and copy-paste it for later, and redesign it fit the style of the project.

[@maximotejedapozo9335]

I love all these pro tips.

[@kuntaldas2843]

I think it existed in Fire-fox long before it came to chrome Dev tools.

[@AbhinavKulshreshtha]

Yup, I remember "borrowing" animation many years ago. Firefox still has better developer tools than chrome. Chrome did have better performance visualizer once, but now firefox also have a decent one.

[@Ainigma]

Didnt know about the animation panel. Sweet!

[@alienfunbug]

I can’t upvote this enough!!!! Blazing fast storefront with optimized ui/ux: cool. Parallax scroll five raw images: OMG YOU ARE A GOD!

[@ziaahmad8738]

Damn those right click tricks are so good : D

[@numonamir9145]

He has very clear voice to train someone

[@cesarmurillo6192]

Good artists copy great ones steal. This just help me to copy (well let's say reuse) some animations I was trying to implement from other websites. Thank you so much man!

[@ethereal41]

Wasn't expecting true and bartelby here ever

[@madannikalje760]

Thanks man that's life changing

[@troyfitz1638]

Needed this Google algorithm doing work!

[@basdfgwe]

Nice love these type of vids.

[@rul1175]

This is the cheat code for every design.

[@BukanReviewBR]

I'm new to this channel. This guy's tone is always serious so I can't tell if he's serious or joking

[@goobsterBS]

It’s an AI voice

[@noumanshah4275]

That force state saved my life

[@ObinnaWGMI]

0:00 I love the fact he put flutter in the meme

[@morshedulislamriaad6496]

That's awesome. Can you do a full project?

[@SargentPDA]

I feel that most people won't appreciate the True wow in the beginning

[@abdullahatif7854]

It's actually ctrl+shift+p. Had to Google it cause ctrl+p wasn't working. Anyways, awesome content as ever. Now I don't have to go into depression everytime I see a fancy animation and can't figure out how they did it XD

[@cereal9525]

Bro, literally what i do pretty much all the time.

[@MobiusCoin]

Nothing more pro than Ctrl + C, Ctrl + V

[@wanjohi]

This guy adds too much value to us We must protect him at all costs... I repeat at all costs

[@milodevs]

Remember Ctrl C Ctrl V is faster that doing it yourself from scratch

[@steamcode4441]

Amazing vid, I don't know if I'm advanced enough to understand it yet though :)

[@Adomas_B]

Great! Now I just need programming friends. Can you make a video "social life in 100 seconds"?

[@itzmeB2]

When ur early but don't know anything funny

[@Fireship]

Gold! 🥇

[@adarshkumar-jw2nz]

@B2 medal passed down to you. 🏅

[@itzmeB2]

@@Fireship thanks for the vid bro. I didn't know that Google Chrome developer tools had that much animation visualization tools

[@spg6380]

You're like sorcerer Supreme of web development.

[@AToubar1]

For mac users, CTRL + SHIFT + P opens up the Command Menu.

[@realSeyitan]

"like a pro, right click copy and like a pro right click paste". Professional advice to become a pro

[@azatecas]

Bro this is a time saverrr

[@nytr]

Oh shit, I didn't know about this animation window :D

[@baobuiquang9743]

I don't know why but I find this video both helpful and funny at the same time

[@neo7648]

So much info in so little time 👍👍

[@not.yet.famous9418]

First Flagship vid I ever saw I fell in love 😍

[@elohell5229]

saving for future references

[@zhuolintsai9030]

The last step. Thought we didn't notice. But we did.

[@komakaze1]

Shorts like this need a save for later function 😉

[@shivensaini3643]

Trait of good developer : Knows what to copy and paste, Simple!

[@PonthiusWebDesigns]

I showed my friends hello world... Guess who's a senior developer.

[@tjmarx]

Today I learned web developers have friends.

[@maksym.koshovyi]

Two most powerful shortcuts: Ctrl+C + Ctrl+V

[@joblessboy7030]

I never considered myself a pro until today.

[@JohnCarloCahimat]

man you're exposing my secrets

[@cuy4z]

I love you, man.

[@pritamhalder5962]

this is what we call a PRO - Grammer move 😂

[@Rundik]

The good old copy paste technique never lets down

[@matteozhang7140]

So genius, yet our hero

[@zeffali]

Backend developers -- now I know how to center a div

[@aaron6235]

Front end developers that write their own css are livid right now 😂

[@GuitarJoshB]

10 out of 10 would definitely recommend... just don't give away your magical secrets

[@devnol]

"Hippity Hoppity, your code is now my property" - Dani, 2019

[@Optimistas777]

but serious, isn't copy pasting other people's code a copyright infringement?

[@klauseba]

@@Optimistas777 good luck copy pasting those 8+3 pics and thousands of lines of code. I had to rewatch this video 30 times and still can't get to that exact part that he's showing at the end.

[@Optimistas777]

@@klauseba this video spreads the culture of copy pasting other people's code, so here I'm just raising the question of where would be the legal, ethical and practical limits of that. In this example, graphics and animations often are a complete piece of work, which may require creativity. Also it's super easy to prove stolen work as well, as each animation and graphic is super unique as opposed to just code

[@klauseba]

@@Optimistas777 idk I never worked as a programmer. Maybe google the topic but I've never heard of such issues only in case someone worked on a government project. Why would there be dev tools inside the browsers if it would be illegal? Why would ppl share their code on github if it's illegal.

[@Optimistas777]

@@klauseba yea, i have not heard either, but it's likely that it's hard to find and prove stolen code, and most don't care anyway. Regarding the legality of devtools. It's similar to a chef's knife - most professionals use it for the right things, and even if some ppl use it for illegal things, the knife itself is still legal to get, to have etc. Regarding github, the rules are defined by licenses attached to the code. Having no licence attached means the default github license applies, to which all parties agreed when creating accounts. But basically the default license means that you cant use, modify, redistribute the code, only view it :)) but yeah nobody listens to it, in real world I'm not a lawyer, not a legal advice, tho

[@ninjaasmoke]

This guy just solved css

[@Jdbluesky]

You are amazing!

[@matthewao]

This is so big brain

[@goat3760]

the video is soo goood but too short

[@littledovecitydust]

now you just record the screen and ask Claude to write the CSS code.

[@jaroslavhuss7813]

I really want to see this guy in some coding challenge ("Can it be done with react native is doing it now") against other youtube developers. I truly believe he would rule them all.