Web animation gotchas - HTTP 203
HTML-код
- Опубликовано: 30 сен 2024
- Fading something in, and fading something out - sounds simple right? Unfortunately not! Jake & Surma talk through the various gotchas of animating the web, and how to work around them.
Using CSS transitions → goo.gle/2TXTUCB
Using CSS animations → goo.gle/3et8gEq
The web animation API → goo.gle/3mXbV0C
getAnimations → goo.gle/3oXMLk4
commitStyles → goo.gle/38d6PsN
Event listeners and garbage collection → goo.gle/32c4TNd
Spec discussions → goo.gle/3k1zbIE
The final animateTo function → goo.gle/363WVHn
JavaScript animation libraries:
jQuery → goo.gle/34XEowU
Greensock → greensock.com/
AnimeJS → animejs.com/
The old library Jake made (don't use it) → goo.gle/34ZFGaU
Other videos in the series → goo.gle/2wneQLl
Subscribe to Google Chrome Developers here → goo.gle/Chrome...
Also, if you enjoyed this, you might like the HTTP203 podcast! → goo.gle/2y0I5Uo
@Surma misenglish is my new word of the day haha I think you combined “true to form” and “close to home”
02:20 CSS Transition
06:56 CSS Animation
08:32 Web Animation API
14:26 animateTo
Fantastic video! I feel like episodes like this, where you share more obscure issues you've encountered and solved in the past, are just pure golden. 🙏
Thank you for always creating such incredible content! This series, in combination with SuperCharged, has been the single greatest influence over the quality of my work. I would not be half the developer that I am today without the two of you (and Pual).
Hi! Great video. Would love to see the admin add a pinned comment linking to the new view transitions API and how your demos would be updated to use it. My understanding is: we used to have old transitions, then we got animation-based transitions, and now we have view-transitions and the ability to animate discrete properties. Maybe there's already a newer video on your channel you could link to?
again THANK YOU ..another awesome video
didn't know about .animate! ..cool 😎
Just summarized half a year of work. Fine, a year.
I would love to see an episode on advanced animations on the web like scroll based and timeline based animations. There are many libraries like greensock, animejs, scrollmagic ect. that help with this advanced animation use cases. I would love to know if it would be possible to replace them with modern web apis like the web animation api.
Web Animations API has a dedicated timeline type and a scroll timeline now :)
5:20 I really though it was the spelling of transitioned that was the weirdness! Until I realized it was "transition end", not "transitioned"!
Great video guys! I've always struggled with animations and it's comforting that others have been caught by the gotchas over the years. Thanks for the explanation on the different methods and a suggested approach to animating. 👍
Is the getComputedStyle() method slower than the double-RAF?
Will the browser synchronously wait for the next frame?
It doesn't wait for the next frame, it just performs a style calculation. It shouldn't be a problem unless you've got lots of code that invalidates styles and recalculates them in a single frame.
Paul
Loved this. Unbelievable how much I learned from the http 203 casts over the past few years. You guys definitely contributed immensely to my transition from an 'ok' dev to a decent web platform Developer who really keeps an eye open for optimal implementation of Features with baked in APIs rather than some jankie DIY JS.
I really owe you guys one :)
OH MY GOD that small comment about having to use rAF twice was such a mind blown to me, I never understood why one didn't work, and usually ended up giving up and using wait(1000/60) or something similar 🤦♂️
In the spirit of "first": 1337 views! That aside - thanks guys, for making these videos. They're little nuggets of pure gold. Looking forward to seeing your in-person banter. Also missing Supercharged! Props on the callback.
Thank you it was useful and fun!
It's really amazing! Thanks for the video) Interesting gotchas, especially the one with fill mode
Another animation gotcha: if you're animating block height (yes that's not performant but sometimes it should be done) and that animation is triggered by a button contained within that block - don't forget to remove focus from that button (event.target.blur()), otherwise the whole screen would scroll with that button because it's still in focus.
I started to create a bit of tooling to make the web animation API work for me. The whole concept of "fill" is very unintuitive to me, and I have a 20+ year history of scripted animations.
Where’s Monica?
I just encountered this issue last week! Instead of using Animation API, I am using the traditional modify class list method, which ends up with multiple mid-state classes. Great video!
Great video as always :)
Hands off, gsap is the best animation api out there nothing that comes even close it .
I used gsap a lot when doing the slides for my event loop talk ruclips.net/video/cCOL7MC4Pl0/видео.html. I don't think it has a great API, but it does work. I might use AnimeJS these days just because it's much smaller.
@@jakearchibald I agree with sam, nothing comes even close to GSAP, which shouldn't surprise anyone as it had almost 20 years to mature. A lot of realworld friction polished it into shape.
@@herrbasan Fair enough. Personally the "20 years" has resulted in a lot of baggage, both in terms of API design and implementation. I've used it in slides, but I think I'd avoid it in favour of a lighter alternative.
Can we please get some more HTTP 203 I miss these
I didn't see it mentioned, but in my experience I've had animations such as opacity fades (or anything really) kept in CSS classes like ".fade-in"
And then upon user interaction I use javascript to append the class ".fade-in" to the div that needs it. And later ".fade-in" can be swapped to ".fade-out" or various other animations. The animations are always CSS classes and JS is used to trigger each one.
I personally haven't run into any issues doing it this way. Are there advantages to the method in the video over the one I'm used to?
This was already mentioned in another comment. If you use class names, then you're back to using events for completion, and probably back to using fill-forwards, then you're back to all the issues I mentioned in the episode.
first
Really learned something here. Thanks guys!
Hi, why there is a photo o the guy Paul Lewis marked with "Gone but not forgotten" ? To be clear, I am not offended or something, but it seems to happened something to that person. But I didn't find any information announced about that.
Paul used to be on this show until he moved to another team and Surma stepped in.
@@jakearchibald looks like, it means something else. Got distracted and instead of watching the video, i went on to searching about him.
@@leojino yeah we've removed it from the newer episodes
@@jakearchibald that’s good. And I found his latest tweets, so all good
Wow. So much things I still don't know.
This is so cool. The best channel for tech knowledge
Fantastic stuff. I did not know half of this!
Love the video. If you didn't need to use fill to get the final values wouldn't the flash of wrong css be an issue again?
I'd like some option like commitOnFinish: true
Or just use Svelte. ‘transition:fade’. Done.
Although I talk about fade specifically, I'm talking more about general animation principles. The solution covered works for many different kinds of animation, even multikeyframe and off the main thread.
Greensocks solved these issues already I guess, since I've not had any of these issues in the years I've used it.
Right, but that's 25k+ of script you might not need
Go go Chrome Developpeerrsss!
I would recommend doing `options: { fill: 'both', ...options }` that way if someone passes in their own fill on purpose, it will override yours.
hm but if they don't use 'forward' or 'both', the method will not work as intended
@@jakearchibald could have 'disco' in the future. I just think it would be annoying if I pass in 'fill: foward' because it's exactly the way I want it to work, and it gets overwritten with 'both'.
Where is aerotwist!!!
Isn‘t it, in most Cases, better to just add and remove classes?
I don't think so. If you use class names, then you're back to using events for completion, and probably back to using fill-forwards, then you're back to all the issues I mentioned in the episode.
Hey, why not just add a option in the animation api to just apply the style at the end of animation?
And by the way, really fun videos!!
That's the solution I'd like to see too. There's some discussion of it in the spec issues. I'm less sure of what should happen if the animation is cancelled, but I guess that could be an option too.
@@jakearchibald could be an event flag indicating finished but canceled similar to events we have for keyup and keydown
You 2 are Z'Best!
I ❤ these videos
So good 👍
Why is there a sticker with Paul, gone but not forgotten ? Is he really left google ?
Paul used to be a presenter on HTTP 203. OR HAVE YOU FORGOTTEN?? ruclips.net/video/IskiTVqHp18/видео.html
@@jakearchibald that sticker confused me . 😂
It is quite astounding that in 2020 we still haven't achieved Macromedia Flash 5 animation prowess which was back in 2000.
I don't think that's the case. Flash devs relied heavily on Greensock for anything beyond the simplest animation. And I don't think Flash ever had anything like compositor driven animations.
Even on this video you have so eloquently highlighted the quirks and perks of web animation ever since we moved away from flash.
With Flash's timeline, visual tools and animation attachments to movieclips, the process of creating animated UI experiences was more polished and straight forward. The collaboration between programmer and web designer felt natural and streamlined. If we think about it Flash was a single page application with enhanced rich media capabilities and visual tooling in an era of static html pages. The current paradigm feels like "hacking" on that old static dom elements of the previous century browser :).
Anyways, just my two cents from an old timer who was around during the rise and fall of that flashy web.
I used to be a flash developer too. The browser runtime is much better than the flash runtime in terms of performance, but yeah, the web hadn't seen anything as good as the Flash IDE.
Indeed, performance was the main culprit to it's downfall. I really enjoyed the "flash" flashback in the video (and here). cheers
Awesome stuff 😎
For the algo
I feel some power in the INTRO. 20 years of experience to make one web animation function, hmmm... That's a topic for a book or blog post at least. Let's think where we can be in 20 years with WEB ANIMATION. I can estimate that WEB animations will be accessible via some kind of API on the VIDEO screen on the car screen. Web animations can help people who work in the transport industry on other continents like European container ships crew in Asia, or Asian cabin crew in Africa. The WEB TRANSPORT ANIMATION is the future where we all going to.
I find myself missing the days of flash and silverlight. Back when the web was cool.. js animation tools, do any exist?
8:21 Visibility API to the rescue?
The visibility API is more about page visibility than element visibility.
First to comment
Loving that Limited edition Lagavulin in the background, I have one myself👌
Yeah! I was bought it for my birthday. I thought it'd be average because it's a tie-in, but I really really enjoyed it.