Sources & Links from the presentation

• GitHub Repo: https://github.com/queerdevperson/animation-toggle
• Lottie Animations
  • https://lottiefiles.com/
  • https://lottiefiles.com/interactivity
• Some Resources
  • https://adrianroselli.com/2019/08/under-engineered-toggles-too.html
  • https://joshcollinsworth.com/blog/accessible-toggle-buttons
  • https://www.smashingmagazine.com/2017/09/building-inclusive-toggle-buttons/
• https://overnightwebsite.com/links/

Amendments to Presentation

As an example of “always iterate,” I’ve thought of an improvement on the session. Instead of setting the local storage variable based on the user’s system settings, it would probably be better to only set that value when the user explicitly interacts with the toggle button. This way, if they change their system settings, the page will change with them.

I’ve updated the GitHub repo to reflect this.

The other option is to mimic what web apps do and have a third option of “use system settings” but for a regular website, that’s probably overkill.

Session Description

Micro-interactions and animations can be a really fun way to add a little bit of flair and personality to a website. There are some basic guidelines to follow in general when it comes to animations, but what about when it comes to respecting the preferences of the people that visit? From concept to execution, this session will go over the reasons why animation pause buttons exist, how one is created, user experience and design considerations, and look at some other examples of how this can be achieved.