Allow disabling bubble animations

[geoffrich]

@ghostdevv brought this up in the Svelte Summit Discord chat after my talk so I thought I'd open an issue to capture my thoughts.

We should definitely be respecting prefers-reduced-motion for the bubbles. Since the animation is in pure CSS, we can turn it off in CSS using the media query (instead of relying on a Svelte store). Something like the following in Bubble.svelte...

@media (prefers-reduced-motion: reduce) {
  .positioner  {
    animation: none;
  }
}

However, this would only turn off the bubbles if the user enabled reduced motion in their OS settings. Not everyone knows about that setting, and this is a large enough animation that it would be good to implement a dedicated toggle. This would make it easy for users to disable animations for just this site.

Not sure how this would look design-wise, but we could probably implement with a custom Svelte store.

[ghostdevv]

This is awesome thank you @geoffrich - I am going to go ahead and add in that media query and then maybe if @brittneypostma has time she can find someway to incorporate something into the design!

[brittneypostma]

Thank you for bringing it to our attention. We definitely want to respect users and make the site more accessible. I will come up with a way to add in a toggle.

[ghostdevv]

It looks like we already had a prefers-reduced-motion system built into brittneys css reset! I am going to add this directly incase anything gets changed though

[geoffrich]

Ah, can't believe I missed that it was already there! Thanks for looking into it.

Re: dedicated motion toggle - one of my favorite examples is the Animal Crossing site.

[brittneypostma]

Thanks for the example, that's great.

[ghostdevv]

Thanks @geoffrich !