Deconstructing the "Whimsical Animations" landing page

by ambigious7777on 2/25/2025, 12:35 PMwith 38 comments

by jszymborskion 2/28/2025, 4:56 PM

> When I keep them in their native P3 color space, each image is between 50kb and 150kb. With 22 individual images, I’d be sending almost two megabytes of assets, which feels like way too much for decorative images like this!

Love to hear the consideration for folks. I feel like I download twice that in javascript blobs from like 12 analytics companies and ad videos every time I visit e.g. CNN or TechCrunch

by mattlon 2/28/2025, 5:13 PM

“ Reduced motion detected

It appears that you’ve ticked the “Reduce motion” option in your system settings. As a result, certain whimsical features on this page have been disabled.”

Thank you.

by andrelaszloon 2/28/2025, 5:52 PM

> It appears that you’ve ticked the “Reduce motion” option in your system settings. As a result, certain whimsical features on this page have been disabled.

I think this is a Windows setting I enabled to get rid of annoying window animations, didn't know it could affect web pages, and I'm not sure I want it to :D

Well it's nice actually, but in this specific case I think I'd like to override it.

by simonbarker87on 2/28/2025, 6:57 PM

Josh’s first course, CSS for JS Devs was how I finally “learned” CSS after 15 years of working with it.

It’s not just for JS devs of course, I started with C and PHP nearly 20 years ago now, and I highly recommend it to anyone looking to understand things like “why isn’t the z-index doing anything?!?!” and the like.

by jasonjmcgheeon 2/28/2025, 6:33 PM

Idk if there's just something wrong with me, but I feel like every time someone says "look how much better P3 looks" I just think it looks over-saturated and the more muted look of the srgb just looks so much better to me.

by bahrtwon 3/1/2025, 6:41 AM

Such an amazing amount of details. Really impressive! You make the web a little bit more fun

by RheingoldRiveron 2/28/2025, 11:27 PM

I did Josh's React class and it was incredibly well done, I'm really looking forward to doing his animations class when it's available, I will definitely be registering as soon as it's in open beta.

by roomeyon 2/28/2025, 7:40 PM

Wasn't expecting to see Irish there, thank you! Beautiful page also!

by dylan604on 2/28/2025, 6:10 PM

Each time something from Josh gets posted here, I find my self realizing how little I know about CSS yet feel like I have a much firmer grasp than most. This individual's dedication to continue pushing things within CSS is something that I am in awe of and much appreciation. I just wish I had such a site where some of his more interesting ideas would be a fit.

He strikes me as someone with a creative tech nerd version of "hold my beer" mentality with much less dire consequences

by yozon 2/28/2025, 10:01 PM

Take the spoiler warning seriously. The landing page is fun to play with (once you find the tools in the top right corner) and has at least one amazing/bizarre toy in it.

by jsheardon 2/28/2025, 4:34 PM

What stands out the most to me on that landing page is that scrolling craters the framerate on my high end phone even though there doesn't seem to be any animations tied to scrolling. Maybe a Chromium browser would handle it better than Firefox, but ugh.