When I visit the penpot.app there are several animated elements: The menu, the welcome text, and the video; they are slightly staggered but its welcome text, then menu (at the top) and then there is a larger change in the example video (at the bottom). So how the animation direct attention is a bit jumpy. Its just a detail, but every time I load the page I think it is a bit much (I am NOT against animations per se, I find them pretty useful in general!)
Hi @jdittrich thanks to your feedback the team started a conversation about motion and accessibility. Here are some articles we are looking into:
Do you have any thoughts about this?
We are in the process of updating our landing page, we will take this in consideration.
I can’t say if my problem is due to being generally sensitive to motions. Thus, I don’t know if I would or should set the prefers-flag in my browser. However, I think it would be great if these attributes would be supported, there are certainly people for whom it is more problematic. Looking forward to the updated landingpage!
I knew exactly what you were talking about @jdittrich. Perhaps it’s more a matter of taste, but the homepage animations could be a little subtler, shorter, or more restrained.
Implementing “prefers-reduced-motion” is also a good, however, I’m not sure how this can be implemented on the browser.
That “prefers-reduce-motion” is a media query we should implement in our code. After that, users will be able to activate this preference on their browsers.
This is how a user using Firefox can set up this option. Serve this as an example
- In GTK/GNOME: GNOME Tweaks > General tab (or Appearance, depending on version) > Animations is turned off.
- Alternatively, add
gtk-enable-animations = falseto the
[Settings]block of the GTK 3 configuration file.
- In Plasma/KDE: System Settings > Workspace Behavior → General Behavior > “Animation speed” is set all the way to right to “Instant”.
- In Windows 10: Settings > Ease of Access > Display > Show animations in Windows.
- In Windows 11: Settings > Accessibility > Visual Effects > Animation Effects
- In macOS: System Preferences > Accessibility > Display > Reduce motion.
- In iOS: Settings > Accessibility > Motion.
- In Android 9+: Settings > Accessibility > Remove animations.
- In Firefox
about:config: Add a number preference called
ui.prefersReducedMotionand set its value to either
0for full animation or to
1to indicate a preference for reduced motion. Changes to this preference take effect immediately
More info here
We are implementing a lot of changes in our web right now, I hope you like it once released.