Scrollbar showing during Back In Right animation
-
When the element is animated in from outside of the viewport, the user sees a horizontal scrollbar on the page.
Here are some screenshots of it in action. Watch at the bottom of the screen for the scrollbar to appear:
- https://www.dropbox.com/scl/fi/rrc7esdu6vc5j7owrq6wh/CleanShot-2023-08-18-at-14.58.36.gif?rlkey=1m6hzg3z3ift0uyor19znodhu&dl=0 (Twenty Twenty Three Theme)
- https://www.dropbox.com/scl/fi/q3310plbv125r90bfgy84/CleanShot-2023-08-18-at-15.00.47.gif?rlkey=dtbb80w07mfgvzcqmagljp2j2&dl=0 (my custom theme)
You can also see it in action here: https://custom.hbserver.dev/style-guide/
I saw in this support thread that a fix would be
html { overflow-x: hidden; }but that would cut off any other elements that are wider than the viewport (ex: a table).I’m wondering if a solution would be to temporally put the
html { overflow-x: hidden; }only during the animation? Do you have the source code of the javascript by chance? I could play around with it and submit a pull request if thats helpful. I am more than willing to contribute to the fix.Thanks!
The page I need help with: [log in to see the link]
-
Sure thing! Here it is: https://www.dropbox.com/scl/fi/hq8thy23zdefs5ufijwbo/CleanShot-2023-09-11-at-09.52.18-2x.jpg?rlkey=qnmj0iep38gkvx5ecsoht3y9f&dl=0
It doesn’t happen in every animation, just the ones that come from outside of the viewport on the x access (Ex:
backInRight).I looked into it a bit more and animate.style‘s demo page has an
overflow-x: hiddenonbody. I don’t love that solution as talked about above, but all that to be said, I don’t think this is an issue with your plugin, more an issue with animate.style.Personally, I’m just going to avoid using this animation. I’d rather do that than have the plugin force an
overflow-x: hiddenon all pages.It looks like the animate.style developer doesn’t think their library should handle it either.
I’ll mark this as resolved. Thanks for the response! ??
- The topic ‘Scrollbar showing during Back In Right animation’ is closed to new replies.
