Respect prefers-reduced-motion

[Frosty-J]

This pull request aimed to make the website respect prefers-reduced-motion. Most of its changes got merged in #47, but a few more controversial ones remain here.

Note that all of the following snippets are enclosed in @media (prefers-reduced-motion) { }.

Carousel info fade-in and the sliding transition of moving from one image to another

libgdx.github.io/_includes/carousel.html

Lines 226 to 228 in bc56394

	.overlay-fade-content:hover, .carousel__track {
	transition: none;
	}

Page fade-in on load

libgdx.github.io/_sass/minimal-mistakes.scss

Lines 132 to 135 in bc56394

	@keyframes intro {
	0% { opacity: 1; }
	100% { opacity: 1; }
	}

Navigation menu animations

libgdx.github.io/_sass/minimal-mistakes.scss

Lines 137 to 142 in bc56394

	.greedy-nav .visible-links a:before,
	.greedy-nav__toggle:before,
	.greedy-nav__toggle.close:before,
	.navicon, .navicon:before, .navicon:after {
	transition: none;
	}

[crykn]

This looks like a good addition 👍 If it is possible, I would prefer not to add the css changes though.

Regarding pausing the carousel while hovering: this shouldn't be all that difficult. Some inspiration can be found in bootstrap's code.

[crykn]

Hey @Frosty-J, I finally had some time to test this stuff. AOS.init({ disable: window.matchMedia('(prefers-reduced-motion: reduce)') }); didn't work for me (on macOS), but disable: window.matchMedia('(prefers-reduced-motion: reduce)').matches seems to do the job.

Additionally, I'm not convinced, the changes here and here are needed. As I understand it, prefers-reduced-motion is about reducing movements, which may discomfort users with vestibular motion disorders, so in particular, slide and parallax effects. I don't think it means that any and all animations should be removed, especially if they reduce the "jerkiness" of certain actions. Similarly, when reduced motion is activated, macOS seems to replace most of its "sudden" effects by blending ones.

[Frosty-J]

Apple seems to be the outlier when it comes to reducing motion. On Windows, Android and probably most Linux setups there's only the option to outright disable animations without any fades.

We don't know why users may have animations disabled. There's the aforementioned disorders, but other reasons could be that they simply don't like animations, animations would be laggy (e.g. when using remote desktop access software), or they find things to be snappier without animations. I'm in this last category, with few animations on desktop and my animation scale set to .5x (double speed) on Android, though none of my settings actually trigger prefers-reduced-motion.

Personally, I'd prefer to be able to use the website without the perceived load time being increased by 0.3 seconds and items taking a brief moment to pop in when scrolling down the history timeline quickly. Obviously that's a personal preference - others may think the animations are cool. I don't go visiting the website daily or anything, so I don't care as much as these chunky paragraphs may suggest, and having no longer reset on scroll (9ed065e) is nice.

---

I've added .matches now. The linked PR/issue didn't suggest it was necessary, but adding it didn't break anything for me so may as well have it for better compatibility. Cheers for putting up with testing - messing with system settings is no fun. I wish reduced motion could be toggled on a per-website basis or at least per-browser basis.

As for the rest, I fear we may be deadlocked, since we're in disagreement and there's no-one else here.

[crykn]

Apple seems to be the outlier [...]

No surprise there, ahem.

Personally, I'd prefer to be able to use the website without the perceived load time being increased by 0.3 seconds and items taking a brief moment to pop in when scrolling down the history timeline quickly. [...] I don't go visiting the website daily or anything [...]

The latter is exactly the reason why I think the animations aren't that big of a deal – most site visitors will probably look at the features or history pages only once or twice (if at all). The more "popular" pages (the tutorial, or the news section) don't have any animations.

I wish reduced motion could be toggled on a per-website basis or at least per-browser basis.

Apparently, Firefox has a browser-wide toggle, but tbf I couldn't get it to work on my end. As for a per-website setting, addons like Tampermonkey or Greasemonkey should be able to help with that.

As for the rest, I fear we may be deadlocked, since we're in disagreement and there's no-one else here.

I'm afraid there is indeed not much interest in the website, so how we proceed is up to you @Frosty-J: if you want the agreed upon changes in as soon as possible, I'd suggest splitting the PR, so I can merge this one. Then we can leave the other PR open until someone else chimes in.

[Frosty-J]

Apparently, Firefox has a browser-wide toggle, but tbf I couldn't get it to work on my end.

That option doesn't exist in my copy. Lots of about:config settings, but ui.prefers... isn't one of them. I have the same issue with trying to force websites to use dark mode. The extensions I've found try to force light mode websites into being dark mode, often with ugly results, which isn't the prefers-color-scheme I'm looking for. I don't really like dark mode unless text isn't the main focus, such as for video websites - it's just useful for testing.

how we proceed is up to you

I'm not really in a rush, and unfortunately I doubt any of this will make much difference anyway. For instance, there's no way advertisers will respect reduced motion, since it's in their best interests to attract attention. Obviously libgdx.com is ad-free, but the rest of the internet isn't.

What I'll do is clone this branch, remove the sections you've highlighted from it, and we can merge that. At least doing so should reduce the number of changes within this pull request, and perhaps a tag could be slapped on it to highlight that it requires further discussion.

[crykn]

Hey @Frosty-J! I moved everything from master to dev, so the outstanding PRs got closed automatically. If you want, you can reopen this PR for the new branch.