The defendant won a design award last spring. It fades in, slides up, scales from 90 percent, and pins itself to the screen while a product photo rotates in three dimensions. It took the defendant four seconds to enter the courtroom, and it would like everyone to know it was worth the wait.
Judge Patricia Semantics is presiding. Before the trial began, she entered a statement into the record.
Judge Semantics: In the interest of full disclosure, the sections on my own website fade in as you scroll. They’re quick, they only happen once, and they turn off when you ask for less motion. I’ll allow it. I just want everyone to know I’m not above this.
The charges
- Holding text hostage. The defendant keeps content invisible until it scrolls into view and finishes animating. Until then, the words are on the page, but nobody can see them.
- Hijacking the scroll. The defendant changed the scroll speed, pinned sections in place, and turned one flick of a trackpad into a six-second presentation.
- Ignoring people who asked for less motion. Operating systems have a setting to reduce motion, and browsers tell websites when it’s on. The defendant was informed and kept moving anyway.
Opening statements
Defense: My client creates delight. My client tells a story.
Prosecution: Your client turned a pricing page into a theme park ride with a height requirement.
The witnesses
The first witness was a fast scroller who was looking for a phone number on a contact page. He flicked to the bottom and found a page full of blank space.
“Everything was still waiting to fade in,” he said. “I scrolled back up to give it a chance. Then it all animated at once, like a flash mob.”
Next, Nadia testified. She has a vestibular disorder, and parallax effects make her dizzy. She turned on Reduce motion in her phone’s settings years ago.
“The website knew,” she said. “My phone told it. It moved anyway.” She asked to be excused for the remainder of the defendant’s demonstration, and the court agreed.
Find in Page took the stand next. It was asked to find the word “refund” on the defendant’s FAQ page.
“I found it,” it said. “It was right there, highlighted, at 0 percent opacity. I’ve never felt so useless.”
The expert witness
The prosecution called prefers-reduced-motion, a CSS media query that has been supported in every major browser for years.
Prosecution: What do you do?
Reduced motion: I tell the website when someone has asked their device for less motion. Then the website gets to decide whether it cares.
Prosecution: And did the defendant care?
Reduced motion: The defendant animated a fade-in to tell me it had received my message.
The cooperating witness
The Subtle Fade asked to speak. It lasts under half a second, happens once, and turns off when someone asks for less motion.
“I’m in the same line of work,” it said. “But the content is visible if my script never runs. I’m a nice touch. I’m not the whole show.”
The judge thanked the Subtle Fade and quietly made a note about her own website.
The verdict
Guilty on all counts.
Sentencing
- Content is visible by default. Animation can only be added on top of a page that already works without it.
- Scroll speed belongs to the user. No pinning sections for a slideshow, and no changing how far one flick travels.
- Reduced motion means reduced motion. When someone asks, the movement stops, not just slows down.
- Every animation needs a reason, like showing that something changed, or guiding people to what happens next. “It looked cool in the demo” is not a reason.
The defendant was led from the courtroom. It took four seconds.
This case is part of the UI Court series.