5 ms·

Deconstructing the "Whimsical Animations" landing page

143 points by ambigious7777 2y ago

jsheard 2y ago
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.
- the_sleaze_ 2y ago
  > The experience is very limited on mobile. If at all possible, I’d strongly encourage you to visit on desktop.
  - jsheard 2y ago
    I took that to mean "the interactivity is more geared towards mouse input than touch", not "scrolling the page demands a desktop GPU for some reason".
- skavi 2y ago
  Safari on an iPhone 13 Pro handles this page without issue. That’s a three generation old high end phone.
  - tecleandor 2y ago
    In my OneOplus Nord 2 5G, that's a kinda mid range of that same era, works fine. Firefox 135, Android 13 (with all the stuff that OnePlus puts over it)
- knallfrosch 2y ago
  Works fine on iPhone 13 mini with iOS Safari. It's your browser.
- deleted 2y ago
  [deleted]
- joshwcomeau 2y ago
  Yeah, sorry about that - there is specifically an issue with Firefox on Android. It’s a very small % of my traffic, and remote debugging Firefox seems a bit tricky, so I haven’t prioritized it. But I should spend some time and at least take a look!
  - jsheard 2y ago
    FWIW I suspect it's related to the frosted glass effect, scrolling is much smoother after zapping those elements with uBlock.
    - joshwcomeau 2y ago
      Thanks for the tip!
jszymborski 2y ago
> 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
- dylan604 2y ago
  If only more people were considerate about the amount of bandwidth their websites serve. I just had a conversation where our system generates a CSV and I feel that we should be zipping the file, but I was overridden with a "people today can download large files easily today" and the "not having to unzip is worth it" reasons.
  - eddd-ddde 2y ago
    What about zipping only on the transport? Http supports compression. You save on bandwidth and users don't have to manually unzip it.
    - dylan604 2y ago
      This is why I don't call myself full stack even if tasked with those. Thank you. I will look into this
      - codetrotter 2y ago
        I think a lot of web servers will automatically gzip data if the client accepts it. You might not even have to do anything config wise if this is for a website and normal web browsers. If it’s for an app, it might depend on what client library you use but even then I guess a lot of them will automatically support that for you without any special configuration required.
        dylan604 2y ago
mattl 2y ago
“ 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.
andrelaszlo 2y ago
> 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.
- jackson1442 2y ago
  yep, it can be detected in JS and even CSS with a media query: https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion https://developer.mozilla.org/en-US/docs/Web/CSS/@media/pref... Depends on how the dev wants to implement it, usually when I'm throwing a small animation on a site I'll silently respect the preference and skip the animation without an override option, but for a site like this I'd expect an override switch.
dylan604 2y ago
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
jasonjmcghee 2y ago
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.
- deleted 2y ago
  [deleted]
simonbarker87 2y ago
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.
- uhoh-itsmaciek 2y ago
  Yeah, +1. I started as a backend dev and for a long time, I knew just enough CSS to be dangerous. After taking that course, I feel pretty confident. Josh is quite good at balancing aesthetics, standards, and pragmatism. He explains the mechanics of CSS in a way that facilitates developing understanding and intuition, giving you an ability to reason about solving design challenges instead of just trying things and crossing your fingers.
pinoy420 2y ago
[dead]
roomey 2y ago
Wasn't expecting to see Irish there, thank you! Beautiful page also!
yoz 2y ago
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.
RheingoldRiver 2y ago
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.
bahrtw 2y ago
Such an amazing amount of details. Really impressive! You make the web a little bit more fun

143 points by ambigious7777 2y ago

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.

the_sleaze_ 2y ago
> The experience is very limited on mobile. If at all possible, I’d strongly encourage you to visit on desktop.
- jsheard 2y ago
  I took that to mean "the interactivity is more geared towards mouse input than touch", not "scrolling the page demands a desktop GPU for some reason".
skavi 2y ago
Safari on an iPhone 13 Pro handles this page without issue. That’s a three generation old high end phone.
- tecleandor 2y ago
  In my OneOplus Nord 2 5G, that's a kinda mid range of that same era, works fine. Firefox 135, Android 13 (with all the stuff that OnePlus puts over it)
knallfrosch 2y ago
Works fine on iPhone 13 mini with iOS Safari. It's your browser.
deleted 2y ago
[deleted]
joshwcomeau 2y ago
Yeah, sorry about that - there is specifically an issue with Firefox on Android. It’s a very small % of my traffic, and remote debugging Firefox seems a bit tricky, so I haven’t prioritized it. But I should spend some time and at least take a look!
- jsheard 2y ago
  FWIW I suspect it's related to the frosted glass effect, scrolling is much smoother after zapping those elements with uBlock.
  - joshwcomeau 2y ago
    Thanks for the tip!

jszymborski 2y ago

> 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

dylan604 2y ago
If only more people were considerate about the amount of bandwidth their websites serve. I just had a conversation where our system generates a CSV and I feel that we should be zipping the file, but I was overridden with a "people today can download large files easily today" and the "not having to unzip is worth it" reasons.
- eddd-ddde 2y ago
  What about zipping only on the transport? Http supports compression. You save on bandwidth and users don't have to manually unzip it.
  - dylan604 2y ago
    This is why I don't call myself full stack even if tasked with those. Thank you. I will look into this
    - codetrotter 2y ago
      I think a lot of web servers will automatically gzip data if the client accepts it. You might not even have to do anything config wise if this is for a website and normal web browsers. If it’s for an app, it might depend on what client library you use but even then I guess a lot of them will automatically support that for you without any special configuration required.
      - dylan604 2y ago

mattl 2y ago

“ 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.

andrelaszlo 2y ago

> 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.

jackson1442 2y ago
yep, it can be detected in JS and even CSS with a media query: https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion https://developer.mozilla.org/en-US/docs/Web/CSS/@media/pref... Depends on how the dev wants to implement it, usually when I'm throwing a small animation on a site I'll silently respect the preference and skip the animation without an override option, but for a site like this I'd expect an override switch.

dylan604 2y ago

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

jasonjmcghee 2y ago

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.

deleted 2y ago
[deleted]

simonbarker87 2y ago

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.

uhoh-itsmaciek 2y ago
Yeah, +1. I started as a backend dev and for a long time, I knew just enough CSS to be dangerous. After taking that course, I feel pretty confident. Josh is quite good at balancing aesthetics, standards, and pragmatism. He explains the mechanics of CSS in a way that facilitates developing understanding and intuition, giving you an ability to reason about solving design challenges instead of just trying things and crossing your fingers.

pinoy420 2y ago

[dead]

roomey 2y ago

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

yoz 2y ago

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.

RheingoldRiver 2y ago

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.

bahrtw 2y ago

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