Why?
Often times when talking to other designers and programmers it was a common conception that you couldn’t design a frame with a slanted scrollbar with slanted contents as it wasn’t ‘possible’ however I decided to put that to the test. And within the next couple of minutes I already had a plan on how to fix this, it seriously wasn’t a hard issue to fix however it breaks the common misconception and allows the UI Designing community to move further forward allowing for new advancements.
Working
Principal
To set one up, start by positioning a canvas group where you want the scrolling frame to be located.
- Place the scrolling frame inside the canvas group and rotate it to your desired angle.
- Inside the scrolling frame, add a UIListLayout to organize its content.
- Then, place frames covering the x-size of the scrolling frame (could be lowered to desired size), and within each frame, insert another frame with a counter-rotation.
- This counter-rotated frame creates the illusion that the content is aligned vertically, despite the overall slanted layout.
- Finally, populate the inner frames with your content. This technique allows you to achieve a functional and visually appealing slanted scroll bar effortlessly.
Video
Try for yourself
rbxm
SlantedScrollbar.rbxm (11.8 KB)
rbxl
SlantedScrollbar.rbxl (63.8 KB)