This content originally appeared on Go Make Things and was authored by Go Make Things
Earlier this week, a friend shared a “really cool website” from a design and dev agency (I’m not going to link to it, don’t ask).
Nearly every single element on the page was animated in some way.
Every heading animates it’s letters as it scrolls into the viewport. Images spin and slide and flash. Card components have a subtle bouncing effect. They use a custom cursor that has a very distinct “flip” when you hover over interactive elements.
As someone with ADHD, this site is my fucking nightmare.
My brain can’t process any of it, because every single element on the page is fighting for my attention. I suspect this was designed to showcase all of the things they can do, but to me, it conveys a complete lack of restraint or user-focus.
And frankly, it’s an accessibility issue for neurodivergent folks like me.
I saw a great talk at the original Artifact Conf from web animation expert Val Head on Designing Animation Awesomeness (not recorded), and the big takeaway was…
Use animation to draw attention to specific things, not just as decoration.
This site animates all the things, so your eye isn’t drawn to any one thing. It’s just drawn away from stuff.
For example, let’s say you have a button that must be clicked to move forward in a flow.
Having it subtly bounce or pulse or get just a little bigger can draw the eye to it so the user know what to do next.
But this trend of “animate all the text on scroll”? It hurts my brain. I hate it.
Like this? A Lean Web Club membership is the best way to support my work and help me create more free content.
This content originally appeared on Go Make Things and was authored by Go Make Things