Add animations to the sidebar and other small places

[Wulian233]

I hope this theme isn't too stiff, let's make it more visually appealing :)

Added animations for showing/hiding the sidebar Color transition for sidebar buttons

It shouldn't affect normal usage, but it will make it more user-friendly👀

https://github.com/user-attachments/assets/ac0bd262-425a-454f-b338-a7eb8383e28e

The video has been compressed, so the animation might not look very smooth.

[Wulian233]

• The sidebar animation -- from the video it looks like it has some issues, with the gray button lagging behind the rest when it's expanded. If this is fixed it might be ok to add it.

Thanks for the reminder, there is now a bug where the sidebar button is seen as part of the sidebar, causing it to be displayed at the end (lag) during the expanded animation. It should be pinned (split) out. I'll fix it tomorrow :)

[Wulian233]

Hi Hugo @hugovk , could you review this simple change, the effect of preview website is https://python-docs-theme-previews--210.org.readthedocs.build/en/210/ thanks!

[hugovk]

Would be good if someone can give a quick check on Windows, Linux and iPhone.

[Wulian233]

https://github.com/user-attachments/assets/39a1a09d-84d0-44fb-b862-9a157bc53605

It worked fine on my Android phone because sphinx doesn't have a sidebar button and comes with its own animation, so can only see smooth scrolling

[AA-Turner]

Tested on iPhone. The scroll behaviour when clicking anchor links within a page seems fine, but it is a bit annoying to have a 'scroll' when loading a new page -- e.g. open this link in a new page: https://python-docs-theme-previews--210.org.readthedocs.build/en/210/glossary.html#term-docstring

A

[Wulian233]

This is good advice, I tried it a few times and now the problem is finally solved. Clicking on an anchor point in the sidebar will smooth scrolling, and directly accessing a link with an anchor point will be pinned directly and will not scroll

https://python-docs-theme-previews--210.org.readthedocs.build/en/210/glossary.html#term-docstring https://python-docs-theme-previews--210.org.readthedocs.build/en/210/whatsnew/3.14.html#pep-761-discontinuation-of-pgp-signatures

[encukou]

Happy to see animations added if they're an improvement for most users, but for some, they are harmful. If you add the animations, could you turn them off for @media (prefers-reduced-motion)? Thanks.

[Wulian233]

I've never thought about accessibility before, and I read the passage you gave me. I just now commit and theoretically these users will now disable the animation effect

edit: finished

[hugovk]

Hmm, it is a little odd that when clicking to open the menu again, at first it shows the menu text before moving the divider back to the right. But maybe it doesn't matter?

[Wulian233]

Very carefully obviously. This animation only lasts for 0.3 seconds, and I didn't notice it 😂. I need to take a closer look at whether the text in the sidebar appears or disappears suddenly, without following the sidebar's animation. I'll check it out tomorrow and hope I can handle this little problem

[Wulian233]

Never mind! I'm also very willing to continue contributing to other aspects of this project. I just removed the fadeIn animation. Now there are only the imperfect sidebar animation and the color gradient of the hover sidebar button left. Feel free close/merge this pr at any time

[python-cla-bot[bot]]

All commit authors signed the Contributor License Agreement.