Minor Request for Website: Reduce animations

Help us improve Penpot
1

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 :slight_smile: (I am NOT against animations per se, I find them pretty useful in general!)

2 Likes
2

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.

1 Like
3

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!

1 Like
4

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.

4 Likes
5

Hello @candidexmedia:
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 = false to 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.prefersReducedMotion and set its value to either 0 for full animation or to 1 to 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.

2 Likes