In the included example I have a horizontal navigation below the header.
How to make it scrollable? When I create a prototype it is not scrollable from left to right!
Thanks for using Adobe XD and sharing your feedback about this feature. I would request you to check this feature request: -https://adobexd.uservoice.com/forums/353007-adobe-xd-feature-requests/suggestions/13616781-carousel-... and upvote this discussion and share your comments as well.
Please update this discussion in case you need further assistance.
I was able to achieve this result by using 2 artboards, the drag trigger, and auto-animate in Adobe Xd v28.
The key uses a feature of Adobe Xd drag triggers called "auto-animate". It works a bit like keyframe animation where you have the starting position of the menu on artboard 1, and a duplicate of the menu dragged all the way to the left on artboard 2.
1. Make an artboard with a group of menu links as separate text objects in a line. Make so many menu links that they overflow the right side of the artboard.
2. Duplicate the artboard, and move the group of menu links left, until the last one appears in the middle of the screen.
3. In prototype view, select the menu group on artboard 1 and drag a new transtion to artboard 2. Set the trigger to drag, and the action type to "auto-animate"
4. Preview. You should now have a menu bar along the top for tabbed navigation on mobile.
Additionally, I found you can add a unique link and transition to each of your menu items:
5. Create a new empty artboard for your first page of content. Leave it empty of give it a "1" so you can recognize it when you preview.
5. Doubleclick your menu to access the group of text links it contains. Add a tap trigger from the first menu text to this new page it will link to.
6. Change the action type to transition and animation to slide left
8. Preview: clicking your first menu item should display your empty 1 page.
1. The overall width of the menu is important. Extra wide menus may not allow the user to select the middle items as it scrolls by too fast. POssible workaround is to create interim artboards to stop in the middle, but I haven't explored this.
2. For sublinks, after you add them to artboard 1 they will need to be added to artboard 2 as well. A bit of duplication that could perhaps be removed by making the menu a component - not sure.
For more info consult this intro to the drag trigger from Adobe: https://letsxd.com/videos/drag-trigger
Hope this helps!
Thanks, for sharing the steps on how to do that, It will surely help other community members.
Horizontal scroll group issues in Adobe XD
Unfortunately, I'm having trouble with the new horizontal scroll group feature. After grouping some objects as a horizontal scroll group, I click on the page and trigger the preview, nothing happens. It doesn't move, it doesn't roll, nothing.
I expanded the scroll group marker to the edge of the screen, but still, nothing happened.
What could be happening?
Apparently, doesn't work with mouse...
Just trackpad and tactil. I hope it's a joke.
The limitation will be addressed very soon in a future update. Stay tuned.
I was able to view Adobe's step-by-step demonstrating this new feature, and according to Howard Pinsky it is possible to apply this task (vertical, horizontal and both), without any problem and limitation.
I can't understand why Adobe takes so many years to implement one of the most requested features on the Forum.
It's true how can he maker this with his mouse?
In the video, the instructor demonstrates that it can be through the mouse (scroll and drag).
See another example:
Ok so what's the problem? Just Windows Problem?
But now there's a drawback: once you share something like this, or a layout more complicated (this is my case), you can't copy the text that are hidden from the main screen. The Adobe XD inspector doesn't allow reviewers to copy the text from elements that are supposed to be scrollable.
My client just complained about the lack of this feature and I answered I wasn't aware of this. But this little feature would surely help us a lot!