Web Performance Mini Series: Animations

probably not first ... sry for that comment xD

I noticed increase in fps right away with your hands. .. excellent video as always!

Love these 60 fps. Such fluidity.

Could you do a video about the famous material ripple effect, and the maths behind it?

Yes! I won haha! 😁

Thanks for the tips, that's some really valuable stuff!

Please keep the 60FPS btw, it's gorgeous 🤩

Saw a good talk yesterday here in Vienna about React Scheduler.. Will probably help a lot with performance. He did also a demo with clicking and changing the delay from 10ms to over 1000ms so that you can see how you can optimize your animations and triggered actions.

More Paul Lewis per second...? Yes!

😂 The End 😂

I laughed so hard at the end 😂😂😂 Awesome stuff!

Love it! Thought this would just be another video about using CSS transforms for their GPU acceleration. Great to learn about layers and how to use them! Thanks Paul!

Does position: absolute not promote to a layer as well?

Hi Paul. It's another great video. The questions I have are about memory limit for a browser tab. Is there any memory limit for a browser tab? Does it differ from a mobile browser? Does memory limit affect animations?

I’m watching this at 90 fps 😉

Regarding the 'jank' word what about?
- stammer
- lurch
- totter
- flounder

what a surprise :)

As always great video and limpid explanations, thanks for your work on these videos. 👏

Hello from Russia

I'm at 240FPS. Get on my level, Paul.

Very insightful, thank you!

Didn't you make a website which shows which properties cause painting and layout etc? I can't remember the URL. (May have been someone else at Google)

Can't help but notice those Chinese characters on your t-shirt. “自娱乐节今日”. Makes no sense at all(:facepalm). Great stuff btw. Love the awkward silence ending. Hey, you got "on the flip side" right this time!

till the last millisecond

Let's say my side menu is sliding from the left and its pushing the whole content to the right. Is It ok to apply will-change: transform on the container of that content?

I've been refering to your High Performance Animations article on HTML5 Rocks for years. I now can share this video as well.

What an amazing channel this is! Keep up the great work!

You're crazy, pal. I love your videos and jokes, always watch them till the end :D

another great video! really appreciating the way you explain things. worth watching til the end :)

Layers drastically improve animations performance. Everytime you have movement, opacity, blur (try to avoid blur)... do use a layer. For one-shot animations (ex: open a menu), use requestIdleCallBack, if you can, to avoid running the three animations above at same time (busy main thread CPU is bad for performance). If you do code splitting, also use requestIdleCallBack to lowerize priority of scripts that you are loading when displaying a new element, because you don't want that script execution (non-neutral on main thread CPU) to happen in the same time of your animation (ex : show/animate your Pay button first, then 50ms-100ms max later, lazy load GooglePay script). Of course all the scripts should be loaded and parsed in a Service Worker.

Tank you for sharing your knowledge. Watched all of your videos and each one of them is awesome !

Thank you to describe in details 👍

FLIP side! Any suggestion when dealing with fixed elements that fade out? I've tried will-change: opacity on the element with will-change scroll-position on the element over top of it. (Horizontal scroll layout)

Could you upload code, sometimes need a complete picture to play with it

Man!! That is AWESOME!!! I really appreciate you taking the time to explain all that. Thank you

Choppiness!

just found you and love the way you emancipate out in personality :) wouldn't be surprised if offered bigtime oppts. love the under the hood stuff

Great video Paul! I've always heard stutter or micro-stutter used in gaming. I've never heard the term, "jank" until web dev.

Dude, you could make an entire series on the innards of transforms. Thank you so much for sharing!

Clear and simple explanation without omitting any relevant information. Amazing work, Paul.