Horizontal Scroll, whole website

[friedaundihrbachelor]

Hi!
Ich bin schon lange auf der Suche nach einer Lösung für mein Scroll-Problem.
Ich möchte ganz einfach die GESAMTE Seite horizontal scrollbar machen, nicht nur Teile oder bestimmte Bereiche. Also eine ganze Website, die sich aufbaut und verscheidene klickbare Teile und Interaktionen im Laufe hat, aber eben nicht von oben nach unten scrollt sondern von links nach rechts.

Man kann ja in Adobe XD direkt bei den Maßen der Zeichenfläche auch angeben, ob ein vertikaler Bildlauf möglich sein soll und die Viewport-Höhe festlegen. Aber es ist eben dort nur die Wahl zwischen "Kein" oder "Vertikal" für den Bildlauf. Eine Option für "Horizontal" gibt es erstmal nicht.
Mit scrollbaren Gruppen habe ich das Problem, dass meine Interaktionen und Animationen, die ich im Laufe der Website (die nach rechts und links scrollbar sein soll, nicht nach oben und unten) anlege, sich verschieben oder einfach ausgeblendet sind sobald ich einen Bildlauf-Rahmen dafür erstelle.

Habt ihr eine Lösung dafür? Ich habe schon so viele Videos und Foren durchsucht, aber niemand scheint daran interessiert zu sein einen Protoypen für eine horizontale Website zu bauen.
Genau das ist aber eben mein Programm-Limit: ich kann Webflow oder Coden nicht nutzen sondern muss mich auf Adobe XD bzw. Figma beschränken.

Vielen Dank,
Johanne

[AkinGn]

Hi @friedaundihrbachelor, if I'm not missing something, you can actually create a background element that as wide as you want, exceeding the artboard's width (and covering the whole height of the artboard), and then make it scrollable as a workaround. See how I created a background element that is wider than the artboard, with a horizontal gradient to see bg changes as we horizontally scroll: 

https://xd.adobe.com/view/647e85e7-8e1c-4d23-9a5b-ac1d903e5be5-312d/?hints=off 

and the file is here if you want to check: https://www.dropbox.com/s/zqap41w9kxpgkvg/horizontal%20scroll.xd?dl=0

Hope this helps!

[friedaundihrbachelor]

Hi,

unfortunately that's not what I'm looking for.

I know how to make scrollable Backgrounds or Parts, but I want ALL layers to move horizontally, instead of the classic vertical movement.

I want to create a FullHD One Page Website (visually it resembles a game where you run through a horizontal landscape) that extends left and right, not vertically like a normal Website.

And I want all Elements like Buttons, Interactions, Navigation Bar, PopUps, Slides/movable areas etc. to appear while scrolling, as usual. Like this for example: https://mylesnguyen.com/ 

This doesn't work though, once I group objects to make a scrollable area/group out of the elements, so the workaround you're describing would exclude any interactive objects throughout the scroll. 

[AkinGn]

Hi, I think the best way (I know it's a workaround but it'd solve the problem for now) is in a full width artboard, creating the site > grouping all elements with the whole bg > and pasting the whole site content to the narrow artboard and enabling horizontal scroll on that narrow artboard. You can see the updated prototype here: https://xd.adobe.com/view/9ab46fa5-0c33-4e33-9c32-1ac05773ea26-cfe7/

The file with two artboards is here: https://www.dropbox.com/s/zqap41w9kxpgkvg/horizontal%20scroll.xd?dl=0

[friedaundihrbachelor]

Thank you so much for your effort! 

This definitely works, as long as I don't add interactions (like Slide-overs, Lottie Animations etc.)

Because as soon as I group all of the content, icluding the interaction elements that in some cases lie outside of the artboard (see picture) and enable horizontal scroll, they lose function.

I added a picture where you can see the artboard. The Beetle interaction works, because the trigger element is in the artboard part that is viewable without scrolling. The interaction parts that lie outside though, like the textbox or the character on the right corner, are not working.

Again, thank you so much for your help! I know my scroll-problem is a little tricky. 

I wonder why it seems to be so problematic to add the "scroll horizontally" option to an artboard, just like there is the "vertical" option for Adobe XD. Why is it only offered for selected parts or slide-shows?

This definitely would make things a whole lot easier!

[AkinGn]

Actually interactions outside of the artboard works, that's why I added a checkbox and a button to every view/scrollable part. If you check again the prototype I shared, all buttons and checkboxes are working, as I mentioned the trick is, building all interactions in a huge artboard, and later pasting the content to the narrow artboard. I even added a popup to an out of screen area. Going to share a prototype video later. (haven't checked lotties but will let you know when I do so) You can also ask horizontal scroll to be added as a natively supported feature here on uservoice (there's an existing request that I haven't checked thoroughly but you can check if it aligns with what you're asking and if it doesn't you can create a new one;) https://adobexd.uservoice.com/forums/353007-adobe-xd-feature-requests/suggestions/44838316-horizonta... Hope this helps! 🙂

Edit:

Updated the prototype: https://xd.adobe.com/view/9ab46fa5-0c33-4e33-9c32-1ac05773ea26-cfe7/ 

and the file: https://www.dropbox.com/s/zqap41w9kxpgkvg/horizontal%20scroll.xd?dl=0 

Also you can check the screencast I just took here: https://youtu.be/nx2LT3Xlrug